浏览器扩展项目

一个基础的 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 浏览器

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

Microsoft Edge 浏览器

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

Firefox 浏览器

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

📝 开发说明

manifest.json

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

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

popup（弹出页面）

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

background（后台脚本）

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

content（内容脚本）

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

⚠️ 注意事项

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

🔧 常用权限说明

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

2.6 KiB Raw Permalink Blame History Unescape Escape