油猴脚本：markdown生成带网页标题的链接

前言

你好，我是喵喵侠。在日常浏览网页和编写Markdown文档时，我们常常需要将网页链接插入到Markdown文档中，并附上网页的标题。然而，手动复制链接和标题不仅耗时，而且容易出错。为了解决这个问题，我们可以编写一个油猴脚本（Tampermonkey Script），自动生成带网页标题的Markdown格式链接。本文将详细介绍如何实现这一功能。

什么是油猴脚本？

油猴脚本（Tampermonkey Script）是一个用户脚本管理器，可以在用户浏览网页时执行自定义的JavaScript代码。通过油猴脚本，我们可以轻松地修改网页内容、添加新功能或自动化一些重复性的操作。

为什么要使用油猴脚本？

自动化：自动获取网页标题和链接，生成Markdown格式的链接。
提高效率：减少手动操作，提高文档编写效率。
减少错误：避免手动复制粘贴时可能出现的错误。

如何编写油猴脚本？

以下是编写油猴脚本的步骤和示例代码。

安装Tampermonkey插件

首先，你需要在浏览器中安装Tampermonkey插件。可以在Chrome Web Store中找到Tampermonkey并安装。

安装油猴脚本

安装Tampermonkey插件后，点击浏览器工具栏中的Tampermonkey图标，选择“创建新脚本”，然后在编辑器中输入以下代码：

代码语言：javascript

复制

// ==UserScript==
// @name         markdown生成带网页标题的链接
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  try to take over the world!
// @author       Cooper
// @match        *://*/*
// @grant        none
// @run-at       context-menu
// ==/UserScript==
(function () {

'use strict';
// Your code here...
function getMdToUrl(title, url) {
    return `[${title}](${url})`;
}
function copyText(text) {
    let copyInput = document.createElement(&#39;input&#39;);
    copyInput.type = &#39;text&#39;;
    document.body.appendChild(copyInput);
    copyInput.value = text;
    copyInput.select();
    const result = document.execCommand(&#39;Copy&#39;);
    document.body.removeChild(copyInput);
    return result;
}
copyText(getMdToUrl(document.title, document.URL));

})();

或者你可以直接去Greasy Fork，直接安装我发布的脚本：

markdown生成带网页标题的链接 - 源代码

脚本解读

头部的区域，@name就是这个脚本的名字。@author是作者，@version是版本号，@description是对于这个脚本的描述。这些都好说，看英文含义就能快速理解。

代码语言：bash

复制

// ==UserScript==

// @name         markdown生成带网页标题的链接

// @namespace    http://tampermonkey.net/

// @version      0.2

// @description  try to take over the world!

// @author       Cooper

// @match        *://*/*

// @grant        none

// @run-at       context-menu

// ==/UserScript==

需要特别理解的是，@match代表你当前脚本作用的网站，我写的*://*/* 这个正则，就表示匹配与任意的网站，不论是什么协议，什么域名，都可以起作用。

@grant我设置的none，可以暂时不用管它。

@run-at这个很关键，就是你的脚本的运行方式，我这里写的context-menu，代表的是右键运行。

下面的函数部分，如果你的JavaScript基础还不错，应该也能快速理解，只会一点点JavaScript也没关系，我这里简单过一下：

代码语言：bash

复制

(function () {

'use strict';
// Your code here...
function getMdToUrl(title, url) {
    return `[${title}](${url})`;
}
function copyText(text) {
    let copyInput = document.createElement(&#39;input&#39;);
    copyInput.type = &#39;text&#39;;
    document.body.appendChild(copyInput);
    copyInput.value = text;
    copyInput.select();
    const result = document.execCommand(&#39;Copy&#39;);
    document.body.removeChild(copyInput);
    return result;
}
copyText(getMdToUrl(document.title, document.URL));

})();

外面的IIFE，你可以当做是一个固定的写法，以后油猴脚本都这么写。

getMdToUrl这个函数做的事情就是，传入两个参数，分别是网页标题和网页链接，返回的是一个Markdown格式的URL。

copyText这里面取了一个巧，那就是在页面上生成一个input的DOM元素，对这个input进行赋值后，立马用select方法来选中这个值，紧接着执行浏览器复制操作，这样URL的结果就被写入了剪切板中。当所有的操作完成后，立马从document上移除这个节点。这个执行过程非常快，以至于你看不到这个input在页面上出现过。

两个方法的结合，加上右键菜单的触发，就实现了当前网页Markdown链接的复制。

运行脚本

保存并激活脚本后，打开任意网页，在空白处右键，你会在菜单中看到这个脚本的名字“markdown生成带网页标题的链接”的选项。点击这个选项，会自动生成当前网页的Markdown格式链接，并复制到剪贴板。

举个例子，比方说你在腾讯云开发者社区首页，点击这个选项，复制的结果就如下：

腾讯云开发者社区-腾讯云

总结

通过编写油猴脚本，可以自动生成带网页标题的Markdown格式链接，极大地提高了编写文档的效率。希望本文能帮助你更好地利用油猴脚本来优化工作流程。如果你有任何问题或建议，欢迎与我交流。