引用链接生成器

提取网页标题和URL,快捷生成各类标记语言引用链接文本并复制到系统剪贴板

  1. // ==UserScript==
  2. // @name RefLinkGenerator
  3. // @name:en-us RefLinkGenerator
  4. // @name:zh-cn 引用链接生成器
  5. // @namespace http://www.joshuazhang.net
  6. // @version 1.3
  7. // @description:en-us Generate reference link in all kinds of markup languages like html, markdown etc and copy to system clipboard.
  8. // @description:zh-cn 提取网页标题和URL,快捷生成各类标记语言引用链接文本并复制到系统剪贴板
  9. // @homepageURL https://coding.net/u/joshz/p/RefLinkGenerator/git
  10. // @supportURL https://coding.net/u/joshz/p/RefLinkGenerator/topic/all
  11. // @require https://code.jquery.com/jquery-1.11.3.min.js
  12. // @include http://*
  13. // @include https://*
  14. // @author joshz
  15. // @grant GM_addStyle
  16. // @run-at document-end
  17. // @noframes
  18. // @description Generate reference link in all kinds of markup languages like html, markdown etc and copy to system clipboard.
  19. // ==/UserScript==
  20.  
  21. /*
  22. Tampermonkey reference -> https://tampermonkey.net/documentation.php
  23.  
  24. 1. @noframes tag will prevent this script run inside iframe
  25. 2. GM_log is not very user friendly, use console.log instead
  26. See:console.log is not working when used in a Firefox, Greasemonkey script - Stack Overflow ->
  27. https://stackoverflow.com/questions/10135241/console-log-is-not-working-when-used-in-a-firefox-greasemonkey-script
  28. */
  29.  
  30.  
  31. /*
  32. Add rlg-panel styles
  33. https://stackoverflow.com/a/707580/2709868
  34. Just some basic style, mostly the panel style will inherit from current page.
  35. */
  36. var style =
  37. "#rlg-panel {display:inline-block;position:fixed;top:10%;left:0;\
  38. z-index:2147483647;background:#111;color:#fff;overflow:hidden;}\
  39. #rlg-panel input{color:#111;margin:2px 8px 2px 8px;border-width:2px;border-color:#32cd32}\
  40. #rlg-panel a{color:#fff;font-size:14px;text-decoration:none;\
  41. border-style:solid;border-width:1px;border-color:#32cd32}\
  42. #rlg-panel div{white-space:nowrap;margin:2px 10px 2px 10px;}"; // CSS to be added
  43. GM_addStyle(style);
  44. rlg_log("rlg-panel css loaded");
  45.  
  46. /*
  47. Retrieve page url and page title
  48. Page title is automatically acquired following order as such:
  49. 1. <title> tag content if exists
  50. 2. first <h1> tag content if exists
  51. 3. page url
  52. */
  53. var page_url = window.location.href; // Obtain absolute URL of current page
  54. rlg_log('page_url => ' + page_url);
  55.  
  56. var page_title;
  57. try {
  58. var tag_content_title = document.getElementsByTagName('title')[0].innerHTML;
  59. } catch(err) {
  60. rlg_log("Fail to retrieve content of tag <title>: " + err.message);
  61. }
  62. rlg_log('tag_content_title=> ' + tag_content_title);
  63. try {
  64. var tag_content_first_h1 = document.getElementsByTagName('h1')[0].innerHTML;
  65. } catch(err) {
  66. rlg_log("Fail to retrieve content of tag <h1>: " + err.message);
  67. }
  68. rlg_log('tag_content_first_h1=> ' + tag_content_first_h1);
  69. if (tag_content_title) { // tag_content_title exists and not null or undefined
  70. page_title = tag_content_title;
  71. } else if ( tag_content_first_h1) { // tag_content_first_h1 exists and not null or undefined
  72. page_title = tag_content_first_h1;
  73. } else {
  74. page_title = page_url;
  75. }
  76. rlg_log('page_title=> ' + page_title);
  77.  
  78.  
  79. /*
  80. Markup language settings
  81. Users may add their own markup language settings here
  82. */
  83. var markup = [ // Specific names for different kinds of markup languages
  84. { // html
  85. button_name: "HTML",
  86. base_id: "rlg-html",
  87. makelink: function(page_title, page_url) {
  88. return '<a href="' + page_url + '">' + page_title + '<\/a>';
  89. }
  90. },
  91. { // markdown
  92. button_name: "Markdown",
  93. base_id: "rlg-markdown",
  94. makelink: function(page_title, page_url) {
  95. return '[' + page_title + "](" + page_url + ' "")';
  96. }
  97. },
  98. { // reStructured Text
  99. button_name: "reST",
  100. base_id: "rlg-rest",
  101. makelink: function(page_title, page_url) {
  102. return '`' + page_title + ' <' + page_url + '>`_';
  103. }
  104. },
  105. { // Org-mode
  106. button_name: "Orgmode",
  107. base_id: "rlg-orgmode",
  108. makelink: function(page_title, page_url) {
  109. return '[[' + page_url + '][' + page_title + ']]';
  110. }
  111. },
  112. { // LaTeX
  113. button_name: "LaTeX",
  114. base_id: "rlg-latex",
  115. makelink: function(page_title, page_url) {
  116. return '\\href{' + page_url + '}{' + page_title + '}';
  117. }
  118. },
  119. {
  120. // Plain Text
  121. button_name: "Plain Text",
  122. base_id: "rlg-text",
  123. makelink: function(page_title, page_url) {
  124. return page_title + ' -> ' + page_url;
  125. }
  126. }
  127. ];
  128.  
  129. // Auto-hide panel for generated texts and buttons
  130. // https://stackoverflow.com/questions/4811807/hidden-sidebar-that-shows-up-on-hover
  131. // here 20em is a magic number, I don't know how to make the width of
  132. // the rlg panel automatically fit to the content width
  133. $(function(){
  134. $('#rlg-panel').hover(
  135. function(){$(this).animate({width:'20em'},500);},
  136. function(){$(this).animate({width:'2px'},500);}
  137. ).trigger('mouseleave');
  138. }
  139. );
  140.  
  141. function regenerate() { // onclick function for button "rlg-regenerate-button"
  142. var page_title = document.getElementById("rlg-title-input").value;
  143. rlg_log('regenerate page title :' + page_title);
  144. var page_url = window.location.href;
  145. rlg_log('regenerate page url :' + page_url);
  146. var id_tmp;
  147. for (var i=0; i<markup.length; ++i) {
  148. id_tmp=markup[i].base_id;
  149. rlg_log('regenerate link text of ' + id_tmp);
  150. document.getElementById(id_tmp+'-input').value=markup[i].makelink(page_title, page_url);
  151. rlg_log('link text of ' + id_tmp + ' has been modified');
  152. }
  153. }
  154.  
  155. function copy_to_system_clipboard(this_id) { // onclick function for buttons "rlg-[markup]-button"
  156. // https://stackoverflow.com/a/30810322/2709868
  157. // Copy textarea or input text to system clipboard with one click
  158. // See:https://stackoverflow.com/a/30810322/2709868
  159. // Seems IE and chrome support document.execCommand('copy')
  160. // Firefox doesn't support it and Safari not tested yet.
  161. rlg_log(this_id);
  162. var text_input = document.getElementById(this_id.replace('-button', '') + '-input');
  163. rlg_log(this_id.replace('-button', '') + '-input');
  164. text_input.select();
  165. var hint_div = document.getElementById('rlg-hint');
  166. try {
  167. var successful = document.execCommand('copy'); // TODO Is GM_setClipboard() more compatible?
  168. var msg = successful ? 'successful' : 'unsuccessful';
  169. hint_div.setAttribute('style', 'color:lightgreen');
  170. var markup_tmp = this_id.replace('-button', '').replace('rlg-', '');
  171. hint_div.innerHTML = 'Copying generated ' + markup_tmp + ' link text to system clipboard was ' + msg;
  172. } catch (err) {
  173. hint_div.setAttribute('style', 'color:red');
  174. hint_div.innerHTML = "Copying to system clipboard is not supported by your browser, you can copy it manually";
  175. }
  176. }
  177.  
  178. function rlg_log(log_text) {
  179. console.log('RefLinkGenerator LOG: ' + log_text);
  180. }
  181.  
  182.  
  183. /*
  184. Append rlg-panel div element into document.body
  185. */
  186. var div_rlg_panel = document.createElement("div");
  187. div_rlg_panel.id = "rlg-panel";
  188. rlg_log("create div rlg-panel succeed");
  189.  
  190. // rlg-regenerate
  191. var input_regenerate_1 = document.createElement("input");
  192. input_regenerate_1.type = "text";
  193. input_regenerate_1.id = "rlg-title-input";
  194. input_regenerate_1.value = page_title;
  195. var label_regenerate_1 = document.createElement("label");
  196. label_regenerate_1.appendChild(input_regenerate_1);
  197.  
  198. var input_regenerate_2 = document.createElement("input");
  199. input_regenerate_2.type = "button";
  200. input_regenerate_2.id = "rlg-regenerate-button";
  201. input_regenerate_2.value = "Regenerate";
  202. input_regenerate_2.addEventListener("click", regenerate);
  203. var label_regenerate_2 = document.createElement("label");
  204. label_regenerate_2.appendChild(input_regenerate_2);
  205.  
  206. var div_rlg_regenerate = document.createElement("div");
  207. div_rlg_regenerate.id = "rlg-regenerate";
  208. div_rlg_regenerate.appendChild(label_regenerate_1);
  209. div_rlg_regenerate.appendChild(label_regenerate_2);
  210. div_rlg_panel.appendChild(div_rlg_regenerate);
  211. rlg_log("create div rlg-regenerate succeed");
  212.  
  213. // rlg-[markup]-button and rlg-[markup]-input
  214. for (var j=0; j<markup.length; ++j) {
  215. var div_markup = document.createElement("div");
  216. var label_1 = document.createElement("label");
  217. var label_2 = document.createElement("label");
  218. var input_1 = document.createElement("input");
  219. var input_2 = document.createElement("input");
  220. input_1.type = "text";
  221. input_1.id = markup[j].base_id + "-input";
  222. input_1.value = markup[j].makelink(page_title, page_url);
  223. label_1.appendChild(input_1);
  224. input_2.type = "button";
  225. input_2.id = markup[j].base_id + "-button";
  226. input_2.value = markup[j].button_name;
  227. // Important stuff about addEventListener:
  228. // http://www.w3schools.com/js/js_htmldom_eventlistener.asp
  229. // http://commons.oreilly.com/wiki/index.php/Greasemonkey_Hacks/Getting_Started#Avoid_Common_Pitfalls
  230. input_2.addEventListener("click", function() {copy_to_system_clipboard(this.id);});
  231. label_2.appendChild(input_2);
  232. div_markup.appendChild(label_1);
  233. div_markup.appendChild(label_2);
  234. div_rlg_panel.appendChild(div_markup);
  235. rlg_log(markup[j].button_name + " appended");
  236. }
  237.  
  238. // rlg-hint
  239. var div_rlg_hint = document.createElement("div");
  240. div_rlg_hint.id = "rlg-hint";
  241. div_rlg_panel.appendChild(div_rlg_hint);
  242.  
  243. document.body.appendChild(div_rlg_panel);