我的第一个油猴脚本

---

0、油猴官方文档

https://www.tampermonkey.net/documentation.php
主要有：脚本文件头的一些说明；油猴官方接口使用说明。

1、开始编写

1-0 需求

由于一些原因，需要从浏览器中获取到公众号文章的封面链接；以往都是Ctrl + U --> Ctrl + F，然后查找封面链接，步骤较为繁琐。就希望能够写个脚本，能够自动筛选出当前微信文章的封面链接，并在页面中展示（方便复制），或者增加一按钮，点击就可以复制链接。

1-1 文件头

// ==UserScript==
// @name         公众号封面获取
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  简单的公众号封面获取脚本
// @author       pxoxq
// @match        https://mp.weixin.qq.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        GM_setClipboard
// @require      https://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js
// ==/UserScript==

• name：脚本名称
• description：对脚本的简单描述
• author：作者
• match：需要运行脚本的网站地址模板
• icon：脚本图标
• grant：用于将 GM_* 函数、unsafeWindow 对象和一些强大的窗口函数列入白名单。【这里引入了油猴的一个复制到剪切板的接口】
• require：引入一些依赖的 JavaScript 文件。【这里我引入了一个jquery】

1-2 代码

function copyit(data){
   GM_setClipboard(data);
   alert('已复制到剪贴板')
};
(function() {
    'use strict';
    let url = '';
    // 找到页面标题，后续将链接和按钮添加到标题下边
    let top = document.querySelector('.rich_media_title');
    // 获取整个页面代码（简单粗暴）
    let root= document.documentElement.outerHTML
    // 这是文章封面链接的正则表达式
    let ptn = /cdn_url_235_1 = "(.+)"/
    // 匹配，得到结果
    let res = root.match(ptn);
	// 创建一个div标签来存放需要新增到页面的元素
    let show = document.createElement("div");
    show.innerHTML = `<textarea class='f_url' readonly>${res[1]}</textarea>
    <button id='wula'>复 制</button>
    <style>.f_url{
        width:70%;
        padding: 6px;
        height: 3em;
        margin: 10px auto;
        margin-bottom: 0;
        border-radius: 10px;
        border: 2px solid #3BCEB366;
    }#wula{padding: 8px 20px; border: 2px solid #5AD74E44;background: #2CC2D544;}</style>`;
    // 将链接展示块元素，添加到标题下边
    top.appendChild(show);
    // 按钮绑定点击事件
    $('#wula').click(()=>{
    copyit(res[1]);
    })
    // Your code here...
})();

1-3 实现效果