從零開發Chrome廣告攔截插件：開發、打包到發布全攻略

想打造一個屬于自己的Chrome插件，既能攔截煩人的廣告，又能優雅地發布到Chrome Web Store？別擔心，這篇教程將帶你從零開始，動手開發一個功能強大且美觀的廣告攔截插件，涵蓋編碼、打包和上架的全過程。無論你是新手還是老司機，跟著這篇指南，保證你能輕松上手，做出一個讓人驚艷的小工具！

1 開發你的廣告攔截插件：從創意到代碼實現

開發Chrome插件的第一步是明確功能：我們要實現一個可切換開關、支持自定義規則的廣告攔截器。讓我們一步步把創意變成現實！

1.1 準備開發環境與文件結構

動手前，先把工具和文件準備好，就像搭積木前要整理好零件。

1.1.1 選擇IDE

推薦工具：Visual Studio Code（簡稱VS Code），輕量且支持Chrome調試插件。
為什么選它：內置終端、代碼高亮、擴展豐富，簡直是開發插件的神器！

1.1.2 創建項目文件夾

目錄結構：新建一個名為AdBlocker的文件夾，包含以下文件：

AdBlocker/
├── manifest.json       # 插件的核心配置文件
├── background.js       # 后臺腳本，處理攔截邏輯
├── popup.html          # 彈出窗口界面
├── popup.js            # 彈出窗口邏輯
├── options.html        # 設置頁面
├── options.js          # 設置頁面邏輯
└── images/             # 圖標文件夾├── icon16.png      # 16x16像素圖標├── icon48.png      # 48x48像素圖標└── icon128.png     # 128x128像素圖標

1.2 編寫核心文件

現在，拿起鍵盤，開始敲代碼吧！

1.2.1 配置`manifest.json`

作用：這是插件的“身份證”，告訴Chrome你的插件是誰、能干啥。
代碼示例：

{"manifest_version": 3,"name": "Ad Blocker with Toggle","version": "1.0","description": "A customizable ad blocker","permissions": ["declarativeNetRequest","storage","downloads"],"host_permissions": ["<all_urls>"],"action": {"default_popup": "popup.html","default_icon": {"16": "images/icon16.png","48": "images/icon48.png","128": "images/icon128.png"}},"background": {"service_worker": "background.js"},"options_page": "options.html"
}

亮點：Manifest V3是最新標準，支持Service Worker，權限聲明清晰。

1.2.2 實現后臺邏輯background.js

功能：攔截廣告請求，根據用戶設置動態更新規則。
代碼示例：

const defaultRules = [{ id: 1, priority: 1, action: { type: "block" }, condition: { urlFilter: "||example-ads.com^", resourceTypes: ["script"] } }
];function updateRules(isEnabled, customAdList = []) {const rules = isEnabled ? [...defaultRules,...customAdList.map((url, index) => ({id: index + 2,priority: url.startsWith("@@") ? 2 : 1,action: { type: url.startsWith("@@") ? "allow" : "block" },condition: { urlFilter: url.startsWith("@@") ? url.slice(2) : url, resourceTypes: ["script", "image"] }}))] : [];chrome.declarativeNetRequest.updateDynamicRules({removeRuleIds: Array.from({ length: defaultRules.length + customAdList.length }, (_, i) => i + 1),addRules: rules});
}chrome.runtime.onInstalled.addListener(() => {chrome.storage.sync.get(["isEnabled", "customAdList"], (data) => {updateRules(data.isEnabled !== false, data.customAdList || []);});
});chrome.runtime.onMessage.addListener((message) => {if (message.action === "updateRules") {chrome.storage.sync.get("customAdList", (data) => {updateRules(message.isEnabled, data.customAdList || []);});}
});

1.2.3 打造炫酷的彈出窗口popup.html

功能：提供開關按鈕和跳轉設置的入口。
代碼示例：

