owned this note   changed 6 years ago  
Linked with GitHub

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

由於場地問題，第二天我們移動到另一棟大樓啦！議程教室變動請見網站上的議程表。

歡迎來到 https://hackmd.io/@coscup/2019 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

點擊本頁上方的 開始用 Markdown 一起寫筆記！
手機版請點選上方 按鈕展開議程列表。

請從這裡開始

tags: COSCUP2019 IB306

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

Topic

  • WebExtension
  • Tools
  • Permission system

Example - first extention

剖析

  • mainfest.json

    • 主要定義寫在這裡面 ( 版號 、 icon ）
    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →

  • content script

    • 注入 CSS 跟 JS 在裡面
    • HTML 就是直接的呈現的頁面

  • background script

Example - 2

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 開發者頻道討論

Select a repo