如何编写油猴(tampermonkey)插件 |
您所在的位置：网站首页 › 插件油猴Tampermonkey › 如何编写油猴(tampermonkey)插件 |
如何编写油猴(tampermonkey)插件
|
油猴插件是一个非常流行的浏览器插件，用于管理用户脚本（UserScript）。用户脚本是小型 JavaScript 程序，可用于向网页添加新功能或修改现有功能。常见的使用场景有调整网页样式、下载视频、图片、解析网盘资源、屏蔽广告等等。 油猴有多个版本：Greasemonkey、tampermonkey、violentmonkey等，本文只讨论tampermonkey插件。该插件支持多种浏览器，如Chrome、Firefox、Edge等。用户在安装插件后，可以从社区网站Greasy Fork来检索到自己需要的脚本。在使用社区脚本时需要注意安全问题，不要下载和安装来源不明的脚本，以免受到恶意脚本的攻击。 本文侧重于介绍如何编写一个油猴脚本。油猴的核心工作原理是向网页注入一段用户自定义的JavaScript脚本，所以编写油猴插件的核心就是编写这些脚本。 Step1. 前置准备：安装浏览器插件以edge浏览器为例，进入edge扩展商店，搜索tampermonkey，进入到扩展主页点击安装即可。  tampermonkey扩展主页Step2. 编写脚本：hello world点击Tampermonkey扩展图片，点击添加新脚本，会弹窗一个编辑页面，在此页面编写代码即可。  在初始代码中我们能够看到一些 @xxx 的注释，这些是指令代码，具体作用可以参考下表。当然了，最好还是要去查看Tampermonkey官方文档。 字段含义@name脚本的名称，如上图中的“插件示例”@namespace脚本的命名空间@version脚本的版本号，用于检测是否需要更新脚本@description简介扼要的功能介绍@author脚本的作者名@match定义脚本可以在哪些网页上运行，匹配模式为// @match ://protocol为协议，domain为域名，path为页面路径，可以使用绝对值，也可以使用 * 实现模糊匹配，举例如下// @match http://*/foo*// @match http*://http://xx.com/foo*bar @icon脚本的图标@grant用于添加 GM_* 和 GM.* 方法的白名单@require用于加载js资源文件，用户脚本会在资源加载完成后执行举例// @require https://code.jquery.com/jquery-2.1.4.min.js先写一个hello world, 进入到任何页面都会弹出提示“hello world!” // ==UserScript== // @name hello world! // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match http*://*/* // @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== // @grant none // ==/UserScript== (function () { 'use strict'; // 当页面加载完成后再执行脚本，避免脚本重复执行，多次弹窗 document.onreadystatechange = function () { if (document.readyState === "complete") { alert("hello world!"); } } })(); hello worldStep3: 编写入门插件：修改页面元素编写脚本时需要注意：了解目标网站的结构和元素，以便能够正确地解析和操作他们。目标：在标题《豆瓣图书标签：小说》下，添加蓝色框图中的图书信息表格；首先展示一个菜单按钮“查看表格数据”，点击后解析页面数据渲染出表格元素。  要实现上面的目标，我们可以把需求拆分为两部分：数据解析和页面修改，下面分别介绍如何实现。 数据解析通过观察网页，可以看到页面上已经渲染出图书标题、作者、出版社等信息，只是当前是按照条目单独展示的，而不是我们需要的表格形式。 打开控制台，我们能够看到每个图书条目是按照如下的数据结构组织的， // 图书条目1 // 图书条目2 // ...所以可以通过以下的方式遍历条目列表 let bookList = []; let nodeList = document.querySelectorAll("li.subject-item"); nodeList.forEach(node => { // 解析条目信息 bookList.push(条目信息); })每个图书条目的数据结构如下，标题内容可以直接访问a元素的文本内容来获取，而作者、出版社等信息是在同一个div元素中，只能通过正则表达式来进行解析。 长安的荔枝 马伯庸 / 湖南文艺出版社 / 2022-10 / 45.00元 // ...解析图书条目属性的代码如下 // let node = document.querySelectorAll("li.subject-item")[0] let title = node.querySelector("div.info h2 a").innerText.trim(); let pubInfo = node.querySelector("div.info div.pub").textContent.trim(); // 出版社字段原文内容： 马伯庸 / 湖南文艺出版社 / 2022-10 / 45.00元 const regexpSize = /^(.+)\/(.+?)\/(.+?)\/(.+?)$/; const match = pubInfo.match(regexpSize); let author = match[1]; let publisher = match[2]; let pubDate = match[3]; let price = match[4]; 页面修改第一步需要在页面标题下添加一个button按钮，并注册click事件：将解析得到的数据渲染为表格的形式，添加在button按钮后。 此步代码略过。 代码汇总// ==UserScript== // @name 豆瓣图书-获取图书信息表格 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://book.douban.com/tag/* // @icon none // @grant none // ==/UserScript== (function () { 'use strict'; document.onreadystatechange = function () { if (document.readyState === "complete") { addMenuBar(); } } // 在标题后添加工具栏按钮，并注册点击事件，点击后触发 showTableData 方法 function addMenuBar() { var previewBtn = document.createElement("button"); previewBtn.setAttribute("type", "button"); previewBtn.setAttribute("id", "preview-button") previewBtn.addEventListener("click", (event) => { showDataTable(); }) previewBtn.append(document.createTextNode("查看表格数据")); var titleNode = document.querySelector("#content h1"); titleNode.parentNode.insertBefore(previewBtn, titleNode.nextSibling); } // 调用 parseBookData，将解析好的数据渲染为表格数据，并插入到工具栏下 function showDataTable() { let titleList = ["书名", "作者", "出版社", "出版日期", "价格"]; let thead = document.createElement("thead"); let row = thead.insertRow(); titleList.forEach(title => { let cell = row.insertCell(); cell.innerText = title; }) let bookList = parseBookData(); var tbody = document.createElement("tbody"); bookList.forEach(book => { let row = tbody.insertRow(); book.forEach(item => { row.insertCell().innerText = item; }) }) var table = document.createElement("table"); table.setAttribute("border", 1); table.appendChild(thead); table.appendChild(tbody); // 将表格添加在 button 元素后 var targetNode = document.querySelector("#preview-button"); console.log("targetNode"); targetNode.parentNode.insertBefore(table, targetNode.nextSibling); } // 解析当前网页的数据数据 function parseBookData() { let bookList = []; let nodeList = document.querySelectorAll("li.subject-item"); nodeList.forEach(node => { // let imgUrl = node.querySelector("div a img").getAttribute('src'); let title = node.querySelector("div.info h2 a").innerText.trim(); let pubInfo = node.querySelector("div.info div.pub").textContent.trim(); // 出版社字段原文内容： 马伯庸 / 湖南文艺出版社 / 2022-10 / 45.00元 const regexpSize = /^(.+)\/(.+?)\/(.+?)\/(.+?)$/; const match = pubInfo.match(regexpSize); let author = match[1]; let publisher = match[2]; let pubDate = match[3]; let price = match[4]; bookList.push([title, author, publisher, pubDate, price]); }) return bookList; } })(); 效果预览 Step4: 编写插件：发起网络请求待更新 Step5: 编写插件：下载文件待更新 参考资料文档 | Tampermonkey |
【本文地址】