油猴脚本创建教程 油猴自定义脚本编写与调试流程

想让网页按你的想法运行？油猴（tampermonkey）脚本就是你的工具。通过编写自定义脚本，你可以自动执行操作、修改页面内容、屏蔽广告，甚至增强网站功能。下面是一套清晰的油猴脚本创建与调试流程，适合新手快速上手。

一、安装油猴并创建第一个脚本

在开始编写前，先确保你已安装油猴扩展：

• 浏览器推荐使用 Chrome 或 Edge
• 前往应用商店搜索“Tampermonkey”并安装
• 安装完成后，点击浏览器右上角油猴图标
• 选择“创建新脚本”
• 默认会打开一个编辑界面，包含基础元数据和示例代码

删除示例代码中的内容，准备从头写一个干净的脚本。

二、理解脚本结构：元数据块与主逻辑

油猴脚本由两部分组成：顶部的元数据块和下方的JavaScript代码。

// ==UserScript==
// @name         我的第一个脚本
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  尝试修改百度首页
// @author       You
// @match        https://www.baidu.com/*
// @grant        none
// ==/UserScript==

关键字段说明：

• @name：脚本名称，便于识别
• @match：指定脚本在哪些网址运行，支持通配符
• @grant：声明需要的API权限，如需弹窗用 alert，可设为 GM_notification
• @run-at：控制脚本执行时机，如 document-start、document-end

元数据结束后，写入JavaScript代码：

document.addEventListener('DOMContentLoaded', function() {
  document.title = '已被脚本修改';
});

保存后刷新目标页面，查看是否生效。

三、编写实用功能：常见操作示例

以下是一些常用场景的代码片段，可直接参考使用：

创一AI

AI帮你写短视频脚本

153

查看详情

自动点击按钮

// 等待元素出现后再点击
function autoClick(selector) {
  const btn = document.querySelector(selector);
  if (btn) btn.click();
}
autoClick('#submit-btn');

修改页面文字

const el = document.querySelector('h1');
if (el) el.textContent = '新标题：脚本已生效';

注入CSS样式

const style = document.createElement('style');
style.textContent = `
  body { background: #f0f8ff !important; }
  .ad-banner { display: none !important; }
`;
document.head.appendChild(style);

监听页面变化（如SPA页面）

const observer = new MutationObserver(() => {
  console.log('页面结构更新');
  // 在这里执行你的逻辑
});
observer.observe(document.body, { childList: true, subtree: true });

四、调试技巧与常见问题排查

脚本不生效？别急，按步骤排查：

• 确认 @match 规则正确，URL完全匹配
• 打开浏览器开发者工具（F12），查看控制台是否有报错
• 在脚本中加入 console.log('测试') 确认是否执行
• 检查元素是否在 DOM 加载完成之后才存在，必要时使用 setTimeout 或 MutationObserver
• 如果页面使用 iframe，脚本默认不进入，需单独处理

建议开发阶段设置：

• @run-at document-end：确保DOM基本就绪
• 频繁保存后刷新页面测试
• 使用 alert() 或 console.log() 输出调试信息

基本上就这些。掌握结构、理解执行时机、善用调试工具，就能写出稳定可靠的油猴脚本。不复杂但容易忽略细节，多练几次就熟练了。

以上就是油猴脚本创建教程 油猴自定义脚本编写与调试流程的详细内容，更多请关注php中文网其它相关文章！