☰

Copy Markdown-Format Address

Copy current tab title and url, and convert to markdown syntax

  1. // ==UserScript==
  2. // @name         Copy Markdown-Format Address
  3. // @namespace    undefined
  4. // @version      0.2.3
  5. // @description  Copy current tab title and url, and convert to markdown syntax
  6. // @author       https://github.com/Dream4ever
  7. // @require      https://code.jquery.com/jquery-latest.js
  8. // @match        *://*/*
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. // Thanks to https://stackoverflow.com/questions/400212/
  13. // solved the problem of unable to select text
  14. // of none-displayed textarea
  15.  
  16. var rndId = Math.random().toString(36).substring(5);
  17.  
  18. var styles = `
  19.   .common-${rndId} {
  20.     min-height: 0;
  21.     border-radius: 5px;
  22.     border-color: #07c;
  23.     background: rgb(240, 240, 240);
  24.     box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
  25.     position: fixed;
  26.     bottom: 20px;
  27.     right: 100px;
  28.     z-index: 2;
  29.     font-size: 14px;
  30.     font-weight: 400;
  31.     line-height: 1.15;
  32.     color: #000;
  33.   }
  34.  
  35.   .active-${rndId} {
  36.     width: 80px;
  37.     height: 28px;
  38.     padding: 5px 10px;
  39.     opacity: 1;
  40.   }
  41.  
  42.   .unactive-${rndId} {
  43.     width: 10px;
  44.     height: 10px;
  45.     padding: 10px;
  46.     opacity: .2;
  47.   }
  48. `;
  49.  
  50. GM_addStyle(styles);
  51.  
  52. (function () {
  53.   'use strict';
  54.  
  55.   window.onload = function () {
  56.     var nodeButton = document.createElement('button');
  57.     nodeButton.setAttribute('id', rndId);
  58.     nodeButton.setAttribute('class', `common-${rndId} unactive-${rndId}`);
  59.     document.body.appendChild(nodeButton);
  60.  
  61.     var id = '#' + rndId;
  62.     var $btn = $(id);
  63.  
  64.     $btn.hover(function()
  65.     {
  66.       $btn.text('复制');
  67.       $btn.removeClass(`unactive-${rndId}`).addClass(`active-${rndId}`);
  68.       },
  69.     function()
  70.     {
  71.       $btn.text('');
  72.       $btn.removeClass(`active-${rndId}`).addClass(`unactive-${rndId}`);
  73.     });
  74.  
  75.     $btn.on('click', function (event) {
  76.  
  77.       // get title and url
  78.       var title = document.title;
  79.       var url = document.URL;
  80.       var address = '[' + title + '](' + url + ')';
  81.  
  82.       if (copyTextToClipboard(address)) {
  83.           $btn.text('复制成功');
  84.           $btn.css('color', 'green');
  85.           setTimeout(function() {
  86.             $btn.css('color', '#000');
  87.           }, 2000);
  88.       } else {
  89.           $btn.text('复制失败');
  90.           $btn.css('color', 'red');
  91.           setTimeout(function() {
  92.             $btn.css('color', '#000');
  93.           }, 2000);
  94.       }
  95.     });
  96.   };
  97.  
  98. })();
  99.  
  100. function copyTextToClipboard(text) {
  101.   var textArea = document.createElement("textarea");
  102.  
  103.   //
  104.   // *** This styling is an extra step which is likely not required. ***
  105.   //
  106.   // Why is it here? To ensure:
  107.   // 1. the element is able to have focus and selection.
  108.   // 2. if element was to flash render it has minimal visual impact.
  109.   // 3. less flakyness with selection and copying which **might** occur if
  110.   //    the textarea element is not visible.
  111.   //
  112.   // The likelihood is the element won't even render, not even a flash,
  113.   // so some of these are just precautions. However in IE the element
  114.   // is visible whilst the popup box asking the user for permission for
  115.   // the web page to copy to the clipboard.
  116.   //
  117.  
  118.   // Place in top-left corner of screen regardless of scroll position.
  119.   textArea.style.position = 'fixed';
  120.   textArea.style.top = 0;
  121.   textArea.style.left = 0;
  122.  
  123.   // Ensure it has a small width and height. Setting to 1px / 1em
  124.   // doesn't work as this gives a negative w/h on some browsers.
  125.   textArea.style.width = '2em';
  126.   textArea.style.height = '2em';
  127.  
  128.   // We don't need padding, reducing the size if it does flash render.
  129.   textArea.style.padding = 0;
  130.  
  131.   // Clean up any borders.
  132.   textArea.style.border = 'none';
  133.   textArea.style.outline = 'none';
  134.   textArea.style.boxShadow = 'none';
  135.  
  136.   // Avoid flash of white box if rendered for any reason.
  137.   textArea.style.background = 'transparent';
  138.  
  139.   textArea.value = text;
  140.  
  141.   document.body.appendChild(textArea);
  142.  
  143.   textArea.select();
  144.  
  145.   var isOK = false;
  146.  
  147.   try {
  148.     var successful = document.execCommand('copy');
  149.     isOK = !!successful;
  150.   } catch (err) {}
  151.  
  152.   document.body.removeChild(textArea);
  153.  
  154.   return isOK;
  155. }