1. 油猴脚本入门为什么它能成为网页定制神器每次打开那些免费的GPT平替网站满屏的广告弹窗是不是让你头疼不已作为一个长期和网页广告斗智斗勇的老手我发现Tampermonkey油猴简直是浏览器里的瑞士军刀。它不像普通插件那样功能固定而是让你能像黑客一样直接修改网页代码。简单来说油猴就是个能在特定网站自动运行你写的JavaScript代码的工具。比如我发现chat18.aichatos.xyz这个能当GPT用的网站虽然功能不错但侧边栏广告和悬浮窗实在影响体验。这时候油猴脚本就能精准定位这些广告元素像外科手术一样把它们切除干净。最让我惊喜的是它的轻量化——不需要安装一堆广告拦截插件一个脚本就能搞定特定站点的优化。上周我帮同事处理类似问题时他原本电脑上装了三个广告拦截器都没用结果我用20行油猴脚本就解决了问题。这种精准打击的能力正是技术爱好者最爱的优雅解决方案。2. 实战准备三件必备工具2.1 浏览器选择与插件安装工欲善其事必先利其器推荐使用Chrome或Edge浏览器。安装Tampermonkey扩展就像装普通插件一样简单打开浏览器应用商店搜索Tampermonkey点击安装认准绿色猴子图标我测试过各个版本目前4.18版的稳定性最好。有个小技巧安装后记得在扩展设置里开启允许访问文件网址这样后期调试脚本会方便很多。2.2 开发者工具速成按F12打开开发者工具我们要重点掌握两个功能元素选择器左上角箭头图标点击后选中页面元素右侧会自动定位到对应HTML代码控制台Console标签页这里能看到脚本运行的错误信息上周我处理chat18.aichatos.xyz的广告时就是用元素选择器发现广告div的类名是ad-container。记住这个技巧按住Shift键点击箭头图标可以强制显示被隐藏的元素。2.3 脚本创建基础模板点击油猴图标→创建新脚本你会看到这样的基础结构// UserScript // name GPT站点优化 // namespace http://tampermonkey.net/ // version 0.1 // description 去除广告并优化界面 // author 你的名字 // match https://chat18.aichatos.xyz/* // grant none // /UserScript (function() { use strict; // 你的代码写在这里 })();特别注意match的值要改成目标网站域名星号表示匹配所有子页面。我建议新手先在本地新建.js文件编写测试OK后再复制到油猴编辑器这样可以用VS Code的代码提示功能。3. 广告清除实战精准定位与删除3.1 DOM元素分析技巧打开目标网站按F12进入开发者工具。以chat18.aichatos.xyz为例我通过观察发现右侧广告栏的HTML结构是div classflex items-center...底部悬浮广告的ID是floating-ad有个实用技巧在控制台输入document.querySelector(.ad-class)可以实时测试选择器是否有效。我经常先用这个命令确认元素路径再把代码复制到脚本里。3.2 编写删除函数核心代码如下我加了详细注释function removeAds() { // 删除右侧广告 const sideAd document.querySelector(.flex.items-center.flex-col.justify-center.mt-4.text-center); if(sideAd) { sideAd.remove(); console.log(右侧广告已移除); } // 删除浮动广告 const floatAd document.getElementById(floating-ad); if(floatAd) { floatAd.style.display none; console.log(浮动广告已隐藏); } // 防止广告重新加载 const observer new MutationObserver(() { removeAds(); }); observer.observe(document.body, {childList: true, subtree: true}); }这里用到了MutationObserver来监控DOM变化防止有些顽固广告重新加载。去年我处理某个新闻网站时发现他们每5秒就会重新插入广告就是这个方法最终搞定的。3.3 定时检测与异常处理有些广告是延迟加载的需要定时检查// 初始执行 removeAds(); // 每3秒检查一次 setInterval(removeAds, 3000); // 页面切换时重新检测 window.addEventListener(hashchange, removeAds);建议把超时时间设为300-500ms太频繁会影响性能。我遇到过最棘手的情况是某个视频网站的广告iframe最后是通过拦截网络请求才彻底解决的这个我们后面进阶部分会讲到。4. 体验优化让平替站用出VIP感觉4.1 界面布局调整除了去广告我们还能优化使用体验。比如这个GPT平替站的对话框太窄可以这样扩展// 扩大聊天区域 const chatContainer document.querySelector(.chat-box); if(chatContainer) { chatContainer.style.width 80%; chatContainer.style.margin 0 auto; } // 调整输入框高度 const inputBox document.querySelector(.input-area); if(inputBox) { inputBox.style.minHeight 100px; }我甚至给常用按钮加了快捷键绑定document.addEventListener(keydown, (e) { if(e.ctrlKey e.key Enter) { document.querySelector(.send-button).click(); } });4.2 功能增强实例通过油猴脚本还能添加实用功能。比如我给这个站增加了历史记录功能// 保存对话历史 function saveHistory(text) { let history JSON.parse(localStorage.getItem(chatHistory) || []); history.push(text); localStorage.setItem(chatHistory, JSON.stringify(history)); } // 添加历史记录按钮 const historyBtn document.createElement(button); historyBtn.textContent 查看历史; historyBtn.onclick () { alert(localStorage.getItem(chatHistory)); }; document.querySelector(.toolbar).appendChild(historyBtn);4.3 性能优化技巧脚本要注意性能影响我有几个实用建议避免使用setInterval改用requestAnimationFrameDOM操作批量执行减少重绘次数复杂计算放在Web Worker中比如这样优化广告检测function optimizedAdCheck() { requestAnimationFrame(() { const ads document.querySelectorAll(.ad-class); if(ads.length 0) { ads.forEach(ad ad.remove()); } optimizedAdCheck(); }); }5. 调试与维护让脚本长期稳定工作5.1 常见错误排查新手最容易遇到的三个问题选择器失效网站改版导致class名变更权限问题需要添加grant声明执行时机脚本运行太早或太晚我的调试流程是在控制台手动测试选择器添加console.log输出执行顺序调整run-at参数如document-end5.2 脚本自动更新建议加入版本检查逻辑// updateURL https://yourdomain.com/script.meta.js // downloadURL https://yourdomain.com/script.user.js const currentVer 0.2; fetch(https://yourdomain.com/version.txt) .then(res res.text()) .then(latestVer { if(latestVer currentVer) { alert(发现新版本请更新脚本); } });5.3 跨浏览器兼容不同浏览器的API略有差异这是我常用的兼容写法const storage chrome?.storage || browser?.storage || { local: { get: (key, cb) cb({[key]: localStorage.getItem(key)}), set: (obj, cb) { Object.keys(obj).forEach(key { localStorage.setItem(key, obj[key]); }); cb(); } } };最近在处理一个企业内网系统时发现他们的老版Edge不支持某些新API最终就是用这种降级方案解决的。
手写油猴脚本：三步实现GPT平替站点的广告净化与体验优化
发布时间：2026/7/13 13:54:21
1. 油猴脚本入门为什么它能成为网页定制神器每次打开那些免费的GPT平替网站满屏的广告弹窗是不是让你头疼不已作为一个长期和网页广告斗智斗勇的老手我发现Tampermonkey油猴简直是浏览器里的瑞士军刀。它不像普通插件那样功能固定而是让你能像黑客一样直接修改网页代码。简单来说油猴就是个能在特定网站自动运行你写的JavaScript代码的工具。比如我发现chat18.aichatos.xyz这个能当GPT用的网站虽然功能不错但侧边栏广告和悬浮窗实在影响体验。这时候油猴脚本就能精准定位这些广告元素像外科手术一样把它们切除干净。最让我惊喜的是它的轻量化——不需要安装一堆广告拦截插件一个脚本就能搞定特定站点的优化。上周我帮同事处理类似问题时他原本电脑上装了三个广告拦截器都没用结果我用20行油猴脚本就解决了问题。这种精准打击的能力正是技术爱好者最爱的优雅解决方案。2. 实战准备三件必备工具2.1 浏览器选择与插件安装工欲善其事必先利其器推荐使用Chrome或Edge浏览器。安装Tampermonkey扩展就像装普通插件一样简单打开浏览器应用商店搜索Tampermonkey点击安装认准绿色猴子图标我测试过各个版本目前4.18版的稳定性最好。有个小技巧安装后记得在扩展设置里开启允许访问文件网址这样后期调试脚本会方便很多。2.2 开发者工具速成按F12打开开发者工具我们要重点掌握两个功能元素选择器左上角箭头图标点击后选中页面元素右侧会自动定位到对应HTML代码控制台Console标签页这里能看到脚本运行的错误信息上周我处理chat18.aichatos.xyz的广告时就是用元素选择器发现广告div的类名是ad-container。记住这个技巧按住Shift键点击箭头图标可以强制显示被隐藏的元素。2.3 脚本创建基础模板点击油猴图标→创建新脚本你会看到这样的基础结构// UserScript // name GPT站点优化 // namespace http://tampermonkey.net/ // version 0.1 // description 去除广告并优化界面 // author 你的名字 // match https://chat18.aichatos.xyz/* // grant none // /UserScript (function() { use strict; // 你的代码写在这里 })();特别注意match的值要改成目标网站域名星号表示匹配所有子页面。我建议新手先在本地新建.js文件编写测试OK后再复制到油猴编辑器这样可以用VS Code的代码提示功能。3. 广告清除实战精准定位与删除3.1 DOM元素分析技巧打开目标网站按F12进入开发者工具。以chat18.aichatos.xyz为例我通过观察发现右侧广告栏的HTML结构是div classflex items-center...底部悬浮广告的ID是floating-ad有个实用技巧在控制台输入document.querySelector(.ad-class)可以实时测试选择器是否有效。我经常先用这个命令确认元素路径再把代码复制到脚本里。3.2 编写删除函数核心代码如下我加了详细注释function removeAds() { // 删除右侧广告 const sideAd document.querySelector(.flex.items-center.flex-col.justify-center.mt-4.text-center); if(sideAd) { sideAd.remove(); console.log(右侧广告已移除); } // 删除浮动广告 const floatAd document.getElementById(floating-ad); if(floatAd) { floatAd.style.display none; console.log(浮动广告已隐藏); } // 防止广告重新加载 const observer new MutationObserver(() { removeAds(); }); observer.observe(document.body, {childList: true, subtree: true}); }这里用到了MutationObserver来监控DOM变化防止有些顽固广告重新加载。去年我处理某个新闻网站时发现他们每5秒就会重新插入广告就是这个方法最终搞定的。3.3 定时检测与异常处理有些广告是延迟加载的需要定时检查// 初始执行 removeAds(); // 每3秒检查一次 setInterval(removeAds, 3000); // 页面切换时重新检测 window.addEventListener(hashchange, removeAds);建议把超时时间设为300-500ms太频繁会影响性能。我遇到过最棘手的情况是某个视频网站的广告iframe最后是通过拦截网络请求才彻底解决的这个我们后面进阶部分会讲到。4. 体验优化让平替站用出VIP感觉4.1 界面布局调整除了去广告我们还能优化使用体验。比如这个GPT平替站的对话框太窄可以这样扩展// 扩大聊天区域 const chatContainer document.querySelector(.chat-box); if(chatContainer) { chatContainer.style.width 80%; chatContainer.style.margin 0 auto; } // 调整输入框高度 const inputBox document.querySelector(.input-area); if(inputBox) { inputBox.style.minHeight 100px; }我甚至给常用按钮加了快捷键绑定document.addEventListener(keydown, (e) { if(e.ctrlKey e.key Enter) { document.querySelector(.send-button).click(); } });4.2 功能增强实例通过油猴脚本还能添加实用功能。比如我给这个站增加了历史记录功能// 保存对话历史 function saveHistory(text) { let history JSON.parse(localStorage.getItem(chatHistory) || []); history.push(text); localStorage.setItem(chatHistory, JSON.stringify(history)); } // 添加历史记录按钮 const historyBtn document.createElement(button); historyBtn.textContent 查看历史; historyBtn.onclick () { alert(localStorage.getItem(chatHistory)); }; document.querySelector(.toolbar).appendChild(historyBtn);4.3 性能优化技巧脚本要注意性能影响我有几个实用建议避免使用setInterval改用requestAnimationFrameDOM操作批量执行减少重绘次数复杂计算放在Web Worker中比如这样优化广告检测function optimizedAdCheck() { requestAnimationFrame(() { const ads document.querySelectorAll(.ad-class); if(ads.length 0) { ads.forEach(ad ad.remove()); } optimizedAdCheck(); }); }5. 调试与维护让脚本长期稳定工作5.1 常见错误排查新手最容易遇到的三个问题选择器失效网站改版导致class名变更权限问题需要添加grant声明执行时机脚本运行太早或太晚我的调试流程是在控制台手动测试选择器添加console.log输出执行顺序调整run-at参数如document-end5.2 脚本自动更新建议加入版本检查逻辑// updateURL https://yourdomain.com/script.meta.js // downloadURL https://yourdomain.com/script.user.js const currentVer 0.2; fetch(https://yourdomain.com/version.txt) .then(res res.text()) .then(latestVer { if(latestVer currentVer) { alert(发现新版本请更新脚本); } });5.3 跨浏览器兼容不同浏览器的API略有差异这是我常用的兼容写法const storage chrome?.storage || browser?.storage || { local: { get: (key, cb) cb({[key]: localStorage.getItem(key)}), set: (obj, cb) { Object.keys(obj).forEach(key { localStorage.setItem(key, obj[key]); }); cb(); } } };最近在处理一个企业内网系统时发现他们的老版Edge不支持某些新API最终就是用这种降级方案解决的。
