开发人员的 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，现在右键翻译就会排除这部分，效果如下：

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

开发人员的 Chrome 翻译设置相关推荐

前后端开发人员必备Chrome插件
写在前面 Chrome算是世界上最广为流传的浏览器了,得益于它的简洁.快速.Chrome支持多标签浏览,每个标签页面都在独立的"沙箱"内运行,在提高安全性的同时,一个标签页面的崩溃 ...
web前端开发人员要求，css设置背景图片自适应
为什么要写这篇文章从一开始手指冒汗被怼的说不出话,到最后和面试官侃侃而谈游刃有余,我发现:同样的能力水平,在不同的面试表现下,反馈到面试官眼中的结果可以有着天壤之别. 因此,如果你希望把自己的真实水 ...
不仅仅是浏览器走近Chrome开发人员工具
Chrome浏览器以其简单.快速.安全.稳定.扩展丰富等特性受到了不少人的喜爱,除了这些特性,Chrome浏览器还提供了非常简单方便的开发人员工具,可以为开发提高效率,加上Chrome浏览器对HTML ...
开发人员在编写 HTML 和 CSS 时最常犯的六大错误
生活中犯错误是正常的,没有人不会犯错误,更何况是开发人员呢?今天我们就来卡看看开发人员在编写 HTML 和 CSS 时最常犯的六大错误有哪些. 作者 | Stas Melnikov 译者 | 弯月,责 ...
code wars_从开发人员的角度看Browser Wars™（扩展）
code wars I've been talking to my peers a couple of times in the past and every time I was coming wi ...
java erlang_Java开发人员的Erlang
java erlang 您可能没有注意到,但是距离我上次发布博客已经过去了几个星期. 这是由于我的Soleus骨折了,而且我的腿是石膏模型. 不能动弹,我认为调查完全不同的东西是个好主意–要么看那一天 ...
java 并发执行_Java并发执行器的懒惰开发人员简介
java 并发执行如果我告诉您util.concurrent API自2004年起提供此类服务,我就会自欺欺人.但是,我想回顾一下一些很酷的功能. 并发专家,现在是时候关闭该窗口了. 所有其他人,请 ...
Java开发人员的Erlang
您可能没有注意到,但是距离我上次发布博客已经过去了几个星期. 原因是我的Soleus骨折了,而我的腿也石膏了. 不能动弹,我认为调查完全不同的东西是个好主意–要么看那天的电视,要么,尽管Kojak和M ...
Java并发执行器的懒惰开发人员简介
如果我告诉您util.concurrent API自2004年起提供此类服务,我就会自欺欺人.但是,我想回顾一下一些很酷的功能. 并发专家,现在是时候关闭该窗口了. 所有其他人,请紧紧抓住乐趣. 你不 ...
苹果为开发人员播种macOS Big Sur 11.3的第七个Beta
苹果今天播种即将到来的第七个测试版MacOS的大苏尔11.3更新到开发商出于测试目的,用新的beta版即将到来一周推出后的第六个测试版,并一个多月后MacOS的大苏尔11.2的发布,一个bug修复更新 ...

开发人员的 Chrome 翻译设置

2021-7-16 更新

开发人员的 Chrome 翻译设置相关推荐

最新文章

热门文章