# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET 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?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.