开发Chrome/Edge插件（也称为扩展程序）是一个相对直接的过程，因为这两种浏览器都基于Chromium内核，插件开发方式基本一致。下面是一个详细的开发指南：
一、插件基本结构
一个简单的Chrome/Edge插件至少包含以下文件：
manifest.json- 插件的配置文件（必需）- 功能实现文件（HTML/CSS/JavaScript等）
二、核心文件：manifest.json
这是插件的入口配置文件，最新推荐使用V3版本（V2已逐步淘汰）。以下是一个基础的V3版本配置：
json
{
"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.js2. 编写弹出页面（popup.html）
这是点击插件图标时显示的界面：
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）
实现显示当前时间的功能：
javascript
// 获取当前时间并显示
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中配置：
json
"background": {
"service_worker": "background.js"
}background.js示例：
javascript
// 监听插件安装事件
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中配置：
json
"content_scripts": [
{
"matches": ["<all_urls>"], // 匹配所有网页
"js": ["content.js"]
}
]content.js示例（修改网页背景色）：
javascript
// 当页面加载完成后执行
window.addEventListener('load', () => {
document.body.style.backgroundColor = '#f0f8ff';
});六、调试插件
- 弹出页面：右键点击插件图标 → 「检查」
- 背景服务：在扩展程序页面点击插件的「服务工作线程」链接
- 内容脚本：在网页的开发者工具中查看（Sources → Content scripts）
七、打包发布
- 开发完成后，在扩展程序页面点击「打包扩展程序」
- 生成
.crx文件（Chrome）或.zip文件（Edge） - 发布到Chrome Web Store或Microsoft Edge Add-ons商店（需要开发者账号）