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

Chrome 在全球瀏覽器市場份額獨占 6 成，無論是對普通用戶還是開發者，都是電腦里的必備利器。Chrome 無論是在性能還是 UI 交互方面都非常出色，而 Chrome 擴展則為開發者提供了接口，讓開發者有能力自己編寫代碼使自己的 Chrome 更強大，更加定制化。

每個 Chrome 擴展項目的根目錄中都必須有一個 manifest.json 文件，即清單文件。manifest 里會記錄關于擴展的重要元數據、聲明權限以及指定在網頁和后臺中運行的文件等等。

最簡單的 Chrome 擴展項目

新建一個 crx-demo 目錄，在里面新建一個 manifest.json 文件，目錄結構如下：

crx-demo
└── manifest.json

這就是一個最簡單的 Chrome 擴展項目了！接下來就是不斷豐富它的細節。

manifest 字段最小集

manifest 大約有 20 多個配置項，但大部分都是可選配置。必須的配置項有且僅有下面 3 個！

{
  "manifest_version": 3,
  "name": "CRX Demo",
  "version": "1.0.0"
}

是不是似曾相識，像不像前端項目里無人不知的 package.json 文件！

先不用追究每個字段的深層含義，這個稍后會逐個解釋。接下來在 Chrome 里打開管理擴展程序 chrome://extensions/ 直接把 crx-demo 拽過來扔進去。或者你也可以 加載已解壓的擴展程序。

在擴展程序里就能看到這個擴展了??

manifest 支持配置的字段

必須的字段

"manifest_version"

指定 manifest 的版本。不同的版本支持的配置字段不一樣，格式也不一樣，之前是 2，現在是 3，將來會是 4。區別有點像通信領域的 3G，4G，5G 概念。

"manifest_version": 3

V2 版本的擴展 Chrome 在2024年6月份會停止支持，屆時 V2 版本的擴展將無法加載。將來可能會迭代到 V4 版本，但官方尚沒有消息。因此目前及未來很長時間將都是 V3 版本的 Chrome 擴展。

"name"

擴展名字。**沒啥好說的。有長度限制，最多 45 個字。

"name": "your extension name"

"version"

擴展的迭代版本。這個迭代版本的格式很有講究，不同于 package.json 里的 version 那般隨意。

這里 version 的格式和 IP 地址倒是很像。要求如下：

• 最少 1 個最多 4 個整數用點號連接而成
• 每部分整數值域為 0-65535

下面是一些支持使用的版本示例：

"version": "1"
"version": "1.0"
"version": "2.10.2"
"version": "3.1.2.4567"

之所以這樣設計，是為了方便 Chrome 擴展的自動更新。

推薦的字段

"description"

擴展的描述。一個好的描述是成功推銷的第一步。最多 132 個字。

"description": "擴展的描述"

"icons"

擴展的圖標。一圖勝萬言。

"icons": {
  "48": "icon48.png",
  "128": "icon128.png"
}

官方建議至少應該提供 128x128 和 48x48 兩個尺寸的圖標。128x128 的用于 Chrome Web Store，48x48 的用于管理擴展頁面(chrome://extensions)。

值得注意的是，不支持使用 WebP 和 SVG 格式的圖標。其他的格式 PNG，JPEG，GIF，ICO，BMP 都是支持的！

繼續完善細節，給 manifest.json 加上 "description" 和 "icons" 字段

+ "description": "擴展的描述"
+ "icons": {
+   "48": "icon48.png",
+   "128": "icon128.png"
+ }

在 chrome://extensions 刷新擴展，可以看到已經變成了這個樣子：

值得一提的是，"description" 和 "icons" 是你往 Chrome Web Store 發布擴展時必填的兩個字段！

可選的字段

到目前為止，這個擴展還沒有任何用處 ??，只是看上去有了點雛形。

在下一篇將詳細介紹 manifest 幾個強大的可選項，它們將為 Chrome 擴展注入靈魂：

• "content_scripts": 向 web 頁面注入 JavaScript 和 CSS。
• "background": 以 service worker 形式運行后臺服務。
• "permissions": 權限管理，有些功能需要用戶授權才能獲得。

覺得不錯可以點個小星星支持一下??

總結

以上是生活随笔為你收集整理的Chrome扩展的核心：manifest 文件（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。