油猴脚本开发,之如何添加html和css

简介

油猴是一个脚本管理器,让我们能够方便的使用js脚本，以实现对页面内容的修改、功能增强或其他定制化操作。

常见脚本管理器

Tampermonkey
应该是各位见得最多的也是最知名的，好用又稳定，多浏览器支持
Greasemonkey
用户脚本始祖，我们一直所说的油猴是指这个,不过支持吃firefox
Violentmonkey
由国人开发的一款脚本管理器，可以直接匹配当前站点搜索脚本

我们这里主要介绍Tampermonkey

官方文档 : Tampermonkey 的文档

开发环境

本文基于chrome浏览器
安装扩展tempermonkey
将文本编辑器设为vscode(可以require处看到设置方法,不着急)

文件结构

打开油猴,添加新脚本,就会得到如下界面

上面注释部分称之为元数据,由油猴脚本管理器解析,后面就跟我们自己的js代码了

后面就介绍一下元数据的作用和js实现简单功能

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2023-12-29
// @description  try to take over the world!
// @author       You
// @match        https://www.tampermonkey.net/documentation.php
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

元数据

本质就是油猴的一些配置选项

match

即用来匹配网址,如下,可以使用正则匹配

// @match https://www.baidu.com/

require

指定依赖的其他脚本,可以使用本地文件url,从而实现使用vscode来编辑脚本

设置方法

打开油猴扩展设置,勾选允许访问文件网址的选项
添加元素据require依赖本地脚本路径,如下

// @require file://D:\code\html\js\tempermonkey.js

grant

油猴提供了很多强大的 API，我们可以通过grant方便的使用他们

若你不打算使用这些 API，应当声明 @grant none

以下是一个简单的表格，帮助你了解油猴的 API 大概能做哪些事情

| 说明 |
| ---------------------- | ------------------------------------------------------------ |
| GM.info | 返回当前脚本的元数据 |
| GM_addStyle | 为网页添加 CSS |
| GM.setValue | 在本地储存值（只能是字符串），你可以将这个储存看作是 localStorage 一样的东西 |
| GM.getValue | 获取使用储存的值 |
| GM.deleteValue | 删除储存的值 |
| GM.listValues | 返回一个由所有储存值的键名组成的数组 |
| GM_getResourceText | 获取元数据中定义的 @resource 的资源内容 |
| GM.getResourceUrl | 获取元数据中定义的 @resource 资源的 URL（base64 编码后的data:协议地址） |
| GM.openInTab | 新标签页打开指定地址（用来绕过 Chrome 会阻止所有非用户触发的window.open的限制） |
| GM_registerMenuCommand | 向油猴插件菜单中添加脚本指令（通常用于打开自己写的设置界面或者执行代码之类的） |
| GM.setClipboard | 复制指定内容到剪贴板 |
| GM.xmlHttpRequest | 发送网络请求，且允许跨域 |
| GM.notification | 浏览器通知 |

unsafeWindow

如果你在写脚本的时候有尝试直接通过 window 添加或访问网页全局变量，你会发现这是没有效果的

这是因为油猴的沙箱机制，任何人都无法从 window 直接访问到油猴的 API 或脚本内的变量，保证了安全

如果你确实需要访问 window，可以使用 unsafeWindow，但在正式发布的脚本中你不应该将任何油猴 API 或者脚本中的变量通过它暴露到 window 中

引用 CSS

引用 JS 可以采用@require，但 CSS 不行

可行的方法有两种

老办法：用 JS 往<head>插入 CSS 的<link>
API 方法：在元数据中声明// @resource mycss <地址>，然后GM_addStyle(GM_getResourceText('mycss'));
别忘了用到的这两个 API 也要@grant声明

常见元数据

@name：脚本的名称
@namespace：脚本的命名空间，通常是一个URL，一般写作者个人网址
@version：脚本的版本号
@description：脚本的描述
@author：脚本的作者
@match：脚本的匹配模式，用于指定脚本要运行的页面URL。它可以使用通配符、正则表达式或具体的URL等多种方式来匹配URL。
@grant：脚本的授权级别，用于指定脚本是否需要访问浏览器的某些特殊权限，例如访问页面的cookie或执行跨域请求等。它可以设置为none、unsafeWindow、GM、GM_setValue等多种级别。
@run-at：脚本运行的时机，用于指定脚本是在文档加载之前、文档加载时或文档加载之后运行。它可以设置为document-start、document-body、document-idle或context-menu等选项。
@noframes：指定脚本是否在框架页面中运行。设置为true时表示脚本不在框架页面中运行，默认为false。
@require：指定脚本依赖的其他脚本。它可以使用多个URL来引入其他脚本，并指定它们的执行顺序。
@resource：指定脚本中使用的资源文件，例如图片、样式表、字体等。
@connect：指定脚本是否允许跨域请求。
@include：同@match，用于指定脚本要运行的页面URL。

添加html结构

匹配网站

// @match https://www.lipsum.com/

添加的代码

// 快速创建复杂 HTML 结构
function createHTML() {
    // 获取百度首页 logo 
    let logo = document.querySelector("#lg")
    // 创建一个自己的结构
    let example = document.createElement("div")
    // 给 example 这个 div 设置类名
    example.classList.add("wrap")
    example.innerHTML = `<div class="h1">标题</div>
                            <p class="des">这是一段描述</p>`
    logo.appendChild(example)

}

(function () {
    'use strict';
    console.log("learn_style")
    createHTML()
})();

添加css

添加权限

// @grant        GM_addStyle

脚本

// 这里是创建 HTML 的代码，参考上一节
function createHTML() {...}

// 添加 css 样式
function addStyle() {
    let css = `
    .wrap{
        padding: 5px
    }
    
    .h1{
        font-size: 25px;
        color: green;
    }
    
    .des{
        font-size: 20px;
        color: red;
    }
    `

    GM_addStyle(css)
}


(function () {
    'use strict';
    console.log("learn_style")
    createHTML()
    addStyle()
})();

优秀脚手架

https://github.com/kinyaying/wokoo

https://www.npmjs.com/package/create-tampermonkey

https://github.com/qianjiachun/vue3-tampermonkey

实战

下面的脚本是很久之前的了,所以可能不生效,所以仅供参考

// ==UserScript==
// @name         mix learn
// @version      1
// @description  Replace rate value with 16 in specific div element
// @author       Your Name
// @match        *://*.wenku.baidu.com/*
// @match        *://*.zhihuishu.com/*
// @match        https://blog.csdn.net/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

//百度文库vip,重定义函数实现直接修改pageData会失败
//需要@run-at       document-start,提前修改
//pagedata一般在script中
(function () {
    let data;
    Object.defineProperty(window, 'pageData', {
        set: v => data = v,
        get() { 'vipInfo' in data ? data.vipInfo.isVip = 1 : ''; return data; }
    })
})();

//csdn
(function() {
    //去除登录键
    'use strict';
    const loginButton = document.querySelector('.toolbar-btn-loginfun');
    if (loginButton) {
        loginButton.remove();
    }
    //将代码块设置为可编辑
    const codeBlocks = document.querySelectorAll('.code-box .notranslate, pre');
    codeBlocks.forEach(function(codeBlock) {
        codeBlock.setAttribute('contenteditable', 'true');
    });
})();

//智慧树
(function() {
    'use strict';
    var targetDivs = document.querySelector('div.speedTab');
    targetDivs.forEach(function(targetDiv) {
        targetDiv.setAttribute('rate', '16');
        targetDiv.textContent = `X ${targetDiv.getAttribute('rate')}`;
    });
})();