油猴（Tampermonkey）脚本开发——阻止浏览器翻译github的代码部分

项目介绍

由于本人英文水平一般，所以经常使用谷歌流量器自带的翻译功能翻译网页，便于阅读英文文档。
但是翻译功能比较死板，会把代码部分的因为也一同翻译，导致代码无法阅读，实际上只需要翻译代码的注释部分，便于阅读即可。

技术介绍

• 通过查阅资料得知，在html5中，可以给标签添加translate="no"（值也可以为yes）属性，实现阻止浏览器翻译指定的标签内容。

兼容性

MDN中表示所有浏览器都无法很好支持，并且建议 使用class="notranslate"进行替代。但是经过测试，谷歌浏览器可以完美支持，其他的浏览器还没测试，应该谷歌内核的都没什么问题。如果想安全起见，可以用notranslate类进行代替。

translate的默认值和作用域

默认值为：yes（未使用translate属性的时候，默认可以翻译）

作用域：优先使用局部设置的规则，例如body中设置为no，但是div中设置为yes，则除了设置为yes的div以外，其他的元素都不会被翻译。

具体实现

给浏览器安装油猴插件，并且创建脚本，油猴（Tampermonkey）插件安装教程可以自行百度，脚本的开发文档也不在这里赘述，网上都有教程。
脚本的具体代码实现如下：

// ==UserScript==
// @name         github翻译
// @namespace    http://tampermonkey.net/1312321
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://github.com/*
// @match        https://*.github.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==
(function() {
window.onload=function(){
   /*
   将整个文档设置为不翻译
   */
   var  no_translate= document.querySelectorAll("body")

   /*
   指定需要翻译的部分，github中代码注释全部在.pl-c中
   */
   var  yes_translate= document.querySelectorAll("pre .pl-c,tbody .pl-c, span.markdown-title,article h3,article p,article li")  //指定需要转码的部分代码注释部分

   //更改节点信息
    no_translate.forEach(function(item){
        item.setAttribute("translate", "no")
    })
    yes_translate.forEach(function(item){
        item.setAttribute("translate", "yes")
    })
}
})();