浏览器扩展开发基于前端技术，核心是JavaScript。通过manifest.json配置扩展信息，popup.html和popup.js构建用户界面并触发操作，content.js注入网页实现DOM交互，background.js监听全局事件。利用chrome.runtime.sendMessage在各脚本间通信，实现如高亮链接等功能。v3版本使用service worker管理后台逻辑，需注意权限与CSP限制，通过chrome://extensions加载测试。掌握结构、通信与调试即可快速上手开发实用扩展。
浏览器扩展插件开发是前端技能的延伸应用，JavaScript 在其中扮演核心角色。通过简单的 HTML、CSS 和 JavaScript，配合浏览器提供的扩展机制，你可以为 Chrome、Edge、Firefox 等主流浏览器打造实用工具。下面以 Chrome 扩展为例，带你快速上手实战开发。
理解扩展的基本结构
一个基础的浏览器扩展包含以下几个关键文件：
- manifest.json：扩展的配置文件，定义名称、版本、权限、入口文件等信息。
- popup.html：点击扩展图标时弹出的页面。
- popup.js：控制弹出页逻辑的脚本。
- content.js：注入到网页中执行的脚本，可操作页面 DOM。
- background.js：后台脚本，长期运行，监听事件、管理状态。
示例 manifest.json（v3 版本）：
{ "manifest_version": 3, "name": "我的第一个扩展", "version": "1.0", "description": "学习扩展开发", "action": { "default_popup": "popup.html" }, "background": { "service_worker": "background.js" }, "permissions": [ "activeTab" ], "content_scripts": [ { "matches": ["实现页面交互功能
content.js 是与网页直接交互的关键。它可以在用户访问任意页面时自动注入，读取或修改内容。
立即学习“Java免费学习笔记（深入）”；
例如，实现一个“高亮所有链接”的功能：
// content.js document.querySelectorAll('a').forEach(link => { link.style.backgroundColor = 'yellow'; });该脚本会在每个匹配页面加载后执行，将所有链接背景标黄。注意：content script 沙箱运行，不能直接访问页面引入的 JS 变量。
构建用户操作界面
popup.html 提供用户与扩展交互的入口：
在 popup.js 中发送消息给 content script：
// popup.js document.getElementById('highlight').addEventListener('click', () => { chrome.tabs.query({active: true, currentWindow: true}, (tabs) => { chrome.tabs.sendMessage(tabs[0].id, {action: "highlight"}); }); });document.getElementById('clear').addEventListener('click', () => { chrome.tabs.query({active: true, currentWindow: true}, (tabs) => { chrome.tabs.sendMessage(tabs[0].id, {action: "clear"}); }); });
content.js 接收消息并执行操作：
// content.js chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { if (msg.action === "highlight") { document.querySelectorAll('a').forEach(a => a.style.backgroundColor = 'yellow'); } if (msg.action === "clear") { document.querySelectorAll('a').forEach(a => a.style.backgroundColor = ''); } });使用后台脚本管理状态
background.js 可监听全局事件，比如浏览器启动、标签页变更等。
示例：在用户打开新页面时打印 URL：
// background.js chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (changeInfo.status === 'complete') { console.log('页面加载完成:', tab.url); } });注意：Chrome 扩展 v3 使用 service worker 替代传统的 background page，因此不能依赖全局变量持久化数据。
基本上就这些。掌握 manifest 配置、content script 注入、popup 交互和消息通信机制，就能开发出大多数实用型扩展。调试时可通过 chrome://extensions 页面加载已解压的扩展文件夹进行测试。不复杂但容易忽略细节，比如权限声明和 CSP 限制。多练几次，很快就能上手。
