閱讀英文文檔輔助擴展

介紹

開發中因受限英語水平, 不免藉助 Googl 翻譯文檔, 可是有時候它會搞亂排版, 就像下面這樣.

這個擴展就是修復它👍.

使用

刷新頁面後

爲何有幾種顏色?

他們表明三種需求.

• 左鍵藍色: 不翻譯此區域,而且運用自定義樣式, 好比修改代碼的字體, 大小等.
• 右鍵綠色: 不翻譯此區域, 不運用自定義樣式, 也就是說,不修改外觀.
• 中鍵黃色: 強制翻譯, 有時候 google 翻譯會對某些區域不翻譯, 可是咱們須要對它翻譯,就用中鍵.

除了三個按鍵, 還有支持滾輪, 調節 DOM 範圍, 實現細膩化選擇, 就像下面這樣.

須要注意的是, 並非全部的的元素能夠被選中, 只有具備類名, id, 表格, 標題 (h1-6), 代碼標籤, 好比: code , pre, code ... 等等能選中.

主要是避免選擇通用標籤, 好比選擇了一個 p 標籤, 結果不言而明.

一點建議

選擇的時候儘量選擇足夠大的父級, 而不是每一個子級.

壞的作法

好的作法

管理頁面

在管理你能夠查看, 你所選取的元素, 支持增刪改, 以及每一個域名自定義樣式.

此擴展內置了Fira Code 字體, 提供三種變體.

• FiraCode-Regular
• FiraCode-Medium
• FiraCode-Retina

安裝

下載壓縮文件包, 而後解壓, 在 Chrome 中加載.

Not translated.zip

或者將源代碼 github.com/ouweiya/Not-translated 中的dist文件, 加載到 Chrome 中也能夠.

總結

控制 Chrome 翻譯或不翻譯,主要由兩個類名決定, notranslate 和 translate.

也就是說在網頁加載那一刻, 須要完成對選定 DOM 元素遍歷並添加上類名.

在 CSS 方面使用的是動態選擇器, 無需遍歷, 使用 CSS 選擇器自動運用樣式, 整體來講,流暢無阻塞,而且無侵入.

即便這個擴展不用來修復翻譯排版, 也能夠用來美化代碼排版, 用你喜好的字體 ,好比 Fira Code.

瑕疵

當網絡特別阻塞的時候, Google 翻譯會搶先翻譯, 這個時候刷新頁面便可, 而不是擴展沒有起做用.

還有一些網站是動態渲染, 類名是動態生成的, 這也就形成了明明第一次選中,但刷新後沒有生效, 能夠經過調節 DOM 範圍,更大或更小,來避開這個類.

小提示

這個擴展追求簡潔,設計成了無菜單項, 要 啓動選擇/關閉選擇, 直接點擊圖標.
也有快捷鍵.

Ctrl + q 切換 開啓 / 關閉, Mac Command + q

Esc 關閉 (當前文檔失焦時, 會不起做用)