{%hackmd BJqmTNgxD %}
翻譯・單字卡
===
## Chrome 擴充套件工作坊
---
<div class="d-flex">
<div class="flex-1">
![pastleo.](https://i.imgur.com/o9wogYS.png)
</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)
---
![](https://i.imgur.com/Yn6TzhL.png)
---
## 開始做實際功能之前
### 進行一下功能解析
#### 以及我們需要的擴充套件 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">
![](https://i.imgur.com/5F0RyAk.png)
</div>
<div class="flex-3">
![](https://i.imgur.com/poHfqua.png)
</div>
</div>
---
### 做出變化 / 製作心得 / Q&A
## 上來發表的,有獎品可拿!
{"metaMigratedAt":"2023-06-15T11:56:03.484Z","metaMigratedFrom":"YAML","title":"翻譯・單字卡 - Chrome 擴充套件工作坊","breaks":"true","slideOptions":"{\"spotlight\":{\"enabled\":true,\"size\":80,\"presentingCursor\":\"default\",\"toggleSpotlightOnMouseDown\":false,\"spotlightOnKeyPressAndHold\":90,\"initialPresentationMode\":true,\"disablingUserSelect\":false,\"fadeInAndOut\":500}}","contributors":"[{\"id\":\"0eb274f7-a3a4-4c8e-b0d4-e5c08eaf9e72\",\"add\":9493,\"del\":4474}]"}