<!DOCTYPE html>
<html>
<head><title>Ad Blocker</title><style>body { width: 250px; padding: 15px; font-family: Arial, sans-serif; background: #f5f5f5; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }h2 { font-size: 20px; color: #333; text-align: center; }#toggleButton { width: 100%; padding: 12px; font-size: 16px; border: none; border-radius: 5px; background: #007bff; color: white; }#toggleButton:hover { background: #0056b3; }a { display: block; text-align: center; color: #007bff; text-decoration: none; }a:hover { color: #0056b3; text-decoration: underline; }</style>
</head>
<body><h2>Ad Blocker</h2><button id="toggleButton">Enable Ad Blocking</button><a href="options.html" target="_blank">Edit Ad List</a><script src="popup.js"></script>
</body>
</html>

菜單效果圖如下：

請添加圖片描述

1.2.4 添加交互邏輯popup.js

JavaScript （英語）
document.addEventListener("DOMContentLoaded", () => {const toggleButton = document.getElementById("toggleButton");chrome.storage.sync.get("isEnabled", (data) => {toggleButton.textContent = data.isEnabled !== false ? "Disable Ad Blocking" : "Enable Ad Blocking";});toggleButton.addEventListener("click", () => {chrome.storage.sync.get("isEnabled", (data) => {const newState = !data.isEnabled;chrome.storage.sync.set({ isEnabled: newState }, () => {toggleButton.textContent = newState ? "Disable Ad Blocking" : "Enable Ad Blocking";chrome.runtime.sendMessage({ action: "updateRules", isEnabled: newState });});});});
});

1.2.5 美化設置頁面options.html與options.js

功能：支持規則編輯、導入導出。
代碼示例（精簡版）：

HTML格式
<!DOCTYPE html>
<html>
<head><title>Ad Blocker Options</title><style>body { width: 700px; padding: 20px; font-family: Arial, sans-serif; background: #f5f5f5; }#adList { width: 100%; height: 400px; border-radius: 5px; }button { padding: 12px 24px; border-radius: 5px; background: #007bff; color: white; }button:hover { background: #0056b3; }</style>
</head>
<body><h1>Edit Ad Block List</h1><textarea id="adList"></textarea><button id="saveButton">Save</button><button id="exportButton">Export</button><button id="importButton">Import</button><input type="file" id="importFile" accept=".txt"><script src="options.js"></script>
</body>
</html>

效果圖如下：

請添加圖片描述

實現按鈕邏輯代碼：


document.addEventListener("DOMContentLoaded", () => {const adList = document.getElementById("adList");const saveButton = document.getElementById("saveButton");if (!adList || !saveButton) return;chrome.storage.sync.get("customAdList", (data) => {adList.value = (data.customAdList || []).map(url => url.startsWith("@@||") ? url.replace("@@||", "@@").replace("^", "") : url.replace("||", "").replace("^", "")).join("\n");});saveButton.addEventListener("click", () => {const formattedList = adList.value.split("\n").map(domain => domain.startsWith("@@") ? `@@||${domain.slice(2)}^` : `||${domain}^`);chrome.storage.sync.set({ customAdList: formattedList }, () => {chrome.runtime.sendMessage({ action: "updateRules", isEnabled: true });});});
});

2 測試與打包：讓插件準備好“出道”

代碼寫好后，別急著發布，先測試一下，然后打包成正式文件。

2.1 本地測試

步驟：
打開chrome://extensions/，啟用“開發者模式”。
點擊“加載已解壓的擴展程序”，選擇AdBlocker文件夾。
點擊圖標，測試開關和規則編輯功能。
檢查點：控制臺無錯誤，廣告被攔截。
測試正常，效果圖如下：
請添加圖片描述

2.2 打包為ZIP文件

方法1：Chrome打包：
在chrome://extensions/點擊“打包擴展”。
選擇AdBlocker文件夾，生成.crx和.pem文件。
將.crx改名為.zip。
方法2：手動壓縮：
用壓縮軟件將AdBlocker文件夾打包為AdBlocker.zip，確保根目錄有manifest.json。

3 發布到Chrome Web Store：讓全世界用上你的插件

是時候讓你的插件閃亮登場了！

3.1 創建開發者賬戶

步驟：
訪問 Chrome Web Store Developer Dashboard。
用Google賬戶登錄，支付$5注冊費。
同意開發者條款。

3.2 上傳與發布

詳細流程：
點擊“添加新項目”，上傳AdBlocker.zip。
填寫信息：
名稱：Ad Blocker with Toggle
名稱：帶切換的廣告攔截器
描述：A customizable ad blocker with toggle and list management.
描述：具有切換和列表管理的可自定義廣告攔截器。
圖標：上傳icon128.png。
截圖：準備1280x800的界面截圖（彈出窗口和設置頁面）。
聲明權限理由：Used to block ads and manage user settings.
聲明權限理由：用于攔截廣告和管理用戶設置。
點擊“提交審核”，選擇“公開”發布。