油猴JS CODE是为Tampermonkey等用户脚本管理器编写的JavaScript代码，通过在特定网页环境下运行，实现对页面元素的修改、功能的扩展或操作的自动化，它能帮助用户屏蔽广告、定制界面、优化交互体验，甚至实现数据抓取与处理等个性化需求，代码通常包含元数据（如脚本名称、匹配规则）和核心逻辑，利用DOM操作、事件监听等技术，灵活适配不同网页，是提升浏览器使用效率的重要工具。
油猴脚本 (Tampermonkey)：解锁网页潜能的浏览器魔法
在互联网的日常冲浪中,你是否曾遭遇这样的窘境：想下载视频却找不到直链入口，广告弹窗如影随形地干扰视线，反复填写相同表单令人疲惫不堪，抑或某个网站的界面设计与你惯用的操作习惯格格不入？我们要聊的“油猴脚本 (Tampermonkey)”，正是解决这些痛点的“浏览器魔法”，它让普通用户也能通过编写简单的 JavaScript 代码，深度定制网页功能，突破平台限制，将你的浏览器真正打造成“个人专属工具箱”。
什么是油猴脚本？
要理解“油猴脚本”，需先从“油猴 (Tampermonkey)”这款浏览器扩展说起，它是一款风靡全球的浏览器扩展（支持 Chrome, Firefox, Edge, Safari 等主流浏览器），其核心功能在于“管理用户脚本”，而“脚本 (UserScript)”，正是使用 JavaScript 语言编写的一段代码——它能够安全地注入到目标网页中，从而修改网页的行为或样式。
油猴是“舞台”，脚本则是“演员”：油猴负责将脚本安全、有序地加载到目标网页的运行环境中；而脚本则通过操作网页的 DOM（文档对象模型）、发送网络请求、修改 CSS 样式等方式，实现“改造网页”的神奇效果，你可以用脚本让视频网站自动跳过片头广告，让购物网站显示商品的历史最低价，让网盘工具支持批量下载……这些功能，原本往往依赖于网站开发者的实现，但通过油猴脚本，普通用户也能“自己动手，丰衣足食”，实现个性化需求。
油猴脚本的核心能力：从“被动浏览”到“主动掌控”
油猴脚本的强大,源于它赋予用户对网页的“深度控制权”，它能实现以下几类核心功能，将浏览体验从被动接受转变为主动定制：
网页样式与布局改造：让网页“长成你想要的样子”
如果你觉得某个网站的字体太小、按钮设计丑陋，或者广告区域过度遮挡了核心内容，油猴脚本可以通过修改 CSS 样式来“重塑”网页外观，打造更清爽、更符合个人审美的视觉体验。
**示例：隐藏百度搜索页面的右侧广告栏**
```javascript
// ==UserScript==
// @name 百度广告隐藏
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 隐藏百度搜索结果页的广告
// @author You
// @match https://www.baidu.com/*
// @grant none
// ==/UserScript==
(function() { 'use strict'; // 使用开发者工具定位广告元素的 class 或 id const adSelectors = ['.ec_ad_results', '.content-right']; // 可能需要根据实际页面结构调整 adSelectors.forEach(selector => { const adElements = document.querySelectorAll(selector); adElements.forEach(el => { if (el) { // 确保元素存在 el.style.display = 'none'; } }); }); })();
<p>这段代码中，`@match` 指明了脚本生效的网址范围（百度首页），核心逻辑是利用 `document.querySelectorAll` 找到符合选择器（`.ec_ad_results, .content-right`）的元素，然后将其 `style.display` 属性设置为 `'none'`，使其不可见，运行后，百度搜索结果页的右侧广告栏将消失，页面布局更加整洁。**提示：** 网站结构可能随时变化，选择器需要根据实际情况调整。</p>
<h4>功能增强与交互优化：给网页“加装新工具”</h4>
<p>许多网站的功能设计存在不足，例如视频网站缺少自定义倍速选项、网盘不支持批量下载、论坛没有“一键复制所有链接”的便捷功能等，油猴脚本可以通过动态添加按钮、监听用户事件、调用网页内部接口等方式，为现有网页“扩展功能”，弥补其设计缺憾。<br />
**示例：为 B 站视频播放器添加“自定义倍速”按钮**
```javascript
// ==UserScript==
// @name B站自定义倍速
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 为B站视频播放器添加自定义倍速选项
// @author You
// @match https://www.bilibili.com/video/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 定义目标倍速选项
const customSpeeds = [0.5, 1.0, 1.5, 2.0, 3.0];
let currentSpeedIndex = 1; // 默认1.0倍速
// 添加倍速按钮的函数
const addSpeedControls = () => {
const video = document.querySelector('video');
const playerControls = document.querySelector('.bilibili-player-video-btn-panel'); // B站播放器控制面板容器
if (video && playerControls && !document.querySelector('#custom-speed-container')) {
// 创建容器
const container = document.createElement('div');
container.id = 'custom-speed-container';
container.style.cssText = 'display: flex; align-items: center; margin: 0 5px;';
// 添加切换按钮
const toggleBtn = document.createElement('button');
toggleBtn.textContent = `${customSpeeds[currentSpeedIndex]}x`;
toggleBtn.style.cssText = 'padding: 5px 10px; background: #fb7299; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;';
toggleBtn.addEventListener('click', () => {
currentSpeedIndex = (currentSpeedIndex + 1) % customSpeeds.length;
const newSpeed = customSpeeds[currentSpeedIndex];
video.playbackRate = newSpeed;
toggleBtn.textContent = `${newSpeed}x`;
});
container.appendChild(toggleBtn);
playerControls.appendChild(container);
}
};
// 监听页面变化，确保按钮在动态加载后也能添加
const observer = new MutationObserver(addSpeedControls);
observer.observe(document.body, { childList: true, subtree: true });
// 初始尝试添加
addSpeedControls();
})();这段代码会在 B 站视频播放器控制面板区域添加一个自定义倍速按钮，点击按钮，视频播放速度会在预设的倍速选项（0.5x, 1.0x, 1.5x, 2.0x, 3.0x）之间循环切换，它利用 `MutationObserver` 监听页面
