浏览器插件进阶指南：Tampermonkey油猴脚本实用推荐与开发实践

一、Tampermonkey核心功能解析

Tampermonkey作为浏览器用户脚本管理器，通过注入自定义JavaScript代码实现网页功能扩展。其核心能力包括：

跨浏览器兼容：支持主流浏览器（Chrome/Firefox/Edge等）的扩展平台，通过单一脚本实现多环境部署。
动态脚本执行：基于@match规则的URL匹配机制，精确控制脚本作用范围，避免全局污染。
GM API扩展：提供GM.xmlHttpRequest、GM.setValue等专用接口，突破浏览器同源策略限制。

典型应用场景示例：

// @match      https://example.com/*
// @grant      GM.xmlHttpRequest
GM.xmlHttpRequest({
  method: "POST",
  url: "https://api.example.com/data",
  data: JSON.stringify({key: "value"}),
  onload: function(response) {
    console.log(response.responseText);
  }
});

二、实用脚本推荐与配置指南

1. 网页内容增强类

广告拦截增强：结合uBlock Origin规则实现精准广告屏蔽

// @include https://*.news-site.com/*
(function() {
  const ads = document.querySelectorAll('.ad-container, .banner-ad');
  ads.forEach(el => el.remove());
})();

数据提取工具：自动解析网页表格并导出为CSV

// @grant GM.download
function exportToCSV() {
  const rows = [];
  document.querySelectorAll('table tr').forEach(tr => {
    const cols = [];
    tr.querySelectorAll('td, th').forEach(td => cols.push(td.textContent));
    rows.push(cols.join(','));
  });
  GM.download({
    url: 'data:text/csv;charset=utf-8,' + rows.join('\n'),
    name: 'table-data.csv'
  });
}

2. 自动化操作类

表单自动填充：基于DOM结构识别自动填写重复表单

// @match https://form.example.com/apply*
(function() {
  const fields = {
    '#name': '张三',
    '#phone': '13800138000',
    '#email': 'test@example.com'
  };
  Object.entries(fields).forEach(([selector, value]) => {
    const el = document.querySelector(selector);
    if (el) el.value = value;
  });
})();

定时刷新监控：每30秒检查页面更新并播放提示音

// @grant GM.notification
let lastCount = 0;
setInterval(() => {
  const currentCount = parseInt(document.querySelector('#counter').textContent);
  if (currentCount > lastCount) {
    new Audio('https://example.com/alert.mp3').play();
    GM.notification({
      title: '更新提醒',
      text: `检测到新数据: ${currentCount}`,
      onclick: () => window.focus()
    });
  }
  lastCount = currentCount;
}, 30000);

三、脚本开发最佳实践

1. 性能优化策略

延迟执行：使用setTimeout(fn, 0)避免阻塞页面加载

事件监听优化：采用事件委托减少监听器数量

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('action-btn')) {
    // 处理点击事件
  }
}, true); // 捕获阶段处理

缓存DOM查询：存储频繁访问的DOM元素引用

2. 安全防护机制

输入验证：对用户输入内容进行XSS过滤

function sanitizeInput(input) {
  return input.replace(/<[^>]*>/g, '').replace(/script/gi, '');
}

跨域请求限制：仅允许信任的API域名

// @connect example.com
// @connect api.trusted.com

3. 调试与维护

日志分级系统：实现DEBUG/INFO/ERROR级别日志

const LOG_LEVEL = {DEBUG: 0, INFO: 1, ERROR: 2};
function log(level, message) {
  if (level >= LOG_LEVEL.INFO) {
    console.log(`[${new Date().toISOString()}] ${message}`);
  }
}

版本控制：在脚本元数据中添加版本和更新日志

// @version      1.2.3
// @updateURL    https://example.com/scripts/update.json

四、企业级应用场景

数据采集系统：构建分布式网页数据抓取网络
- 架构设计：主控脚本分发任务 + 工作者脚本执行采集
- 通信机制：使用WebSocket实现实时指令传输

自动化测试框架：集成Selenium WebDriver实现跨浏览器测试

// @grant GM.registerMenuCommand
GM.registerMenuCommand('运行测试用例', () => {
  window.open('about:blank', '_blank').tester = {
    run: function() { /* 测试逻辑 */ }
  };
});

安全审计工具：检测网页中的敏感信息泄露

// @match *://*/*
const patterns = [/身份证号：\d{17}[\dX]/i, /手机号：1[3-9]\d{9}/];
patterns.forEach(pattern => {
  const matches = document.body.textContent.matchAll(pattern);
  // 上报匹配结果...
});

五、常见问题解决方案

脚本失效处理：
- 检查@match规则是否匹配最新URL结构
- 使用开发者工具的Console面板调试执行错误
- 更新脚本依赖的第三方API接口
性能瓶颈优化：
- 使用requestAnimationFrame替代setInterval处理动画
- 对大型DOM操作使用DocumentFragment
- 实现分块加载机制处理大数据集

跨浏览器兼容：

检测浏览器类型并加载对应兼容代码

const isFirefox = navigator.userAgent.includes('Firefox');
if (isFirefox) {
// 火狐专属处理逻辑
}

使用Polyfill填补API差异

通过系统掌握Tampermonkey的开发技巧与实践方案，开发者可以构建出高效、稳定、安全的浏览器自动化工具。建议从简单脚本开始实践，逐步积累DOM操作和异步编程经验，最终实现复杂业务场景的自动化处理。