如何在浏览器中创建和运行自定义用户脚本

自定义用户脚本和浏览器扩展已经彻底改变了开发者与网站交互的方式。无论是自动化重复任务、移除烦人的元素,还是添加缺失的功能,用户脚本都提供了一种强大的方式来修改网页,而无需等待网站所有者实施更改。

理解浏览器用户脚本和管理器

用户脚本是在特定网页上运行的 JavaScript 文件,用于修改其行为或外观。可以将它们视为即时运行的轻量级浏览器扩展。要运行这些脚本,您需要一个用户脚本管理器——一个处理脚本执行、存储和权限的浏览器扩展。

选择您的用户脚本管理器

Tampermonkey 在 Chrome、Firefox、Edge 和 Safari 上拥有超过 1000 万用户,占据主导地位。对于开源倡导者,Violentmonkey 提供类似功能,并且完全透明。Greasemonkey 作为最初的管理器,由于 API 变更导致与大多数现有脚本不兼容而落后了。

对于基于 Chromium 的浏览器,Tampermonkey 往往最可靠。Firefox 用户通常更喜欢 Violentmonkey,因为它占用资源更少且更注重隐私。

编写您的第一个自定义用户脚本

每个用户脚本都以元数据块开始,告诉管理器何时以及如何运行您的代码:

// ==UserScript==
// @name         My Custom Script
// @match        https://example.com/*
// @grant        none
// @version      1.0
// ==/UserScript==

(function() {
  'use strict';
  // Your code here
})();

@match 指令至关重要——它决定哪些页面触发您的脚本。如果需要更广泛的匹配,可以使用 @include 进行简单的通配符模式匹配。@grant 指令控制 API 访问权限。从 none 开始,根据需要添加 GM_setValue 或 GM_xmlhttpRequest 等权限。

DOM 操作策略

避免使用框架——对于用户脚本来说,原生 JavaScript 更可靠且更快。关键挑战在于时序:您的脚本可能在要修改的元素存在之前就运行了。

// Wait for specific element
const waitForElement = (selector) => {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    
    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });
    
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
};

// Usage
waitForElement('.target-class').then(element => {
  element.style.display = 'none';
});

MutationObserver 是处理动态网站的最佳工具。它监视 DOM 变化并相应地做出反应,解决了困扰浏览器用户脚本的大多数时序问题。

部署前的测试

始终先在浏览器控制台中进行原型测试。打开开发者工具(F12),导航到目标网站,直接测试您的选择器和逻辑:

// Test your selector
document.querySelectorAll('.ad-banner').forEach(el => el.remove());

// Verify element properties
console.log(document.querySelector('#main-content').innerHTML);

一旦正常工作,将代码包装在用户脚本模板中,并使用简单的 console.log() 测试以验证脚本加载。这种两步方法可以在问题变成调试噩梦之前捕获大多数问题。

常见陷阱和解决方案

竞态条件困扰着新手。元素异步加载,因此您的脚本可能执行得太早。使用 MutationObserver 或 DOMContentLoaded 事件,而不是任意的超时设置。

跨域限制限制了自定义用户脚本可以访问的内容。@grant GM_xmlhttpRequest 权限可以绕过 API 调用的 CORS 限制,但要谨慎使用。

性能很重要。低效的选择器或过度的 DOM 操作会使页面变得极慢。批量更新 DOM,使用特定选择器而非广泛选择器,并在完成后断开观察器连接。

现代浏览器的限制

Chromium 浏览器中的 Manifest V3 并未扼杀用户脚本,但它改变了格局。用户脚本管理器通过使用不同的 API 进行了适配,保持了兼容性。然而,一些高级功能如同步 XHR 请求已永久消失。

移动浏览器严重限制扩展支持。只有 Android 上的 Firefox 和 Kiwi Browser 能够正确支持 Tampermonkey。iOS 仍然是一个封闭的生态系统——Safari 有限的扩展模型不支持传统的用户脚本管理器。

结论

浏览器用户脚本弥合了网站提供的功能与用户需求之间的差距。从简单开始——隐藏一个烦人的元素或添加一个键盘快捷键。随着您对工作流程越来越熟悉,可以处理更复杂的自动化任务。当您可以按需重写网页时,网络变得无限灵活。

常见问题

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.