第二步：深入理解 Chrome 擴展的 manifest.json 配置文件

上一次我們已經著手完成了一個自己的瀏覽器插件，鏈接在這里：我是鏈接

在本篇博客中，我們將更詳細地探討 Chrome 擴展中的 manifest.json 文件。這個文件是每個瀏覽器擴展不可或缺的核心，它不僅定義了擴展的基本元數據，而且還規定了擴展的行為和權限。我們將深入探討各種常用配置，并提供具體的代碼示例以幫助您更好地理解和運用這些配置。

manifest.json 基本結構

每個 Chrome 擴展的 manifest.json 文件都必須包含以下基本字段：

• manifest_version (必需)：指明 manifest 文件的版本。目前版本為 3。
• name (必需)：擴展程序的名稱。
• version (必需)：擴展程序的版本號。

一個簡單的 manifest.json 文件看起來像這樣：

{"manifest_version": 3,"name": "Sample Extension","version": "1.0"
}

常用配置詳解

描述和圖標

• description：對擴展功能的簡短描述。
• icons：一個對象，定義了一系列圖標，這些圖標將在擴展目錄、地址欄旁的擴展按鈕以及其他界面中使用。

"description": "A simple Chrome extension example.",
"icons": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"
}

背景腳本

• background：包含 service_worker 指向的腳本在擴展安裝后立即持續運行，通常用于處理事件監聽和維持擴展的生命周期。

"background": {"service_worker": "background.js"
}

彈出頁面

• action：定義擴展的默認彈出行為，包括彈窗頁面路徑與默認圖標。

"action": {"default_popup": "popup.html","default_icon": "icon48.png"
}

權限

• permissions：擴展請求訪問的 API 權限和其他特權。

"permissions": ["storage","tabs","http://*/*","https://*/*"
]

內容腳本

• content_scripts：定義在特定頁面自動注入的腳本和CSS。你可以指定腳本和CSS應應用到的網頁URL模式。

"content_scripts": [{"matches": ["http://*.example.com/*", "https://*.example.com/*"],"js": ["content.js"],"css": ["style.css"]}
]

選項頁面

• options_page 或 options_ui：指定一個HTML文件，用于配置擴展的選項。

"options_ui": {"page": "options.html","open_in_tab": true
}

主機權限

• host_permissions：允許擴展訪問列表中的網站。

"host_permissions": ["http://*/*","https://*/*"
]

小結

manifest.json 文件是瀏覽器擴展的核心，通過它可以精細地控制擴展的各種行為和權限設置。了解并正確使用這些配置項將幫助你高效地開發功能復雜的擴展程序。記得根據擴展的特定需求選擇合適的配置項，以確保功能的實現和用戶的安全。

希望這篇文章能幫助你更深入地理解和使用 manifest.json，并創建出功能強大、用戶友好的 Chrome 擴展！