一键复制当前网页markdown链接

需求

平时在网上查询资料或者写文章时，总会把相关的参考网址给记录下来。在markdown中添加网址的格式为 []() ，这样就需要分两步来进行操作：

第一步拷贝当前的网址进行粘贴
第二步拷贝当前的文章标题粘贴或自己整理标题

要说这样使用一两次还好，但要是经常操作的话，这样的流程就是非常的耗费时间了。

后来觉得太麻烦，就自己用js写了一个获取当前markdown格式的js脚本，作为一个网页标签来使用，每次使用时点击一下这个标签即可：

javascript:(function(){eval(function(d,f,a,c,b,e){b=function(a){return a.toString(f)};if(!"".replace(/^/,String)){for(;a--;)e[b(a)]=c[a]||b(a);c=[function(a){return e[a]}];b=function(){return"\\w+"};a=1}for(;a--;)c[a]&&(d=d.replace(new RegExp("\\b"+b(a)+"\\b","g"),c[a]));return d}("9 i=0.c('d');0.e.f(i);i.6('7','['+0.8+']('+0.5+')');i.a();b(0.1('2')){0.1('2');3.4('g')}h{3.4('j')}",20,20,"document execCommand copy console log URL setAttribute value title var select if createElement input body appendChild Success else  Failed".split(" "),0,{}));})();

实现

但有时候也会遇到特殊情况。

上面的代码获取某些网页的链接时，并不能正常获取到标题，导致最后只有一段网址。那这个时候就只能自己再手动的去处理一番。

偶然间看到通过 油猴脚本 来美化CSDN网页样式的一篇文章，感觉可以通过它来实现我 一键复制 当前网址的需求。

特意在 Greasy Fork 搜了一下，找到了一款相关功能的插件 https://greasyfork.org/zh-CN/scripts/443317-via-%E5%A4%8D%E5%88%B6markdown%E9%93%BE%E6%8E%A5

但我在使用过程中发现这个样式挺不好操作的，所以就把它的源码拿过来优化了一下。相应的脚本内容如下：

// ==UserScript==
// @name        获取网页markdown链接
// @namespace   https://github.com/leafney
// @version     0.3
// @description 点击按钮，获取markdown格式的链接
// @author      leafney
// @license     MIT
// @match       *://*/*
// ==/UserScript==

(function () {
  'use strict';

  // Your code here...
  function _appendCss(css, name) {
    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.setAttribute("data-component", name);
    style.innerHTML = css;
    head.appendChild(style);
  }
  function addStyle() {
    //debugger;
    let layui_css = `.layui-btn{display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; border: 1px solid transparent; padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border-radius: 20px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}.layui-btn-sm{height: 30px; line-height: 28px; padding: 0 8px; font-size: 14px;}`;
    _appendCss(layui_css, "btn");
  }
  //创建复制按钮
  function addBtn() {
    var btn = document.createElement('button');
    btn.style = "top:30%; right:20px; position: fixed;z-index:1000;cursor:pointer;background:green;"
    btn.className = "layui-btn layui-btn-sm"
    btn.innerHTML = "复制"
    btn.id = "copyBtn"
    document.body.appendChild(btn);
  }
  // 仅对当前页有效，排除iframe页面
  if(self==top){
    addStyle();
    addBtn();
    let isclick = false; // 防止过快重复点击
    var $btn = document.getElementById("copyBtn")
    $btn.addEventListener("click", function () {
      if (!isclick) {
        var text = `- [${document.title}](${document.URL})`
        console.log("copy=> " + text);
        let oInput = document.createElement("input");
        oInput.value = text;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = "oInput";
        oInput.style.display = "none";
        $btn.style.background = "red";
        $btn.innerHTML = "复制成功";
        setTimeout(() => {
          $btn.style.background = "green";
          $btn.innerHTML = "复制";
        }, 3000);
        isclick = true;
        setTimeout(() => {
          isclick = false;
        }, 3000);
      }
    });
  }
})();