如何编写一个油猴脚本
Posted on Wed, 25 Dec 2024 10:36:10 +0800 by LiangMingJian
什么是油猴（Tampermonkey）
Tampermonkey 是最为流行的用户脚本管理器扩展，它适用于 Chrome，Microsoft Edge，Firefox 等主流浏览器。
用户可以通过 Tampermonkey 为网站编写额外的 javascript 脚本，实现如改变网站样式，隐藏广告，新增按钮等功能。
如何安装油猴（Tampermonkey）
- 前往官网获取， Tampermonkey
- 在各浏览器的扩展商店中搜索 Tampermonkey
编写用户脚本（User Script）
Tampermonkey 的用户脚本主要包括两个部分，开头的元数据单元 ==UserScript== 和用户代码部分 (function(){})。
元数据单元是被 ==UserScript== 包裹的一堆数据，这些数据必须写在用户脚本的开头，是用来向 Tampermonkey 描述脚本信息或加载拓展功能的重要标志。
// ==UserScript==
// @name 编写的脚本名称
// @namespace 命名空间；用来区分名称相同但是作者不同的用户脚本
// @version 0.1；版本号
// @description 功能描述
// @author 作者
// @match 脚本匹配的网址，支持通配符匹配
// @exclude 排除匹配到的网址，优先于 include
// @icon 脚本的图标
// @grant none 禁用沙盒，使脚本直接在上下文运行
// ==/UserScript==
用户代码部分是用户为网页定制的内容，该部分被函数 (function(){ ... })() 所包裹，函数内的内容会在网站加载后立即执行。
用户代码支持 javascript 语法，用户可以像开发网站一样通过 javascript 为网站添加功能，修改界面，改变样式。
(function() {
// Your code here...
})();
一个扩展的示例
为所有网站的右下角添加一个悬浮按钮，点击该悬浮按钮后，可以回到网页顶部。
// ==UserScript==
// @name 回到顶部
// @namespace ——————
// @version 1.0
// @description 在所有网页右下角添加一个悬浮按钮，点击后回到顶部
// @author ——————
// @match *://*/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
// 创建按钮样式
const style = document.createElement('style');
style.innerHTML = `
#floating-button {
position: fixed;
bottom: 30px;
left: 30px;
width: 50px;
height: 50px;
background-color: #272626;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 10000;
}
#floating-button:hover {
transform: scale(1.1);
background-color: #000000;
}
`;
document.head.appendChild(style);
// 创建按钮元素
const button = document.createElement('div');
button.id = 'floating-button';
button.innerText = '⬆';
button.title = '回到顶部'; // 鼠标悬停提示文字
// 插入到页面中
document.body.appendChild(button);
// 添加点击事件
button.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
})();
拓展阅读：新版本浏览器的启动问题
在基于 Chrome 的浏览器中使用 Tampermonkey 扩展（版本 5.3+）时，用户必须开启【允许用户脚本】这一选项来让浏览器正确加载扩展。
以 Edge 为例，打开 chrome://extensions 或 edge://extensions，启用开发者模式的同时，点击拓展的详细信息，启用允许用户脚本。
————————————