本文教你用 tampermonkey 浏览器扩展编写简易用户脚本，自动、持久地替换指定网页中的文字（如将 “hellothere” 替换为 “tacocat”），无需每次手动编辑 dom，刷新后依然生效。
本文教你用 tampermonkey 浏览器扩展编写简易用户脚本，自动、持久地替换指定网页中的文字（如将 “hellothere” 替换为 “tacocat”），无需每次手动编辑 dom，刷新后依然生效。
Tampermonkey 是一款广受欢迎的用户脚本管理器，它允许你在任意网页加载时自动执行自定义 JavaScript 代码——这正是实现“永久修改文本”的核心机制。注意：这里的“永久”并非修改服务器内容，而是指对你的浏览器而言，每次访问该页面时都会自动应用修改，效果等同于你手动修改后再刷新仍保留。
✅ 正确做法：编写一个基础 Tampermonkey 脚本
以将 ID 为 Hellothere 的元素文本改为 Tacocat 为例，完整脚本如下（请复制粘贴到 Tampermonkey 编辑器中）：
// ==UserScript==
// @name Replace "Hellothere" with "Tacocat"
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 自动将页面中 id="Hellothere" 的元素文本替换为 Tacocat
// @author You
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 等待 DOM 加载完成（推荐比 window.onload 更可靠）
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', replaceText);
} else {
replaceText();
}
function replaceText() {
const el = document.getElementById('Hellothere');
if (el) {
el.textContent = 'Tacocat'; // 推荐用 textContent 而非 innerText（更安全、性能更好）
} else {
console.warn('⚠️ 元素 #Hellothere 未找到，请检查 ID 是否正确或页面是否动态加载');
}
}
})();
? 关键说明与注意事项
-
@match规则：*://*/*表示匹配所有网页；若只想在特定网站生效（如https://example.com/*），请精准填写，提升安全性和性能。 -
执行时机：使用
DOMContentLoaded事件而非window.onload，可确保 DOM 就绪但不等待图片/样式等资源，响应更快；对于 React/Vue 等 SPA 应用，可能还需监听 DOM 变化（见进阶提示）。 -
元素定位要准确：务必确认目标元素确实存在且 ID 唯一。可通过浏览器控制台运行
document.getElementById('Hellothere')验证。若元素由 JS 动态生成（如单页应用），需配合MutationObserver或延迟重试。 -
避免常见错误：
- ❌ 不要直接写
document.getElementById(...).innerText = ...在顶层作用域（DOM 尚未加载）； - ❌ 不要用
innerHTML替换纯文本（有 XSS 风险）；优先用textContent； - ❌ 不要遗漏
// ==UserScript==元数据块——Tampermonkey 依赖它识别脚本配置。
- ❌ 不要直接写
? 进阶提示（可选）
若目标文本位于动态渲染区域（如无限滚动列表、AJAX 加载内容），可增强脚本以监听 DOM 变化：
// 在 replaceText() 后添加：
const observer = new MutationObserver(replaceText);
observer.observe(document.body, { childList: true, subtree: true });
但请注意：过度监听可能影响性能，建议先确认是否真有必要。
✅ 总结
只需三步即可实现“永久文本替换”：
1️⃣ 安装 Tampermonkey（Chrome/Firefox/Edge 均支持）；
2️⃣ 新建脚本，粘贴上述完整代码并保存；
3️⃣ 访问对应网页，观察效果——刷新后依然生效。
这不是黑科技，而是前端自动化的基本实践。掌握它，你已迈出 Web 自定义改造的第一步。
