目录
前言
你好，我是喵喵侠。在日常浏览网页和编写Markdown文档时，我们常常需要将网页链接插入到Markdown文档中，并附上网页的标题。然而，手动复制链接和标题不仅耗时，而且容易出错。为了解决这个问题，我们可以编写一个油猴脚本（Tampermonkey Script），自动生成带网页标题的Markdown格式链接。本文将详细介绍如何实现这一功能。
什么是油猴脚本？
油猴脚本（Tampermonkey Script）是一个用户脚本管理器，可以在用户浏览网页时执行自定义的JavaScript代码。通过油猴脚本，我们可以轻松地修改网页内容、添加新功能或自动化一些重复性的操作。
为什么要使用油猴脚本？
- 自动化：自动获取网页标题和链接，生成Markdown格式的链接。
- 提高效率：减少手动操作，提高文档编写效率。
- 减少错误：避免手动复制粘贴时可能出现的错误。
如何编写油猴脚本？
以下是编写油猴脚本的步骤和示例代码。
安装Tampermonkey插件
首先，你需要在浏览器中安装Tampermonkey插件。可以在Chrome Web Store中找到Tampermonkey并安装。
安装油猴脚本
安装Tampermonkey插件后，点击浏览器工具栏中的Tampermonkey图标，选择“创建新脚本”，然后在编辑器中输入以下代码：
// ==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('input'); copyInput.type = 'text'; document.body.appendChild(copyInput); copyInput.value = text; copyInput.select(); const result = document.execCommand('Copy'); document.body.removeChild(copyInput); return result; } copyText(getMdToUrl(document.title, document.URL)); })();
或者你可以直接去Greasy Fork，直接安装我发布的脚本：
脚本解读
头部的区域，@name就是这个脚本的名字。@author是作者，@version是版本号，@description是对于这个脚本的描述。这些都好说，看英文含义就能快速理解。
// ==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也没关系，我这里简单过一下：
(function () { 'use strict'; // Your code here... function getMdToUrl(title, url) { return `[${title}](${url})`; } function copyText(text) { let copyInput = document.createElement('input'); copyInput.type = 'text'; document.body.appendChild(copyInput); copyInput.value = text; copyInput.select(); const result = document.execCommand('Copy'); 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格式链接，并复制到剪贴板。
举个例子，比方说你在阿里云开发者社区首页，点击这个选项，复制的结果就如下：
[阿里云开发者社区-云计算社区-阿里云](https://developer.aliyun.com/)
总结
通过编写油猴脚本，可以自动生成带网页标题的Markdown格式链接，极大地提高了编写文档的效率。希望本文能帮助你更好地利用油猴脚本来优化工作流程。如果你有任何问题或建议，欢迎与我交流。
