开发人员的 Chrome 翻译设置

开发人员可能会看一些英文的文档，在 Chrome 上通过右键【翻译中文】非常方便。

开发人员看的网站通常会存在代码段，谷歌也会翻译这部分内容，这就导致代码格式乱了，而且翻译中文后反而看不懂了。如何避免代码被翻译呢？

搜到了一篇文章 ​​How can I tell Google Translate to not translate a section of a website?​​

按照介绍，只需要给元素添加 ​​class="notranslate"​​，Chrome 翻译就会忽略添加这个样式的块。

以 ​​ES 文档为例​​，如下图所示：

直接翻译后效果如下：

想要避免翻译就的加样式。先看看代码段的 html 代码：

可以看到这里使用的 pre 标签，大多数开发相关文档中的代码段都是 ​​<pre>​​ 标签，比如最容易出现代码段的 github：

github 也是 ​​<pre>​​，其他基本上都是。

想要避免被翻译最简单的就是给所有 ​​<pre>​​​ 标签添加上 ​​class="notranslate"​​ 样式。

加样式最方便的插件就是 Tampermonkey：

安装这个插件然后新建一个脚本，内容如下：

// ==UserScript==
// @name         notranslate
// @namespace    https://gist.github.com/abel533/5839d3eca4686646baba113fc47e9b22
// @version      1.0
// @description  浏览器翻译时排除代码片段
// @author       isea533
// @match        *://**/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    window.addEventListener('load', function() {
        noTranslate(document.getElementsByTagName('pre'));
        noTranslate(document.getElementsByClassName('gist'));
        noTranslate(document.getElementsByClassName('CodeMirror-code'));
    }, false);
    function noTranslate(items) {
        if(items && items.length > 0) {
            for(var i = 0; i < items.length; i++) {
                items[i].classList.add('notranslate');
            }
        }
    }
})();

代码非常简单，找到所有 ​​pre​​​ 然后添加 ​​class​​ 即可。

2021-7-16 更新

• 增加 gist 和 CodeMirror 支持，并且在页面渲染完成后执行。
• 代码地址：​​https://gist.github.com/abel533/5839d3eca4686646baba113fc47e9b22​​

脚本上面的 ​​// @name elastic-notranslate​​​ 是脚本的名字。​​// @match *://**/*​​ 是匹配所有网站。保存脚本后刷新刚才的文档页面，查看 html 如下：

可以看到此时已经有了 ​​notranslate​​，现在右键翻译就会排除这部分，效果如下：

此时的文档看起来就舒服多了。