# WebExtensions 初學動手做 - 第一次寫跨瀏覽器擴充套件就上手

![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0JmrkJi6kA-GUNXf%2F17861591_10211120779688479_5078185565232723676_n%E6%8B%B7%E8%B2%9D.jpg?generation=1586302919529330\&alt=media)

* **講者**
  * **Ett Chung /ettoolong**
* **活動共筆**
* **簡報**
  * [**簡報**](https://github.com/jenhsuan/community-course-activity/tree/650eaae0ee8784462ac45d482c8d619d985986da/goo.gl/NWQ9sN/README.md)
  * [**Source code**](https://github.com/jenhsuan/community-course-activity/tree/650eaae0ee8784462ac45d482c8d619d985986da/goo.gl/rpGuWt/README.md)
* **內容**
  * **使用工具:** [**Firefox Developer Edition**](https://www.mozilla.org/zh-TW/firefox/developer/)
  * **Mozilla**
    * 跨瀏覽器
    * [MozTW](https://moztw.org/events/)
  * **Firefox add-on**
    * Legacy extension (XUL overlay)
    * Jetpack/ add-on SDK (無需重啟)
    * webextension 
      * firefox 57 -> 停止前兩個架構
  * **Electrolysis (e10s)**
    * multiprocess firefox
    * background.js 
    * content script
    * page script
  * **web-ext**
    * 安裝web-ext (for mac)

      `sudo npm install web-ext -g`
    * web-ext run

      ```
      web-ext run -f="/Applications/FirefoxDeveloperEdition.app" -p="dev-edition-default"
      --no-reload
      ```

      * open Tools > Web Developer > Browser Console to see logging

        ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0Jmtp4ViUFN6P1PG%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%884.36.03.png?generation=1586302919978493\&alt=media)
      * See the console log

        ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0JmvdFtClRJNJK2w%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%884.36.44.png?generation=1586302919233119\&alt=media)
    * web-ext build: build成zip檔
    * web-ext sign:
  * **Chrome**
    * 手動載入

      * chrome://extensions

      ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0JmxRrdMZlfbms-j%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%884.29.13.png?generation=1586302918958072\&alt=media)
  * **Example:** [**hello\_world**](https://github.com/ettoolong/WebExtensionsWorkshop/tree/master/hello_world)
    * 1.git clone
    * 2.cd to folder
    * 3.web-ext run -f="/Applications/FirefoxDeveloperEdition.app" -p="dev-edition-default"
  * **APIs**
    * webextendsion API
    * web API
  * **manifest.json**
    * 描述, 版號, 名稱等資訊
    * permission
  * **background.js**
  * **content script**
    * 僅能存取部分webextension API
    * manifest.json -> content\_scripts
  * **debugging**
    * <about:debugging>
  * **broswer action**
    * 在瀏覽器上加一個icon, 點擊後觸發

      ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0JmzH2uJVT_rLh36%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%883.41.10.png?generation=1586302920938064\&alt=media)

      ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0Jn0qsK_sUVL6T6c%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%883.37.09.png?generation=1586302920534806\&alt=media)

      ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0Jn2inOrMVknh0Hl%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%883.37.33.png?generation=1586302920420982\&alt=media)
  * **page action**
    * 在特定頁面才會生效

      ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0Jn4A94l_p8wR9G2%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%883.51.32.png?generation=1586302919704908\&alt=media)

      ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0Jn644Xl4O3BK7Bi%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%883.49.49.png?generation=1586302920903408\&alt=media)
  * **Context menu (copy\_plain\_text\_1)**
    * 在瀏覽器上按右鍵出現的選單\_page

      ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0Jn8SzCng4DGYOo1%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%884.02.44.png?generation=1586302920123757\&alt=media)
  * **Option\_ui (copy\_plain\_text\_2)**
    * 讓使用者調整設定值
    * page
    * open\_in\_tab

      ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0JnAo1TahXORZFJ4%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%884.06.40.png?generation=1586302921129194\&alt=media)
    * customize

      ![](https://2013763830-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G84X6WVKFNelLNo%2F-M4M0ILES0A5TyTg45ya%2F-M4M0JnC5c2yAjKokb9S%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-04-08%20%E4%B8%8B%E5%8D%884.12.40.png?generation=1586302919575281\&alt=media)
  * **Localization (多國語言)(copy\_plain\_text\_3)**
  * **Embedded webExtensions**
    * migrate to webExtension