閱讀英文或日文的網路文章時,我經常遇到想要日後學習的單字。但將它們複製到筆記中會打斷閱讀,因此我開發了一款瀏覽器擴充功能:選取文字並按下快捷鍵,內容就會翻譯成中文並存入 Notion,方便日後複習。

先規劃,再動手

我請 AI 在規劃確定之前不要撰寫任何程式,每個決定都經過我確認後才進入下一步。其中有三個選擇決定了這個工具的樣貌:

  • 從 Mac 捷徑改為擴充功能。 我最初使用 macOS 捷徑,後來改為瀏覽器擴充功能,以便分享給其他人使用。
  • 使用 DeepL 翻譯。 翻譯結果較為自然,也支援繁體中文。
  • 以 Notion 作為單字本。 每位使用者輸入自己的 API 金鑰,因此各自的單字資料互相獨立,也不會替他人負擔翻譯費用。

運作方式

在網頁上選取任何文字,按下 Ctrl+Y,卡片便會顯示原文、發音與翻譯。使用者可以將內容存入 Notion,或點擊卡片以外的任何地方關閉。

細節

已儲存的單字,按鈕呈停用狀態

避免重複儲存。 已儲存過的單字,按鈕會停用並顯示已儲存。比對時會忽略大小寫與多餘的空格。

英文的 IPA 音標與日文的平假名,搭配播放按鈕

兼顧發音與讀音。 英文顯示 IPA 音標,日文顯示平假名,並提供播放按鈕,以瀏覽器內建的語音朗讀。

開發中遇到的小問題

  • 快捷鍵已被占用。 Cmd+Y 會開啟 Chrome 的瀏覽紀錄,導致擴充功能無法接收指令,因此我改用 Ctrl+Y。
  • 按鈕被部分網站遮擋。 在使用自訂游標的網站上,播放按鈕上方多了一層看不見的圖層。我讓卡片上的按鈕優先接收點擊。

下一步

  • 上架至 Chrome 與 Edge 擴充功能商店,目前還需要圖示與隱私權政策頁面。
  • 開發桌面 App,讓瀏覽器以外的文字也能使用,例如 PDF 與電子郵件。

我的收穫

身為自己的使用者,我最重視的是不打斷閱讀。幾乎每個決定都回歸到這一點:使用快捷鍵而非選單,以及一鍵即可關閉的卡片。

角色

設計與開發(搭配 AI)

公司

Personal

時間

2026 年 6 月

類型

Chrome 擴充功能