浏览器扩展（Extension）本质上是一段运行在浏览器环境中的特殊网页程序，它由HTML、CSS和JavaScript组成，通过浏览器暴露的Extension API获得读写标签页、拦截网络请求、修改页面内容等能力。很多人以为开发扩展需要深厚的技术功底，实际上只要你写过前端页面，就能快速上手。本文以Chrome浏览器为例（Edge基于Chromium内核，流程几乎一致），从零开始实现一个完整的扩展项目，覆盖清单配置、弹窗页面、后台脚本、内容脚本通信以及本地打包调试的全部环节。
一、扩展的骨架：manifest.json清单文件详解
每一个浏览器扩展的根目录下都必须有一个manifest.json文件，它是扩展的身份证和配置中心。浏览器加载扩展时，第一个读取的就是这个文件，从中得知扩展的名称、版本、图标、需要申请的权限以及入口文件在哪里。理解这个文件是开发扩展的第一步，也是最重要的一步。
从Manifest V3（目前的主流版本）开始，配置结构做了一次较大的调整。下面是一个最小可用的配置示例，我们后续的取词翻译扩展就基于它来构建：
{
"manifest_version": 3,
"name": "简易取词翻译",
"version": "1.0.0",
"description": "选中网页文本后一键翻译的轻量扩展",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"action": {
"default_popup": "popup.html",
"default_title": "点击打开翻译面板"
},
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"run_at": "document_idle"
}
]
}
几个关键字段需要重点说明。manifest_version必须写3，因为Chrome商店已经停止接受V2版本的新扩展。action定义了工具栏图标的弹窗页面，点击图标时会打开popup.html。background.service_worker指定后台脚本，V3版本中后台不再是一个常驻页面，而是一个按需唤醒的Service Worker，这一点和V2差别很大，写代码时要避免依赖全局变量长期保存状态。permissions里的每一项权限都会在用户安装时展示提示，所以只申请真正需要的权限，权限越多用户越不信任。
还有一个新手常见的坑：content_scripts的matches字段如果写成<all_urls>，意味着你的脚本会被注入到所有网页中，商店审核时会格外严格。如果只需要针对特定网站，写具体的URL模式即可，例如["https://github.com/*"]。
二、实现弹窗页面与后台脚本的消息通信
扩展内部有三种执行环境：弹窗页面、后台脚本、内容脚本，它们各自运行在独立的上下文中，无法直接访问对方的变量和DOM。要让它们协作，必须使用消息通信机制，这也是扩展开发的核心知识点。
先写弹窗页面。弹窗就是一个普通的HTML页面，可以随意编写样式和交互逻辑。假设我们的弹窗里有一个输入框和翻译按钮：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<style>
body { width: 280px; padding: 12px; font-family: sans-serif; }
#result { margin-top: 10px; color: #333; min-height: 40px; }
</style>
</head>
<body>
<input type="text" id="word" placeholder="输入要翻译的词" />
<button id="btn">翻译</button>
<div id="result"></div>
<script src="popup.js"></script>
</body>
</html>
弹窗的逻辑文件popup.js通过chrome.runtime.sendMessage把翻译请求发给后台脚本。为什么不直接在弹窗里发HTTP请求呢？因为弹窗在关闭的那一刻就会被销毁，耗时的网络请求容易中断；而后台脚本的生命周期由浏览器管理，更适合处理网络请求和缓存数据。来看后台脚本的实现：
// background.js
// 监听来自弹窗或内容脚本的消息
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (msg.type === 'translate') {
fetch('https://api.ipipp.com/translate?q=' + encodeURIComponent(msg.text))
.then(res => res.json())
.then(data => {
// 把翻译结果回传给发送方
sendResponse({ ok: true, data: data });
})
.catch(err => sendResponse({ ok: false, error: String(err) }));
// 返回true表示将异步调用sendResponse
return true;
}
});
这里有一个非常容易被忽视的细节：onMessage的回调如果需要异步调用sendResponse，必须显式return true。否则消息通道会在回调函数执行结束后立即关闭，弹窗那边收到的永远是undefined，而且控制台不会报任何错，排查起来非常折磨人。弹窗侧的发送代码如下：
// popup.js
document.getElementById('btn').addEventListener('click', async () => {
const word = document.getElementById('word').value.trim();
if (!word) return;
const res = await chrome.runtime.sendMessage({ type: 'translate', text: word });
document.getElementById('result').textContent =
res.ok ? res.data.trans : '翻译失败：' + res.error;
});
三、内容脚本：让扩展具备操作网页的能力
内容脚本（Content Script）是注入到网页中的JavaScript，它可以读取和修改当前页面的DOM，这是扩展区别于普通网页应用的杀手锏。比如实现选中文字后自动查询翻译，就需要内容脚本来监听页面的mouseup事件并拿到选区文本。
内容脚本运行在一个隔离的环境里，它虽然能操作页面DOM，却访问不到页面自身JavaScript定义的变量和函数，这个设计是为了避免扩展脚本和页面脚本互相污染。下面是内容脚本的实现：
// content.js
// 监听鼠标抬起事件，获取选中文本
document.addEventListener('mouseup', () => {
const text = window.getSelection().toString().trim();
if (text.length > 0 && text.length < 50) {
// 把选中文本发给后台脚本查询翻译
chrome.runtime.sendMessage({ type: 'translate', text }, (res) => {
if (res && res.ok) {
showTip(text, res.data.trans);
}
});
}
});
// 在选中文本附近显示一个简易浮层
function showTip(source, translated) {
let tip = document.getElementById('my-translate-tip');
if (!tip) {
tip = document.createElement('div');
tip.id = 'my-translate-tip';
tip.style.cssText =
'position:absolute;z-index:99999;background:#333;color:#fff;' +
'padding:6px 10px;border-radius:4px;font-size:13px;';
document.body.appendChild(tip);
}
tip.textContent = source + ' → ' + translated;
const sel = window.getSelection().getRangeAt(0).getBoundingClientRect();
tip.style.left = sel.left + 'px';
tip.style.top = (sel.bottom + 8) + 'px';
setTimeout(() => tip.remove(), 3000);
}
需要注意跨方向通信的区别：内容脚本用chrome.runtime.sendMessage向后台发消息，而后台脚本如果想主动推送给某个标签页的内容脚本，则要使用chrome.tabs.sendMessage并传入目标标签页的ID。两者方向相反，初学者经常搞混导致消息发出去没人接收。
四、本地调试与打包发布流程
开发阶段不需要把扩展上传到商店，Chrome提供了本地加载功能。打开浏览器地址栏输入chrome://extensions进入扩展管理页，打开右上角的开发者模式开关，点击加载已解压的扩展程序，选择你的项目文件夹即可。每次修改代码后，回到管理页点击对应扩展卡片上的刷新按钮，新代码就会生效。
调试方面，弹窗页面可以在弹窗上右键选择检查打开开发者工具；后台脚本则在扩展管理页点击Service Worker链接进入其专属的控制台；内容脚本的报错可以直接在网页本身的开发者工具Console里看到，记得在过滤器下拉框中选择扩展的上下文，否则可能看不到扩展相关的日志。
当扩展功能稳定后，如果要发布到Chrome应用商店，需要注册开发者账号并支付一次性5美元的注册费，然后在开发者信息中心上传打包好的zip文件。打包前建议把console.log之类的调试语句清理干净，图标准备16、48、128三个尺寸，描述文字如实填写权限用途。如果只是团队内部使用，可以不上传商店，直接分发文件夹或zip包，让对方开启开发者模式本地安装，这也是企业内部工具最常见的分发方式。
最后总结几个开发要点：Manifest V3是当前唯一可选的规范，后台脚本要按Service Worker的无常驻思路来设计；消息通信中异步响应记得return true；权限只申请最小必需集合。掌握这些之后，你就可以尝试更有野心的项目了，比如网页划词收藏、请求拦截分析、自动化表单填充等，扩展开发的世界远比想象中开阔。
浏览器扩展开发Chrome插件JavaScript修改时间：2026-09-11 00:12:52