[推坑] 分享自己寫的英文學習chrome extension

[專案分享]

在四年前我曾經在 ptt 上面發表了一篇關於單字學習的 side project。

內容是刻一個網頁介面來建立自己的單字學習庫，可以將自己在網路文章學習到的單字和例句輸進單字庫，然後在複習的介面上隨機跳出自己曾經加入的例句進行複習。

https://www.ptt.cc/Soft_Job/E.Qr8mDDWgSI8E

結果我在版友的留言發現這功能 anki 已經幫我都做掉了，而且比我做的好多了XD

但因為 anki 原本的預設介面比較陽春，並不是我想要從例句複習生字的模式，所以我就想以 anki 為基礎建立一個我自己的單字學習工具。

後來掙扎加耍廢了四年XD，我總算是做出了一個雛形出來，我做了一個可以方便加入例句和生字到 anki 的 chrome extension。

這次專案的介面跟我之前的 project 非常相像，但是完全變成了 anki 的版本，想說對於會在網路上閱讀文章學習英文的人可能有用，就貼上來分享了。

這次專案的 github 連結：
https://github.com/shnovaj30101/shno_word_card_extension

已上架的 chrome extension 連結：
https://tinyurl.com/5at48ujk

（一）什麼是 anki ?

anki 簡單來說就是一個電子化的單字卡，不同的點在於它採用 SRS 演算法來安排每張單字卡出現的時間點，每張單字卡主要根據複習次數來決定下次出現的間隔時間。

一般來說複習越多次，記憶就越鞏固，所以下次出現的時間就會越長，並不會有卡片加越多，複習越繁重的情況出現。

anki 的設計看起來簡單，但卻非常大的提升了我們對於單字的記憶成效，如果用了 anki，記憶就變成了一個選擇，而不是一個模糊的概率事件。

簡單來說就是你要記憶的東西加進 anki，乖乖複習，這個東西一定記得起來，這個記得起來的時間甚至可以用年的單位去計算。

所謂的乖乖複習，也就只是在通勤或是任何的零碎時間，拿起手機點一點順過幾張單字卡就行了，既無腦又能填補人生各種無意義的時間碎片，真的很方便。

至於如何將 anki 應用在單字之外的知識學習，那又是另一個需要精進的課題，關於這方面的實踐，有一篇我覺得目前講的最好的文章，我把連結貼在下面：
https://zhuanlan.zhihu.com/p/65131722

對於系統的支援 anki 在 mac / windows / linux 都有桌面應用程式可以下載，ios / android 也用對應的 app。

在網頁上也有 ankiweb 可以使用，除了 ios 的 app 需要付費（約台幣 800 多），其他的都是免費的，如果免費仔想在 ios 上面用 anki，可以開瀏覽器使用 ankiweb。

但為了支持開發者，而且我會拿 anki 紀錄我從生活或書上所學到的知識，所以我是直接敗下去了，畢竟這是個很有意義的投資。

anki 在不同的裝置上面都能彼此同步，他是統一同步到 ankiweb 的個人帳號，所以要啟用同步功能，要先在 ankiweb 上面辦個帳號。

另外 anki 是 open source，所以有很多有用的 anki plugin 可以使用。

比如說有幫單字卡加入聲音的 AwesomeTTS，或是讓 anki 可以用程式進行操作的 ankiConnect，都是很不錯用的 plugin。

另外也可以用前端語言設計 anki 單字卡的介面 template，我現在開發的 chrome extension 就是搭配我自己設計的介面 template 來新增單字卡。

（二）如何使用這個 extension？

(1) 下載 anki
https://apps.ankiweb.net/

(2) 申請 anki 帳號
https://ankiweb.net/account/signup

(3) 下載 chrome extension 插件
https://tinyurl.com/5at48ujk

(4) 照著以下教學進行設定與使用
https://www.youtube.com/watch?v=hPJ2ZEg-lAc

（三）這個 extension 的優點

稍微研究了一下網友使用 anki 的方式，大部分人會選擇直接手動製卡，有些則是使用另一個我也覺得很好用的 chrome extension 叫做在线词典助手（以下簡稱 ODH）：
https://tinyurl.com/bdfd8kcz

ODH 的功能真的很齊全，code 結構也寫得不錯，我在寫這個 side project 的時候也借鏡了很多他的專案架構。

我的 extension 和 ODH 的適用情境都是在網頁上閱讀國外文章的時候，可以針對不熟悉的單字，以例句的形式進行快速的製卡。

但在細節的使用情境還是有一點不一樣，ODH 是以一個單字為單位，也就是一張卡片考一個單字，但我是一個例句為單位，所以一張卡片可能會考多個單字（若例句內包含多個生字）。

雖然很多人提到一張卡片只能包含一個知識點，所以以一張卡片考一個單字是最好的。

但在我的學習經驗中，一個例句才是一個知識點，這些生字和他們共同組成的例句才是一個完整的情境。

況且當一個例句包含三個需要學習的生字，若我們分開製成三個卡，當在複習這個例句的時候，使用者當下只會看到其中一個生字 A 的答案，如果更不熟的是另一個生字 B，沒有辦法即時看到該生字 Ｂ 的答案是會降低學習體驗的。

ODH 優勢在於可以快速的查閱單字語發音，但在自由度上，中文翻譯好像只能使用他查閱的結果，不能用手 key。

我的 extension 雖然沒有自動查閱的功能，但單字形式和中文翻譯可以由使用者自己決定。

這裡並沒有說要和 ODH 一爭高下，相反的這兩個 extension 還可以互相輔助使用，查閱單字解釋可以用 ODH，然後用我的 extension 自行決定真正的題目內容。

另外 ODH 還有一個缺點是當生字是某個單字罕見的變體，ODH 就沒辦法顯示出正確的中文翻譯，甚至連浮動畫面都無法出現。

或是當題目是一個片語的時候，ODH 目前的功能好像也不支援，這樣我的 extension 提供的使用者自由度至少能順利的製卡。

（四）未來的開發方向

這個 extension 還有幾個可以持續進步的方向：

(1) 針對例句生成各種口音的語音，可能考慮用 anki 的 plugin 做實現

(2) 目前的 popup 介面只能點擊單個單字增加中文翻譯，沒有辦法選擇片語或是某段文字（雖然還是能手 key 單字的文字框讓他變成片語形式）

但如果能把點擊變成框選的形式，就能學習非空白分隔的語言了（ex. 中文和日文）

(3) 結合 OCR，那就可以將紙本的資料拍成圖片，自動辨識出文字，然後利用這個 extension 加到 anki，但目前還沒想好實際上要怎麼做

感謝大家花時間閱讀，歡迎大家試用看看並提供各種意見

--