瀏覽器擴充套件工作坊（第一梯次） - Ett Chung
===

{%hackmd LcL4-VI0SGitSiINTuy4rA %}

> 請從這裡開始

###### tags: `COSCUP2019` `IB306`

投影片連結：https://goo.gl/hgoiVp
範例連結：goo.gl/M2DUsg (講者GitHub)

Topic
---
* WebExtension
* Tools
* Permission system

Example - first extention
---
- https://github.com/ettoolong/coscup2019-webextension-workshop/blob/master/manifest.json
- 第一個範例
- 會有紅框在版面上
- 
- `"matches": ["*://*.mozilla.org/*"],`
- 匹配到這個網址會執行 `"js": ["content-script.js"]`

剖析
---
- `mainfest.json`
- 主要定義寫在這裡面 ( 版號 、 icon ）
- 

- `content script`
- 注入 CSS 跟 JS 在裡面
- HTML 就是直接的呈現的頁面
- `background script`

Example - 2
---
- https://github.com/ettoolong/coscup2019-webextension-workshop/blob/v2/manifest.json
- 第二個範例
- 按完按鈕會變成綠色的
- 
- background.js
- 利用 sendMessage 去溝通 addListener 去接收

## Architecture
- 見 剖析
- Content sciprt: 沒有 HTML 的原因是，它直接就是針對當前的 DOM 操作
- Option page : 設定頁也是網頁 HTML
- 開分頁或是開啟一個頁面
- web accessible resources
- 要開放

Example - 3
---
- 名字、設定頁、權限、預設版本、在地化
- `_locales/語言版本/message.js`
- option
- storage
- API

## 推薦工具
- extension source viewer
- webExtension browser API polyfill
- 利用這個函式庫可以共用兩個 Chrome 跟 firefox

Example - 5
---
- 移除了引入library的部分，並新增三個檔案，可以install工具，目錄結構稍微不一樣。
- webextension-toolbox可即時看到修改內容

Permission
---
manifest可以看到這個套件安不安全，又分成API permission和Host permission。

課後補充
---
- Permission 指出了套件能夠作到哪些事情，不過不代表有高度權限的套件一定是惡意套件，
簡單的例子：一個用來修改 User-Agent 用的套件就通常會包含 <all_urls>, webRequest, webRequestBlocking 這三個權限，因為它要能夠把送到任意網站的 request 攔下來並修改，因此有這些權限是合理的，但同時此特性也可能被惡意套件利用。
經典案例：https://news.ycombinator.com/item?id=14888010

- 有其他問題歡迎到投影片裡面的 MozTW dev/add-on 開發者頻道討論