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"类。