想让网页按你的想法运行？油猴（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() 输出调试信息
基本上就这些。掌握结构、理解执行时机、善用调试工具，就能写出稳定可靠的油猴脚本。不复杂但容易忽略细节，多练几次就熟练了。
以上就是油猴脚本创建教程 油猴自定义脚本编写与调试流程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/572355.html
微信扫一扫 
支付宝扫一扫 
