Tampermonkey脚本开发入门：以NGA横幅移除为例
序：已经有10来年没写过代码和研究技术了，转职产品岗了，工作闲时会看一看NGA，但是NGA的横幅很明显，，所以想到用Tampermonkey来注入代码把横幅给删掉（让DeepSeek 帮忙写了一些）。
一、开发环境准备
[*]浏览器扩展安装
[*]Chrome：访问Tampermonkey官网安装
[*]开发工具启用
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);
};
})();
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]