92 lines
2.6 KiB
Markdown
92 lines
2.6 KiB
Markdown
# 浏览器扩展项目
|
||
|
||
一个基础的 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/)
|
||
|