用 JavaScript 创建浏览器扩展的关键是理解其结构和权限机制：需正确编写 manifest.json（Manifest V3 标准），配合内容脚本、后台 service worker、弹出页等协同工作，并通过 chrome.runtime API 通信，调试时依赖 chrome://extensions 和 DevTools。
用 JavaScript 创建浏览器扩展不难，关键是理解它的结构和权限机制。核心是写好 manifest.json 配置文件，再配合内容脚本、后台脚本或弹出页等 JS 文件协同工作。
从 manifest.json 开始
这是每个扩展的“身份证”，必须放在根目录，格式为 JSON。新版（Manifest V3）是当前主流标准：
- manifest_version 必须设为 3
- name 和 version 是必填项
- permissions 声明需要的权限，比如 "storage"（存数据）、"activeTab"（操作当前标签页）
- host_permissions 列出可访问的网站，如 ["https://example.com/*"]
- content_scripts 指定哪些 JS 会在网页中自动注入，支持匹配规则（matches）和执行时机（run_at）
让脚本在网页里运行（内容脚本）
内容脚本（content script）是直接操作网页 DOM 的 JS，它和网页共享页面环境，但和扩展其他部分隔离：
- 在 manifest 中声明，例如：{"matches": ["
"], "js": ["content.js"]} - 不能直接访问扩展的 background 或 popup 中定义的变量
- 如需通信，用 chrome.runtime.sendMessage 和 chrome.runtime.onMessage
- 适合做按钮注入、样式修改、表单监听等前端增强功能
后台逻辑与用户交互
扩展不只是改网页，还要有响应逻辑和用户界面：
立即学习“Java免费学习笔记（深入）”；
- background：用 service worker 实现常驻逻辑（如监听消息、定时任务），V3 中不可用 long-lived background page
- popup：点击扩展图标弹出的小窗口，写成 HTML + JS，可调用 chrome API（需对应权限）
- options_page：提供设置页，方便用户配置行为（比如开关某功能）
- 所有涉及浏览器能力的操作（如读取标签页、下载文件）都需在 manifest 中申请权限，并在 JS 中检查是否获得授权
调试与加载测试版
开发阶段不用发布，本地就能试：
- Chrome：进入 chrome://extensions → 打开右上角“开发者模式” → “加载已解压的扩展” → 选你的项目文件夹
- 修改代码后，点扩展页的“更新”按钮即可刷新
- 按 F12 打开 DevTools，可在“扩展程序”页签里查看 content script 或 popup 的控制台输出
- 遇到报错先看 manifest 是否语法错误，再确认权限是否遗漏、API 是否在正确上下文中调用
基本上就这些。不需要框架，纯 JS + 配置就能跑起来。重点是理清各脚本的运行环境和通信方式，权限别漏，路径别写错，调试时多看 console 和扩展管理页的状态提示。
