work/mvp/browser-extension

浏览器扩展项目

一个基础的 Chrome/Edge 浏览器扩展模板。

📁 项目结构

browser-extension/
├── manifest.json          # 扩展配置文件
├── icons/                 # 图标文件夹
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── popup/                 # 弹出页面
│   ├── popup.html
│   ├── popup.css
│   └── popup.js
├── background/            # 后台脚本
│   └── background.js
├── content/               # 内容脚本
│   ├── content.js
│   └── content.css
└── README.md

🚀 如何导入到浏览器

Chrome 浏览器

1. 打开 Chrome 浏览器
2. 在地址栏输入 chrome://extensions/ 并回车
3. 打开右上角的 「开发者模式」 开关
4. 点击 「加载已解压的扩展程序」 按钮
5. 选择本项目的 browser-extension 文件夹
6. 扩展就会出现在扩展列表中

Microsoft Edge 浏览器

1. 打开 Edge 浏览器
2. 在地址栏输入 edge://extensions/ 并回车
3. 打开左侧的 「开发人员模式」 开关
4. 点击 「加载解压缩的扩展」 按钮
5. 选择本项目的 browser-extension 文件夹
6. 扩展就会出现在扩展列表中

Firefox 浏览器

Firefox 需要使用 manifest_version: 2 格式，当前模板使用的是 v3。 如需支持 Firefox，请参考 Firefox 扩展开发文档。

📝 开发说明

manifest.json

扩展的核心配置文件，定义了：

• 扩展名称、版本、描述
• 所需权限
• 各种脚本和页面的路径

popup（弹出页面）

点击扩展图标时显示的页面，包含 HTML、CSS、JS 文件。

background（后台脚本）

在后台运行的 Service Worker，处理事件和消息。

content（内容脚本）

注入到网页中运行的脚本，可以操作页面 DOM。

⚠️ 注意事项

1. 图标文件：请添加相应尺寸的 PNG 图标文件到 icons 文件夹
2. 修改后刷新：代码修改后需要在扩展管理页面点击刷新按钮
3. 权限：根据实际需求在 manifest.json 中添加所需权限

🔧 常用权限说明

• storage - 本地数据存储
• activeTab - 访问当前活动标签页
• tabs - 访问标签页信息
• bookmarks - 访问书签
• history - 访问浏览历史
• notifications - 显示系统通知

📚 参考文档

• Chrome 扩展开发文档
• Edge 扩展开发文档