目錄
前言
一、瀏覽器插件的主要功能
二、插件的工作原理
插件結構
manifest.json
icons
background.js
content-scripts
三、插件例子
popup
popup.html
popup.js
styles.css
background.js
content-script.js
manifest.json
四、其它
前言
本文不做特殊說明，均在Manifest V3版本下說明
一、瀏覽器插件的主要功能
- 修改網頁內容
- 增強瀏覽器功能
- 與外部服務交互
- 開發者工具
二、插件的工作原理
插件結構
- manifest.json：插件配置文件
- background.js：后臺腳本
- content-script.js：注入頁面的腳本
- popup：彈窗UI
- options：插件設置頁面(可選)
- icons：插件圖標(必須)
- _locales：多語言支持(可選)
manifest.json
這是Chrome插件最重要也是必不可少的文件，用來配置所有和插件相關的配置，必須放在根目錄中。
下面是一個示例manifest.json，我們將以這個示例切入，逐步說明配置項：
{"manifest_version": 3,"name": "Run script automatically","description": "Runs a script on www.example.com automatically when user installs the extension","version": "1.0","icons": {"16": "images/icon-16.png","32": "images/icon-32.png","48": "images/icon-48.png","128": "images/icon-128.png"},"background": {"service_worker": "service-worker.js"},"content_scripts": [{"js": ["content-script.js"],"matches": ["http://*.example.com//"]}],"permissions": ["scripting", "activeTab"] }
- manifest_version：指定擴展程序使用的清單文件格式的版本，唯一支持的值是3
- name：插件名字
- version：插件版本號
- description：插件描述
- icons：插件圖標
- background：插件的“后臺腳本”
- content_scripts：用戶打開網頁時，使用的插入腳本
- permissions：啟用特定擴展API
icons
icons不同的鍵值，圖標會在不同的地方使用：
- 16：擴展程序頁面和上下文菜單中的圖標
- 32：Windows計算機需要此大小
- 48：顯示在"擴展程序"頁面上
- 128：會在安裝過程中和Chrome應用商店中顯示
background.js
在V3版本中
background.js其實就是“Service Worker”，Service Worker是插件的“核心處理腳本”(大腦)
Service Worker的三個特點:
- 無持久化運行：僅在需要時激活(如響應事件、處理消息)，閑置時會被瀏覽器終止，節省資源
- 無DOM訪問能力：不能直接操作DOM(document、window等對象不可用)，也不發使用alert、confirm等彈窗API
- 生命周期由瀏覽器管理：無需手動控制啟動 /?關閉，瀏覽器會根據事件自動調度
Service Worker的五個核心功能：
- 監聽瀏覽器級事件(chrome.runtime.onInstalled、chrome.tabs.onUpdated等)
- 作為插件各組件的通信中樞
- 處理跨域請求
- 管理插件狀態
- 調度定時任務
content-scripts
用于操作網頁，它一般具有下面五個能力：
- 修改網頁DOM：可以直接讀取、修改當前網頁的HTML結構、CSS樣式或文本內容。
- 獲取網頁信息：能夠提取網頁中的數據(文本、圖片鏈接等等)，并通過插件的其他部分進行處理或上傳
- 注入交互邏輯：可以為網頁添加自定義的交互功能，比如添加新按鈕、綁定事件監聽，實現網頁原本沒有的功能
- 隔離性運行：雖然能訪問網頁DOM，但內容腳本運行在獨立的沙盒環境中，不能直接訪問網頁自身的JavaScript變量/函數，也不能直接訪問插件的后臺腳本變量，安全性高
- 跨域請求能力：相比普通網頁腳本，內容腳本可以通過插件的后臺頁面間接發起跨域請求
三、插件例子
整個插件結構如下：
-extension-icons-logo.png-popup-popup.html-popup.js-styles.css-backrgound.js-content-script.js-manifest.jsonpopup
popup.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Page Info</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="container"><h1>當前頁面信息</h1><p id="title">標題：加載中...</p><p id="url">URL：加載中...</p><button id="changeBg">隨機背景色</button></div><script src="popup.js"></script>
</body>
</html>popup.js
// 獲取當前標簽頁信息
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {const tab = tabs[0];document.getElementById('title').textContent = `標題：${tab.title}`;document.getElementById('url').textContent = `URL：${tab.url}`;
});// 點擊按鈕修改頁面背景色
document.getElementById('changeBg').addEventListener('click', () => {const colors = ['#ffcccc', '#ccffcc', '#ccccff', '#ffffcc'];const randomColor = colors[Math.floor(Math.random() * colors.length)];// 向內容腳本發送消息chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {chrome.tabs.sendMessage(tabs[0].id, { action: "changeBg", color: randomColor });});
});styles.css
body {width: 300px;padding: 10px;font-family: Arial, sans-serif;
}
button {padding: 8px;background: #4CAF50;color: white;border: none;cursor: pointer;
}background.js
// Manifest V3使用Service Worker，無需常駐后臺
console.log("Service Worker已加載");content-script.js
// 監聽來自popup的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {if (request.action === "changeBg") {document.body.style.backgroundColor = request.color;}
});manifest.json
{"name": "Page Info Viewer","version": "1.0","manifest_version": 3,"description": "顯示當前頁面的標題和URL，并修改背景色","permissions": ["activeTab", "scripting"],"icons": {"16": "icons/logo.png", "48": "icons/logo.png", "128": "icons/logo.png" },"action": {"default_popup": "popup/popup.html"},"background": {"service_worker": "background.js"},"content_scripts": [{"matches": ["<all_urls>"],"js": ["content-script.js"]}]
}效果：
四、其它
如果您對該文感興趣，可以參考我的專欄：
https://blog.csdn.net/zheshiyangyang/category_13023388.html
：5.抽象類和接口)
 方法詳解)
 方法（1）)
