18年03月13日

一個自動翻譯英文難字的Chrome Extension

讀英文雜誌的時候總會碰到幾個難字,尤其在歷史和科學雜誌有時跳過了幾個字就整篇都看不懂了!惰性很強的我覺得要逐個翻查超麻煩而剛好之前又研發了偽Word Wise,所以就順理成章寫了一個Chrome Extension給我自動翻譯,哈!

圖中文章來源:Science Alert

WHY?

Google有自動翻譯功能,而且英譯中其實翻譯得不錯,但我也有理由寫這個extension!

  • 想看原文
  • 整篇翻很容易出現爛翻譯,比沒翻更難看
  • 炫耀技術

p.s. 像這樣的文章就沒太大問題

圖中文章來源:Science Alert

TECH

Node.js翻譯伺服器

雖然是Chrome插件,但是還是要用伺服器的,因為翻譯的部分用了黑暗版Google Translate,是免費的,詳細運作就不解釋了,總之就是要用到伺服器請求 (ㆆᴗㆆ)

Chrome和擴充功能

因為是Chrome插件(擴充功能),所以當然要安裝Chrome或Chromium了

Difficulty模組

https://github.com/auphone/difficulty 我寫的找難字模組,詳情看這運用字頻數據分析英文字詞的難度

google-translate-api模組

https://www.npmjs.com/package/google-translate-api 免費Google翻譯API,請低調使用…

INSTALLATION

下載翻譯伺服器

Copy Code

git clone https://github.com/auphone/wordwise-translation-server.git
cd wordwise-translation-server
npm install

Build和運行

Copy Code

npm run build
node dist/index.js

然後下載extension

Copy Code

git clone https://github.com/auphone/wordwise-chrome-extension.git

到Google Chrome => 進入插件頁面 => 在右上角的開發者模組打勾 => 然後載入插件,位置在./wordwise-chrome-extension/

USAGE

先根據下面指示設定好插件,然後找一個網頁(最好是文章)按這個 插件圖示,然後神奇的事就發生了⋯ (∩^o^)⊃━☆゚.*・。

OPTIONS

在插件圖示右鍵可以找到Options,是一個很簡陋的頁面⋯

Server - 伺服器

  • 輸入翻譯伺服器的URL

Password - 伺服器密碼

  • 如果伺服器沒有設定密碼留空就好了

Language - 翻譯語言

  • Google支援的語言,默認當然是繁體中文囉…

Level - 難度

  • 有3個難度可以選擇,Level 1是最容易也是默認的選項

Auto translate - 換頁自動翻譯

  • 決定換頁的時候是自動翻譯還是按鍵再翻譯

TRICKS

用Difficulty模組分析難字

Difficulty模組可以把單詞拆分成不同等級,而且也可以過濾一些十分常見的字詞例如stop words,這樣可以提升閱讀體驗

只取<p>內的字

通常主要內容都是用<p>包住的,所以不必要的地方就不翻了,這樣也省去不少運算時間 ୧(๑•̀⌄•́๑)૭✧

用Regex拆字

用regex的原因是為了遷就拆字方式和保留有apostrophes的字,例如don'tI'm這些,利用/[^a-z'A-Z]+/g就能夠抽出整個英文字

程式是用以下的方法拆字的

Copy Code

var txts = $('p').text().split(' ');
for(var i in txts) {
    var txt = txts[i].replace(/[^a-z'A-Z]+/g, '').toLowerCase();
}

例如這句句子 I'm a boy.

假如不用Regex就會變成這樣了⋯

Copy Code

[
  "I'm",
  "a",
  "boy."
]

修改頁而的CSS

為了給翻譯騰出一點空間,這個插件會強行把line-height轉換成3em,然後利用:before插入翻譯到文字的上方,如果想知道更多可以參考Kindle手機版不支援Word Wise,所以我用自己方法做了一個 (ಠ_ಠ)

以下是會增加到頁面的CSS

Copy Code

body.ww-trans p {
  line-height: 3em;
}
.ww-trans-word { 
  position: relative; 
  text-decoration: underline;  
} 
.ww-trans-word:before {
  content: attr(data-before);
  position: absolute;
  top: -1.8em;
  left: 0;
  width: 200px;
  height: 0;
}

END

這個插件用起來真的不錯,至少使用大多數頁面都不太影響閱讀,要改善的地方可能就是更智能地偵測內容吧,我發現有些網頁幾乎沒有用<p>?!不過暫時應該是不會更新了…

( ⸝⸝⸝°_°⸝⸝⸝ )