Tampermonkey脚本开发入门：以NGA横幅移除为例

序：
已经有10来年没写过代码和研究技术了，转职产品岗了，工作闲时会看一看NGA，但是NGA的横幅很明显，，所以想到用Tampermonkey来注入代码把横幅给删掉（让DeepSeek 帮忙写了一些）。
一、开发环境准备

• 浏览器扩展安装
  
  
  
  • Chrome：访问Tampermonkey官网安装
    
  
  
• 开发工具启用
  javascript复制代码
  1. // 调试快捷键
  2. Ctrl+Shift+I  // 打开开发者工具
  3. Ctrl+Shift+M  // 切换移动端模式

  复制代码

二、脚本元信息解析

javascript复制代码

1. // ==UserScript==
2. // @name         NGA自定义横幅移除  // 脚本显示名称
3. // @namespace    http://tampermonkey.net/  // 防止冲突的命名空间
4. // @version      1.3  // 语义化版本号
5. // @description  完全移除#custombg容器  // 应用商店展示描述
6. // @match        *://nga.178.com/*  // 生效站点(支持通配符)
7. // @grant        none  // 权限声明
8. // ==/UserScript==

复制代码

最佳实践建议：

• 始终声明@namespace避免脚本冲突
  
• 使用@match替代@include获得更精准的URL控制
  

三、核心功能实现

1. DOM元素定点清除

javascript复制代码

1. const nukeCustomBg = () => {
2.     // 精确选择器定位
3.     const target = document.getElementById('custombg');
4.    
5.     // 防御性编程检查
6.     if (target && target.parentNode) {
7.         target.remove();
8.         console.log('[脚本日志] 已移除自定义横幅容器');
9.     }
10. };

复制代码

2. 动态内容监听

javascript复制代码

1. // 创建观察者实例
2. const observer = new MutationObserver(mutations => {
3.     mutations.forEach(mutation => {
4.         if (mutation.addedNodes.length) {
5.             debouncedNuke();
6.         }
7.     });
8. });
10. // 配置监听参数
11. observer.observe(document, {
12.     childList: true,   // 监控子节点变化
13.     subtree: true      // 监控所有后代节点
14. });

复制代码

3. 单页应用兼容方案

javascript复制代码

1. // 劫持History API
2. const _pushState = history.pushState;
3. history.pushState = function() {
4.     _pushState.apply(this, arguments);
5.     setTimeout(nukeCustomBg, 50); // 等待路由更新完成
6. };
8. // 监听hashchange事件
9. window.addEventListener('hashchange', () => {
10.     setTimeout(nukeCustomBg, 100);
11. });

复制代码

四、性能优化技巧

1. 函数节流控制

javascript复制代码

1. function debounce(fn, delay) {
2.     let timer;
3.     return function() {
4.         clearTimeout(timer);  // 清除旧计时器
5.         timer = setTimeout(() => {
6.             fn.apply(this, arguments);
7.         }, delay);
8.     };
9. }
11. // 创建防抖实例（300ms阈值）
12. const debouncedNuke = debounce(nukeCustomBg, 300);

复制代码

2. 资源释放策略

javascript复制代码

1. // 适时断开观察者
2. window.addEventListener('beforeunload', () => {
3.     observer.disconnect();
4. });

复制代码

五、脚本调试指南

控制台调试命令

javascript复制代码

1. // 手动触发移除
2. unsafeWindow.nukeCustomBg();
4. // 查看观察者状态
5. console.log(observer._callback);
7. // 性能指标统计
8. console.time('移除操作');
9. target.remove();
10. console.timeEnd('移除操作');  // 典型值：0.15-0.3ms

复制代码

 

完整代码

完整代码

1.  // ==UserScript==
2. // @name         NGA自定义横幅移除
3. // @namespace    http://tampermonkey.net/
4. // @version      1.3
5. // @description 完全移除#custombg容器
6. // @match        *://nga.178.com/*
7. // @grant        none
8. // ==/UserScript==
10. (function() {
11.     'use strict';
13.     // 核心删除函数
14.     const nukeCustomBg = () => {
15.         const target = document.getElementById('custombg');
16.         if (target) {
17.             target.remove();
18.             console.log('已移除自定义横幅容器');
19.         }
20.     };
22.     // 即时执行 + 防抖监听
23.     const debouncedNuke = debounce(nukeCustomBg, 300);
25.     // 启动监控
26.     const observer = new MutationObserver(debouncedNuke);
27.     observer.observe(document, {
28.         childList: true,
29.         subtree: true
30.     });
32.     // 初始执行
33.     nukeCustomBg();
35.     // 防抖函数
36.     function debounce(fn, delay) {
37.         let timer;
38.         return function() {
39.             clearTimeout(timer);
40.             timer = setTimeout(() => fn.apply(this, arguments), delay);
41.         };
42.     }
44.     // 兼容HTML5 History API
45.     const _pushState = history.pushState;
46.     history.pushState = function() {
47.         _pushState.apply(this, arguments);
48.         setTimeout(nukeCustomBg, 50);
49.     };
50. })();

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！