Chrome插件开发实战教程：从入门到发布（Manifest V3）

阿尔法星球

1758人浏览 · 2025-08-19 11:21:07

阿尔法星球 · 2025-08-19 11:21:07 发布

引言：为什么选择Chrome插件开发？

Chrome插件作为增强浏览器功能的轻量级应用，已成为前端开发者必备技能之一。无论是自动化办公、网页内容定制，还是开发辅助工具，插件都能以极低的开发成本实现强大功能。2025年，Chrome已全面转向Manifest V3规范，带来更安全的权限模型和更优的性能表现。本文将带你从零开始，掌握基于Manifest V3的插件开发全流程。

一、开发环境搭建

1.1 必备工具

基础环境：Chrome 139+浏览器、VS Code（推荐插件：Chrome Extension Manifest Generator）
辅助工具：Chrome开发者工具、Git（版本控制）

1.2 启用开发者模式

打开Chrome浏览器，访问 chrome://extensions
开启右上角「开发者模式」开关
出现「加载已解压的扩展程序」等开发按钮

二、Manifest V3核心配置

2.1 清单文件基础结构

Manifest.json是插件的"身份证"，以下是V3版本的核心配置：

{
  "manifest_version": 3,
  "name": "我的第一个插件",
  "version": "1.0.0",
  "description": "基于Manifest V3的示例插件",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon48.png"
  },
  "permissions": ["activeTab", "storage", "scripting"],
  "host_permissions": ["https://*.example.com/*"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

2.2 V3版本核心变更

Service Worker替代背景页：事件驱动型后台运行，节省资源
权限系统拆分：permissions（功能权限）与host_permissions（域名权限）分离
网络请求控制：需使用declarativeNetRequest API替代传统webRequest
禁止远程代码：所有JS必须包含在插件包内，提升安全性

三、插件项目结构与核心组件

3.1 标准目录结构

my-extension/
├── manifest.json       # 配置清单（必需）
├── popup/              # 弹出页面
│   ├── popup.html      # 界面结构
│   ├── popup.css       # 样式表
│   └── popup.js        # 交互逻辑
├── background.js       # 后台服务Worker
├── content.js          # 内容脚本（注入网页）
├── icons/              # 图标资源（多尺寸）
└── options.html        # 设置页面（可选）

3.2 核心组件解析

3.2.1 Popup页面

点击插件图标时显示的交互界面，生命周期较短：

<!-- popup.html -->
<!DOCTYPE html>
<html>
  <body style="width: 200px; padding: 15px;">
    <h3>网页内容提取工具</h3>
    <button id="extractBtn">提取当前页面文本</button>
    <script src="popup.js"></script>
  </body>
</html>

3.2.2 Background Service Worker

后台事件处理中心，无DOM访问权限：

// background.js
chrome.runtime.onInstalled.addListener(() => {
  console.log("插件已安装");
  chrome.action.setBadgeText({ text: "OFF" });
});

// 监听图标点击事件
chrome.action.onClicked.addListener(async (tab) => {
  const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
  const nextState = prevState === "ON" ? "OFF" : "ON";
  
  await chrome.action.setBadgeText({ tabId: tab.id, text: nextState });
  
  if (nextState === "ON") {
    // 注入样式
    await chrome.scripting.insertCSS({
      files: ["focus-mode.css"],
      target: { tabId: tab.id }
    });
  } else {
    // 移除样式
    await chrome.scripting.removeCSS({
      files: ["focus-mode.css"],
      target: { tabId: tab.id }
    });
  }
});

3.2.3 Content Scripts

注入网页环境的脚本，可操作DOM：

// content.js
// 提取页面标题并发送给background
chrome.runtime.sendMessage({ 
  action: "pageInfo", 
  title: document.title,
  url: window.location.href
}, (response) => {
  console.log("后台响应:", response);
});

// 监听来自background的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "extractText") {
    const text = document.body.innerText.substring(0, 500);
    sendResponse({ result: text });
  }
});

3.3 组件通信机制

插件各组件间通过Chrome API实现消息传递：

3.3.1 短连接通信（一次性消息）

// popup.js发送消息
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  chrome.tabs.sendMessage(tabs[0].id, { action: "hello" }, (response) => {
    console.log("收到响应:", response);
  });
});

// content.js接收消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "hello") {
    sendResponse({ status: "success", message: "Hi from content script" });
  }
});

3.3.2 长连接通信（持续通信）

// background.js建立连接
chrome.runtime.onConnect.addListener((port) => {
  port.onMessage.addListener((msg) => {
    if (msg.action === "startMonitor") {
      setInterval(() => {
        port.postMessage({ action: "update", time: new Date().toLocaleTimeString() });
      }, 1000);
    }
  });
});

// popup.js连接到background
const port = chrome.runtime.connect({ name: "monitor" });
port.postMessage({ action: "startMonitor" });
port.onMessage.addListener((msg) => {
  if (msg.action === "update") {
    document.getElementById("time").textContent = msg.time;
  }
});