Chrome扩展开发核心是JavaScript，需明确manifest.json、background script和content script三大模块分工及通信机制。
JavaScript 是开发 Chrome 浏览器扩展的核心语言，整个插件逻辑（内容脚本、后台服务、弹窗交互等）都依赖它。关键不在于“能不能用 JavaScript”，而在于“怎么组织代码、在哪个上下文中运行、如何与浏览器 API 通信”。
理解扩展的三大核心组成部分
Chrome 扩展不是单个 JS 文件，而是由多个角色明确的模块协同工作：
- manifest.json：扩展的“身份证”，声明版本、权限、入口文件（如 background.js、popup.html）、匹配的网页（content_scripts）等；必须放在根目录，是加载扩展的第一步
- Background Script（后台脚本）：常驻运行（可设为 service worker 模式），响应事件（如页面加载、消息、通知），管理全局状态，不能直接操作网页 DOM
- Content Script（内容脚本）：注入到指定网页中，可读写 DOM、监听用户操作，但运行在隔离环境，无法直接访问网页已有的 JS 变量或函数（除非通过 DOM 注入方式）
从零写一个“点击高亮当前页面所有链接”的小插件
以实际功能为例，快速上手结构和通信逻辑：
1. manifest.json（v3 示例）{
"manifest_version": 3,
"name": "Link Highlighter",
"version": "1.0",
"permissions": ["activeTab"],
"host_permissions": ["<all_urls>"],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"]
}],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
}
}
2. content.js（注入后执行）
监听来自 popup 或 background 的消息，执行高亮逻辑：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“Java免费学习笔记（深入）”；
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "highlightLinks") {
document.querySelectorAll('a').forEach(link => {
link.style.backgroundColor = '#ffeb3b';
link.style.padding = '2px 4px';
});
sendResponse({ status: "done" });
}
});
3. popup.html + popup.js（点击图标弹出的界面）
popup.html 中放一个按钮，popup.js 监听点击并发送消息给当前活动页的内容脚本：
<button id="highlightBtn">高亮链接</button> <script src="popup.js"></script>
document.getElementById('highlightBtn').addEventListener('click', () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, { action: "highlightLinks" });
});
});
必须注意的几个关键细节
新手容易卡在这些地方：
- 跨域限制依然存在：即使有 host_permissions，content script 发起 fetch 请求仍受 CORS 约束；需通过 background 中转（background 有更高网络权限）或配置 web_accessible_resources
- Service Worker 无全局变量：manifest v3 强制使用 service worker 作 background，它会休眠，不能依赖 setInterval 或长期内存变量；状态建议存 chrome.storage.local
- content script 和页面 JS 不共享作用域：想调用网页里的函数？得用 document.createElement('script') 动态插入，或 window.eval()（需在 manifest 中声明 "world": "ISOLATED" 或 "MAIN"）
- 调试要分上下文：右键 → “检查”看到的是网页自己的 DevTools；按 Ctrl+Shift+I 打开扩展管理页 → 找到你的扩展 → 点“inspect views”才能调试 background 或 popup
发布前的必要步骤
本地测试没问题后，打包发布只需三步：
- 把所有文件（manifest.json、JS、HTML、图标等）放入一个文件夹
- 打开 chrome://extensions → 开启右上角“开发者模式” → 点“加载已解压的扩展程序” → 选择该文件夹
- 确认无报错，图标出现，功能正常即可上传至 Chrome Web Store（需注册开发者账号并缴纳一次性 5 美元费用）
