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

• 講者

  • Ett Chung /ettoolong

• 活動共筆

• 簡報

  • 簡報

  • Source code

• 內容

  • 使用工具: Firefox Developer Edition

  • Mozilla

    • 跨瀏覽器

    • MozTW

  • 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

        
      • See the console log

        
    • web-ext build: build成zip檔

    • web-ext sign:

  • Chrome

    • 手動載入

      • chrome://extensions

      
  • Example: 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, 點擊後觸發

      

      

      
  • page action

    • 在特定頁面才會生效

      

      
  • Context menu (copy_plain_text_1)

    • 在瀏覽器上按右鍵出現的選單_page

      
  • Option_ui (copy_plain_text_2)

    • 讓使用者調整設定值

    • page

    • open_in_tab

      
    • customize

      
  • Localization (多國語言)(copy_plain_text_3)

  • Embedded webExtensions

    • migrate to webExtension