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

简介

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

常见脚本管理器

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

我们这里主要介绍Tampermonkey

官方文档 : Tampermonkey 的文档

开发环境

  1. 本文基于chrome浏览器
  2. 安装扩展tempermonkey
  3. 将文本编辑器设为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来编辑脚本

设置方法

  1. 打开油猴扩展设置,勾选允许访问文件网址的选项
  2. 添加元素据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 不行

可行的方法有两种

  1. 老办法:用 JS 往插入 CSS 的
  2. 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 = `
标题

这是一段描述

`
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')}`;
    });
})();

你可能感兴趣的:(html,css,前端)