# 浏览器扩展项目

一个基础的 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 扩展开发文档](https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions)。

## 📝 开发说明

### 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 扩展开发文档](https://developer.chrome.com/docs/extensions/)
- [Edge 扩展开发文档](https://docs.microsoft.com/zh-cn/microsoft-edge/extensions-chromium/)