{%hackmd BJqmTNgxD %} 翻譯・單字卡 === ## Chrome 擴充套件工作坊 --- <div class="d-flex"> <div class="flex-1">  </div> <div class="flex-2"> ## 西瓜 / PastLeo ### [https://pastleo.me/](https://pastleo.me/) #### [5xRuby.tw](http://5xruby.tw/) 工程師 </div> </div> --- ## 確認大家都有該有的東西 * [Chrome](https://www.google.com/chrome/) 最新板 * 程式碼編輯器 ([VS Code](https://code.visualstudio.com/) / [Sublime Text](https://www.sublimetext.com/) ...) * 這份投影片：[https://ppt.cc/fWS7Qx](https://ppt.cc/fWS7Qx) * [今天會用到的材料包](https://drive.google.com/file/d/1A8a1uWtcriLqD2oKWle6jbYP_qva_LFP/view?usp=sharing) --- ### DEMO -- 翻譯・單字卡 * 基於 [Google 翻譯 擴充套件](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb) 的單字卡建立功能 * 檢視、管理蒐集到的單字卡 * 透過剪貼簿把單字卡傳送到 [Quizlet](https://quizlet.com/create-set) --- ## 開始建立 Chrome 擴充套件 --- ### 如何建立，開始開發 chrome 擴充套件 #### [寫好的教學](https://pastleo.me/post/20200731-chromext-apis-word-cards#%E5%A6%82%E4%BD%95%E5%BB%BA%E7%AB%8B%EF%BC%8C%E4%B8%A6%E9%96%8B%E5%A7%8B%E9%96%8B%E7%99%BC%20chrome%20%E6%93%B4%E5%85%85%E5%A5%97%E4%BB%B6) ##### `icon.png` 在材料包裡有 --- ### 讓擴充套件說聲 `hello world` 在 `manifest.json` 中設定： ```json { ... "browser_action": { "default_popup": "popup.html" }, ... } ``` 點選擴充套件 icon 時顯示 `popup.html`，這功能叫做 [browserAction](https://developer.chrome.com/extensions/browserAction) ---  --- ## 開始做實際功能之前 ### 進行一下功能解析 #### 以及我們需要的擴充套件 API --- ### 基於 Google 翻譯擴充套件 * 安裝好 [Google translation 擴充套件](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb) * 設定為選取文字後立刻顯示翻譯 --- ### 基於 Google 翻譯建立單字卡 在任何網頁上瀏覽，把文字選取起來時 * 等待 Google 翻譯結果出現 * 在 Google 翻譯 DOM 元件上加上單字卡表單 * 填上使用者反白翻譯的內容作為單字定義 * 按下 `新增字卡` 存起來 --- ### 基於 Google 翻譯建立單字卡 要能在別人的網頁上搞事，需要透過擴充套件 #### [在瀏覽中的網頁上執行指定的 Javascript](https://pastleo.me/post/20200731-chromext-apis-word-cards/#%E5%9C%A8%E7%80%8F%E8%A6%BD%E4%B8%AD%E7%9A%84%E7%B6%B2%E9%A0%81%E4%B8%8A%E5%9F%B7%E8%A1%8C%E6%8C%87%E5%AE%9A%E7%9A%84%20Javascript) #### [Content Scripts](https://developer.chrome.com/extensions/content_scripts) ###### 來操作 [DOM API](https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model) --- ### 基於 Google 翻譯建立單字卡 要儲存單字卡， #### [擴充套件有專門的資料儲存媒介：](https://pastleo.me/post/20200731-chromext-apis-word-cards/#%E8%B3%87%E6%96%99%E5%84%B2%E5%AD%98%E5%8A%9F%E8%83%BD) #### [Storage API](https://developer.chrome.com/extensions/storage) --- ### Popup 檢視蒐集到的單字卡 * 點選擴充套件 icon 顯示 popup * [browserAction](https://developer.chrome.com/extensions/browserAction) * 顯示蒐集到的單字卡概要 * [Storage API](https://developer.chrome.com/extensions/storage) + [DOM API](https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model) --- ##### 順帶一提、 ### 單字卡儲存的資料結構 ```json { "words": { "word1": "definition 1", "word2": "definition 2" } } ``` --- ### 擴充套件 options 頁來複習單字卡 * [擴充套件 options 頁](https://developer.chrome.com/extensions/options#full_page) * 顯示單字卡以及答案 * 刪除、清空單字卡 * [Storage API](https://developer.chrome.com/extensions/storage) + [DOM API](https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model) * 按下 popup `打開複習頁面` 按鈕時開啟複習頁 * [擴充套件 Runtime API](https://developer.chrome.com/apps/runtime) 來取得複習頁 URL --- ### Popup 複製單字卡到剪貼簿 * [Quizlet](https://quizlet.com/create-set) 的匯入功能 * 在詞語和定義之間：Tab * 單詞卡之間：新的一行 (換行符號) * 剪貼簿部份就用 [Web DOM API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard) ``` 單字[tab]定義[換行符號]下個單字[tab]下個定義... ``` --- ## 開始實做吧！ ### 先從材料包複製 `style.css` ###### 可以自行超車 --- ### `contentScript.js` * `await waitForTranslationBubble()` * `addWord(word, definition)` * `formTemplate` * [MDN: `<template />`](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/template#%E7%A4%BA%E4%BE%8B) * [MDN: `ShadowDOM`](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#Basic_usage) --- ### `popup.html` & `popup.js` #### 顯示單字集概要 ```javascript chrome.storage.local.get(['words'], result => { console.log(result.words); } ); ``` --- ### `review.html` & `popup.js` #### `打開複習頁面` 按鈕 ```javascript chrome.runtime.getURL('review.html') ``` --- ### `review.js` * 顯示單字卡 * `cardTemplate` * 刪除單字卡 * 清空單字卡 ```javascript chrome.storage.local.set({ words }, () => { // ... }) ``` --- ### `popup.js` #### `複製單字卡到剪貼簿` 按鈕 #### 一個簡單的運算，大家想想看 --- ### 大功告成囉！ <div class="d-flex"> <div class="flex-2">  </div> <div class="flex-3">  </div> </div> --- ### 做出變化 / 製作心得 / Q&A ## 上來發表的，有獎品可拿！