序：

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

一、开发环境准备

  1. 浏览器扩展安装

  2. 开发工具启用

    javascript复制代码
    // 调试快捷键
Ctrl+Shift+I  // 打开开发者工具
Ctrl+Shift+M  // 切换移动端模式

二、脚本元信息解析

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

最佳实践建议：

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

三、核心功能实现

1. DOM元素定点清除

javascript复制代码
const nukeCustomBg = () => {
    // 精确选择器定位
    const target = document.getElementById('custombg');
    
    // 防御性编程检查
    if (target && target.parentNode) {
        target.remove();
        console.log('[脚本日志] 已移除自定义横幅容器');
    }
};

2. 动态内容监听

javascript复制代码
// 创建观察者实例
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length) {
            debouncedNuke();
        }
    });
});

// 配置监听参数
observer.observe(document, {
    childList: true,   // 监控子节点变化
    subtree: true      // 监控所有后代节点
});

3. 单页应用兼容方案

javascript复制代码
// 劫持History API
const _pushState = history.pushState;
history.pushState = function() {
    _pushState.apply(this, arguments);
    setTimeout(nukeCustomBg, 50); // 等待路由更新完成
};

// 监听hashchange事件
window.addEventListener('hashchange', () => {
    setTimeout(nukeCustomBg, 100);
});

四、性能优化技巧

1. 函数节流控制

javascript复制代码
function debounce(fn, delay) {
    let timer;
    return function() {
        clearTimeout(timer);  // 清除旧计时器
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}

// 创建防抖实例（300ms阈值）
const debouncedNuke = debounce(nukeCustomBg, 300);

2. 资源释放策略

javascript复制代码
// 适时断开观察者
window.addEventListener('beforeunload', () => {
    observer.disconnect(); 
});

五、脚本调试指南

控制台调试命令

javascript复制代码
// 手动触发移除
unsafeWindow.nukeCustomBg();

// 查看观察者状态
console.log(observer._callback); 

// 性能指标统计
console.time('移除操作');
target.remove();
console.timeEnd('移除操作');  // 典型值：0.15-0.3ms

 

完整代码

完整代码 
 // ==UserScript==
// @name         NGA自定义横幅移除
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description 完全移除#custombg容器
// @match        *://nga.178.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 核心删除函数
    const nukeCustomBg = () => {
        const target = document.getElementById('custombg');
        if (target) {
            target.remove();
            console.log('已移除自定义横幅容器');
        }
    };

    // 即时执行 + 防抖监听
    const debouncedNuke = debounce(nukeCustomBg, 300);

    // 启动监控
    const observer = new MutationObserver(debouncedNuke);
    observer.observe(document, {
        childList: true,
        subtree: true
    });

    // 初始执行
    nukeCustomBg();

    // 防抖函数
    function debounce(fn, delay) {
        let timer;
        return function() {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, arguments), delay);
        };
    }

    // 兼容HTML5 History API
    const _pushState = history.pushState;
    history.pushState = function() {
        _pushState.apply(this, arguments);
        setTimeout(nukeCustomBg, 50);
    };
})();