开发人员的 Chrome 翻译设置

女爷i 2022-12-08 04:25 203阅读 0赞

开发人员可能会看一些英文的文档，在 Chrome 上通过右键【翻译中文】非常方便。  
![在这里插入图片描述][20200917165123119.png_pic_center]  
开发人员看的网站通常会存在代码段，谷歌也会翻译这部分内容，这就导致代码格式乱了，而且翻译中文后反而看不懂了。如何避免代码被翻译呢？

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

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

以 [ES 文档为例][ES]，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center]  
直接翻译后效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 1]  
想要避免翻译就的加样式。先看看代码段的 html 代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 2]  
可以看到这里使用的 pre 标签，大多数开发相关文档中的代码段都是 `<pre>` 标签，比如最容易出现代码段的 github：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 3]  
github 也是 `<pre>`，其他基本上都是。

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

加样式最方便的插件就是 Tampermonkey：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 4]  
安装这个插件然后新建一个脚本，内容如下：

// ==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][https_gist.github.com_abel533_5839d3eca4686646baba113fc47e9b22]

脚本上面的 `// @name elastic-notranslate` 是脚本的名字。`// @match *://**/*` 是匹配所有网站。保存脚本后刷新刚才的文档页面，查看 html 如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 5]  
可以看到此时已经有了 `notranslate`，现在右键翻译就会排除这部分，效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 6]  
此时的文档看起来就舒服多了。

[20200917165123119.png_pic_center]: /images/20221123/8eb1bdd6b96345b59ec67102980eaf62.png
[How can I tell Google Translate to not translate a section of a website]: https://stackoverflow.com/questions/9628507/how-can-i-tell-google-translate-to-not-translate-a-section-of-a-website
[ES]: https://www.elastic.co/guide/en/elasticsearch/client/java-rest/7.9/java-rest-high-document-index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/26118233764d42bf8206733b3159606c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/a9d15954a0e544d29d9c6b9d74220013.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/da8d1762d00747f4a6b1fcb33ce2e005.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/9e659ada87434e03b6eb6150b513a170.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/b52cbb879103494e976c5237baf2a1f6.png
[https_gist.github.com_abel533_5839d3eca4686646baba113fc47e9b22]: https://gist.github.com/abel533/5839d3eca4686646baba113fc47e9b22
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/6df76a978028460989c86f6d5b7afbaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/deb1791473d34b01b2534a9bf86f3e8a.png