> For the complete documentation index, see [llms.txt](https://jen-hsuan-hsieh.gitbook.io/community-course-activity/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jen-hsuan-hsieh.gitbook.io/community-course-activity/chapter6-web/webextensions-chu-xue-dong-shou-zuo-di-yi-ci-xie-kua-liu-lan-qi-kuo-chong-tao-jian-jiu-shang-shou.md).

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

![](/files/-M4M0JmrkJi6kA-GUNXf)

* **講者**
  * **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

        ![](/files/-M4M0Jmtp4ViUFN6P1PG)
      * See the console log

        ![](/files/-M4M0JmvdFtClRJNJK2w)
    * web-ext build: build成zip檔
    * web-ext sign:
  * **Chrome**
    * 手動載入

      * chrome://extensions

      ![](/files/-M4M0JmxRrdMZlfbms-j)
  * **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, 點擊後觸發

      ![](/files/-M4M0JmzH2uJVT_rLh36)

      ![](/files/-M4M0Jn0qsK_sUVL6T6c)

      ![](/files/-M4M0Jn2inOrMVknh0Hl)
  * **page action**
    * 在特定頁面才會生效

      ![](/files/-M4M0Jn4A94l_p8wR9G2)

      ![](/files/-M4M0Jn644Xl4O3BK7Bi)
  * **Context menu (copy\_plain\_text\_1)**
    * 在瀏覽器上按右鍵出現的選單\_page

      ![](/files/-M4M0Jn8SzCng4DGYOo1)
  * **Option\_ui (copy\_plain\_text\_2)**
    * 讓使用者調整設定值
    * page
    * open\_in\_tab

      ![](/files/-M4M0JnAo1TahXORZFJ4)
    * customize

      ![](/files/-M4M0JnC5c2yAjKokb9S)
  * **Localization (多國語言)(copy\_plain\_text\_3)**
  * **Embedded webExtensions**
    * migrate to webExtension