Tampermonkey脚本开发：解决网页翻译失效问题

2025-06-12 00:54:36作者：卓炯娓

Tampermonkey is the most popular userscript manager, with over 10 million users. It's available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox.

项目地址：https://gitcode.com/gh_mirrors/ta/tampermonkey

问题背景

在使用Tampermonkey开发用户脚本时，经常会遇到需要修改网页元素属性以实现特定功能的需求。一个常见场景是解决网页翻译失效的问题，特别是当网站默认设置了notranslate类或缺少translate属性时。

常见错误分析

在原始脚本中，开发者尝试使用getElementsByTagName方法时犯了一个常见错误：将URL作为参数传递给了这个方法。实际上，getElementsByTagName方法只接受有效的HTML标签名称作为参数，如"html"、"body"、"div"等。

正确实现方法

要实现网页内容的可翻译性，正确的做法是：

获取HTML根元素
设置translate属性为"yes"
移除可能存在的notranslate类

以下是修正后的脚本实现：

// ==UserScript==
// @name         Enable Page Translation
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Enable translation for specific website
// @author       YourName
// @match        https://www.example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    // 获取HTML根元素
    let htmlElement = document.getElementsByTagName("html")[0];
    
    // 设置翻译属性
    htmlElement.setAttribute("translate", "yes");
    
    // 移除不翻译类
    htmlElement.classList.remove("notranslate");
})();

技术要点解析

HTML元素选择：document.getElementsByTagName("html")[0]选择文档中的第一个(也是唯一的)<html>元素。
属性设置：setAttribute方法用于设置元素的属性值，这里将translate属性设为"yes"，告知浏览器此内容可翻译。
类名操作：classList.remove方法用于从元素的class列表中移除指定的类名，这里移除了可能阻止翻译的"notranslate"类。

应用场景扩展

此技术不仅适用于解决翻译问题，还可应用于：

修改网页的元数据属性
调整网页的语言设置
覆盖网站默认的不可翻译设置
为特定内容启用或禁用翻译功能

注意事项

确保脚本只在目标网站运行(@match指令要准确)
考虑脚本执行时机，必要时使用DOMContentLoaded事件
注意网站可能有动态加载内容，可能需要MutationObserver监听DOM变化
某些网站可能有防护机制阻止脚本修改关键属性

通过理解这些基本原理，开发者可以更灵活地使用Tampermonkey脚本来解决各种网页定制需求。

Tampermonkey is the most popular userscript manager, with over 10 million users. It's available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox.

项目地址：https://gitcode.com/gh_mirrors/ta/tampermonkey

登录后查看全文

热门内容推荐

最新内容推荐

项目优选

收起

OpenHarmony documentation | OpenHarmony开发者文档

deepin linux kernel

ohos_react_native

React Native鸿蒙化仓库

openGauss-server

openGauss kernel ~ openGauss is an open source relational database management system

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

金融AI编程实战

为非计算机科班出身 (例如财经类高校金融学院) 同学量身定制，新手友好，让学生以亲身实践开源开发的方式，学会使用计算机自动化自己的科研/创新工作。案例以量化投资为主线，涉及 Bash、Python、SQL、BI、AI 等全技术栈，培养面向未来的数智化人才 (如数据工程师、数据分析师、数据科学家、数据决策者、量化投资人)。

Jupyter Notebook

CangjieCommunity

为仓颉编程语言开发者打造活跃、开放、高质量的社区环境

openHiTLS-examples

本仓将为广大高校开发者提供开源实践和创新开发平台，收集和展示openHiTLS示例代码及创新应用，欢迎大家投稿，让全世界看到您的精巧密码实现设计，也让更多人通过您的优秀成果，理解、喜爱上密码技术。