开发Chrome/Edge插件基本流程
开发Chrome/Edge插件（也称为扩展程序）是一个相对直接的过程，因为这两种浏览器都基于Chromium内核，插件开发方式基本一致。下面是一个详细的开发指南：
一、插件基本结构
一个简单的Chrome/Edge插件至少包含以下文件：
manifest.json- 插件的配置文件（必需）- 功能实现文件（HTML/CSS/JavaScript等）
二、核心文件：manifest.json
这是插件的入口配置文件，最新推荐使用V3版本（V2已逐步淘汰）。以下是一个基础的V3版本配置：
{"manifest_version": 3,"name": "我的第一个插件","version": "1.0","description": "一个简单的Chrome/Edge插件示例","icons": {"16": "icons/icon16.png","48": "icons/icon48.png","128": "icons/icon128.png"},"action": {"default_popup": "popup.html","default_icon": "icons/icon16.png"},"permissions": ["storage"]
}
主要字段说明：
manifest_version: 版本号（必须为3）name/version/description: 插件基本信息icons: 插件图标（不同尺寸用于不同场景）action: 配置插件图标点击后的行为（如弹出页面）permissions: 插件需要的权限（如存储、标签页操作等）
三、开发步骤
1. 创建基础文件结构
my-extension/
├── icons/
│ ├── icon16.png
│ ├── icon48.png
│ └── icon128.png
├── manifest.json
├── popup.html
└── popup.js
2. 编写弹出页面（popup.html）
这是点击插件图标时显示的界面：
<!DOCTYPE html>
<html>
<head><style>body {width: 200px;height: 150px;padding: 10px;}h3 {margin: 0 0 10px 0;}</style>
</head>
<body><h3>当前时间</h3><div id="time"></div><script src="popup.js"></script>
</body>
</html>
3. 编写功能逻辑（popup.js）
实现显示当前时间的功能：
// 获取当前时间并显示
function updateTime() {const now = new Date();document.getElementById('time').textContent = now.toLocaleTimeString();
}// 初始化显示并定时更新
updateTime();
setInterval(updateTime, 1000);
四、在浏览器中加载插件
- 打开浏览器（Chrome或Edge）
- 地址栏输入
chrome://extensions/（Edge为edge://extensions/） - 开启右上角的「开发者模式」
- 点击「加载已解压的扩展程序」
- 选择插件所在的文件夹
五、插件核心功能扩展
1. 背景服务（Background Service）
用于处理后台任务（如定时操作），在manifest.json中配置：
"background": {"service_worker": "background.js"
}
background.js示例：
// 监听插件安装事件
chrome.runtime.onInstalled.addListener(() => {console.log("插件已安装");
});// 定时发送通知
setInterval(() => {chrome.notifications.create({type: "basic",iconUrl: "icons/icon48.png",title: "定时提醒",message: "这是一个定时通知"});
}, 60000); // 每分钟一次
需要在permissions中添加notifications权限。
2. 内容脚本（Content Script）
可以注入到网页中，操作网页DOM。在manifest.json中配置：
"content_scripts": [{"matches": ["<all_urls>"], // 匹配所有网页"js": ["content.js"]}
]
content.js示例（修改网页背景色）：
// 当页面加载完成后执行
window.addEventListener('load', () => {document.body.style.backgroundColor = '#f0f8ff';
});
六、调试插件
- 弹出页面：右键点击插件图标 → 「检查」
- 背景服务：在扩展程序页面点击插件的「服务工作线程」链接
- 内容脚本：在网页的开发者工具中查看（Sources → Content scripts）
七、打包发布
- 开发完成后，在扩展程序页面点击「打包扩展程序」
- 生成
.crx文件（Chrome）或.zip文件（Edge） - 发布到Chrome Web Store或Microsoft Edge Add-ons商店（需要开发者账号）
八、学习资源
- Chrome扩展开发文档
- Edge扩展开发文档