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

原创

喵喵侠

发布于 2024-08-03 23:35:48

1480

发布于 2024-08-03 23:35:48

前言

你好，我是喵喵侠。在日常浏览网页和编写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，直接安装我发布的脚本：

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

脚本解读

头部的区域，@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链接的复制。