开发Chrome_Edge插件基本流程

开发Chrome/Edge插件（也称为扩展程序）是一个相对直接的过程，因为这两种浏览器都基于Chromium内核，插件开发方式基本一致。下面是一个详细的开发指南：

一、插件基本结构

一个简单的Chrome/Edge插件至少包含以下文件：

1. manifest.json - 插件的配置文件（必需）
2. 功能实现文件（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);

四、在浏览器中加载插件

1. 打开浏览器（Chrome或Edge）
2. 地址栏输入 chrome://extensions/（Edge为 edge://extensions/）
3. 开启右上角的「开发者模式」
4. 点击「加载已解压的扩展程序」
5. 选择插件所在的文件夹

五、插件核心功能扩展

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）

七、打包发布

1. 开发完成后，在扩展程序页面点击「打包扩展程序」
2. 生成.crx文件（Chrome）或.zip文件（Edge）
3. 发布到Chrome Web Store或Microsoft Edge Add-ons商店（需要开发者账号）

八、学习资源

• Chrome扩展开发文档
• Edge扩展开发文档