Chrome擴充套件的核心：manifest 檔案（中）

大家好，我是 dom 哥。我正在寫關於 Chrome 擴充套件開發的系列文章，感興趣的可以 點個小星星 。

在上一篇中已經完成了 Chrome 擴充套件的雛形，本篇接著介紹 manifest 中的可選欄位，完善擴充套件的細節。

manifest 中的可選欄位

"content_scripts"

向 web 頁面注入 JavaScript 和 CSS。可以說這是 Chrome 擴充套件的靈魂。當指定 content_scripts 後，每當頁面載入時，content_scripts 也將隨之載入。

"content_scripts": [
   {
     "css": ["content-style.css"],
     "js": ["content-script.js"],
     "matches": ["<all_urls>"],
     "run_at": "document_idle", // optional
     "world": "ISOLATED" // optional
   }
 ]

content_scripts 裡的設定項解釋：

• "css"：指定注入的 css 樣式檔案
• "js"：指定注入的 js 指令碼檔案

值得注意的是，css 和 js 指定的檔案路徑必須是相對路徑！總是相對於擴充套件根目錄！

• "matches"：用於指定往哪些頁面注入 css 和 js，必填項。

  其值並非普通的 url，而是滿足如下結構的匹配模式。

  <scheme>://<host>/<path>
  

  • scheme：指明協定格式，只能是以下幾種

    • http
    • https
    • 萬用字元 *, 表示 http 或 https
    • file

  • host：指明主機名。支援萬用字元 *，但有限制，萬用字元 * 的屁股後面必須跟 . 或 /！也就是隻有以下兩種使用方式

    • *.example.com 匹配子域
    • */ 匹配所有域

  • path：指明匹配的網址路徑。/* 表示匹配所有路徑。

  特殊 case： "<all_urls>" 匹配所有頁面！一般，額，簡單粗暴，就用這個