一、Chrome插件开发概述

Chrome插件开发基本概念

Chrome插件（Chrome Extension）是基于Web技术（HTML、CSS、JavaScript）开发的浏览器功能扩展模块，通过Chrome提供的API增强浏览器能力。核心组成包括：

  • manifest.json：配置文件，定义插件名称、版本、权限等元信息。
  • 背景脚本（Background Script）：常驻运行的脚本，处理全局逻辑。
  • 内容脚本（Content Script）：注入到网页中，与页面DOM交互。
  • UI组件：如弹出窗口（Popup）、选项页（Options Page）等。

插件与网页扩展的区别

  1. 功能范围

    • 插件直接调用浏览器API（如书签、标签页管理），深度集成浏览器功能。
    • 网页扩展通常指通过内容脚本修改页面内容，功能限于网页层。

  2. 权限要求

    • 插件需声明权限（如storage、tabs），可能涉及用户隐私数据。
    • 网页扩展通常仅需activeTab等基础权限。

  3. 生命周期

    • 插件可常驻后台（通过事件监听），网页扩展随页面关闭释放资源。

常见插件类型

  1. 内容增强型
    修改或分析网页内容，例如广告拦截器（uBlock Origin）、翻译插件（Google Translate）。

  2. 工具效率型
    提供浏览器工具集成，如密码管理器（LastPass）、截图工具（Awesome Screenshot）。

  3. 开发者工具
    辅助调试或开发，如React Developer Tools、JSON格式化插件。

  4. 主题与样式
    改变浏览器外观，如暗黑模式主题（Dark Reader）。

应用场景

  • 自动化操作：批量处理表单、数据抓取。
  • 跨网页协作：实现多标签页数据同步（如笔记插件）。
  • 浏览器功能扩展：添加自定义快捷键或手势控制。
  • 安全防护：检测恶意脚本或钓鱼网站。

代码示例（manifest.json基础配置）

{
  "name": "示例插件",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["storage", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

 

二、开发环境准备

Chrome开发环境准备

确保已安装最新版本的Google Chrome浏览器。Chrome开发者工具和扩展程序开发功能内置在浏览器中，无需额外安装。

启用开发者模式

打开Chrome浏览器，地址栏输入chrome://extensions/进入扩展程序管理页面。在页面右上角找到“开发者模式”开关，将其打开。启用后，会显示“加载已解压的扩展程序”、“打包扩展程序”等选项。

安装必要工具

代码编辑器推荐使用Visual Studio Code或Sublime Text，它们对JavaScript和HTML有良好支持。Node.js可用于构建复杂扩展，但简单扩展无需安装。

创建插件项目

新建一个文件夹作为插件项目目录。至少需要以下文件：

  • manifest.json：核心配置文件，定义插件名称、版本、权限等。
  • background.js：后台脚本（可选）。
  • popup.html和popup.js：弹出窗口界面（可选）。
  • content.js：内容脚本（可选）。

示例manifest.json基础内容：

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple Chrome extension",
  "action": {
    "default_popup": "popup.html"
  }
}

 

加载并测试插件

在chrome://extensions/页面点击“加载已解压的扩展程序”，选择项目文件夹。加载成功后，插件图标会出现在浏览器工具栏。点击图标可测试弹出窗口功能。

调试插件

右键点击插件图标选择“检查”可打开开发者工具调试弹出窗口。对于后台脚本，在chrome://extensions/页面找到插件点击“服务工作者”进入调试。内容脚本可直接在网页开发者工具中调试。

验证插件运行

在普通浏览窗口测试插件功能是否正常。检查控制台是否有错误输出。修改代码后，在chrome://extensions/页面点击插件右下角的刷新图标重新加载。

打包发布

完成开发后，在chrome://extensions/点击“打包扩展程序”生成.crx文件。发布到Chrome应用商店需要注册开发者账号并支付一次性费用。

 

三、核心文件结构

必备文件及其作用：

  • manifest.json：配置插件的名称、版本、权限等元信息。
  • background.js：后台脚本，处理全局逻辑。
  • content.js：内容脚本，与页面DOM交互。
  • 静态资源（HTML/CSS/图标等）。

 

四、编写manifest.json

通过示例代码展示基础配置：

{
  "name": "示例插件",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["tabs", "storage"],
  "action": {
    "default_popup": "popup.html"
  }
}

 

五、实现基础功能模块

 

// 监听扩展安装事件
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.local.set({config: {}});
  chrome.alarms.create('refresh', {periodInMinutes: 60});
});

 

跨模块通信 使用chrome.runtime.sendMessage进行后台与内容脚本通信：

// 内容脚本发送消息
chrome.runtime.sendMessage({action: "log", data: "Hello"});

// 后台接收消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "log") {
    console.log(request.data);
  }
});

 

  • Chrome插件基础功能模块实现

    浏览器动作（Browser Action） Manifest V3使用action代替旧版的browser_action。在manifest.json中配置默认弹出页面和图标：

    {
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png"
    }
  }
}

     

    通过chrome.action.onClicked监听图标点击事件，需在service worker中注册：

    chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content.js']
  });
});

     

    内容脚本注入（Content Scripts） 在manifest.json中声明静态注入规则，匹配特定URL模式时自动注入：

    {
  "content_scripts": [{
    "matches": ["https://*.example.com/*"],
    "css": ["styles.css"],
    "js": ["content.js"],
    "run_at": "document_end"
  }]
}

     

    动态注入需使用chrome.scripting.executeScriptAPI，要求manifest中声明"host_permissions"和"scripting"权限：

    chrome.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['dynamic_content.js']
});

     

    后台服务（Service Worker） Manifest V3强制使用service worker替代后台页面。在manifest中声明：

    {
  "background": {
    "service_worker": "background.js",
    "type": "module" // 支持ES模块
  }
}

     

    Service Worker生命周期注意事项：

  • 30秒不活动会被终止
  • 使用chrome.storage.local持久化数据
  • 通过chrome.alarms定时唤醒

六、通信机制

不同组件间的通信方式：

  • Chrome插件中不同组件间的通信方式

    Chrome插件开发中，不同组件（如background脚本、content脚本、popup页面等）之间的通信主要通过以下几种方式实现：

    使用chrome.runtime.sendMessage和chrome.runtime.onMessage

    这种方法适用于background脚本与content脚本或其他扩展页面之间的通信。发送方使用sendMessage，接收方通过onMessage监听。

    // 发送消息（content脚本或popup页面）
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

// 接收消息（background脚本）
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.greeting === "hello") {
      sendResponse({farewell: "goodbye"});
    }
  }
);

     

    使用chrome.tabs.sendMessage

    专门用于从background脚本向特定标签页的content脚本发送消息。

    // background脚本向特定标签页发送消息
chrome.tabs.sendMessage(tabId, {message: "hello"}, function(response) {
  console.log(response);
});

// content脚本接收消息
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message === "hello") {
      sendResponse({response: "world"});
    }
  }
);

     

    使用长连接（Port）

    适合需要持续通信的场景，如实时数据交换。通过chrome.runtime.connect建立长连接。

    // 建立连接（content脚本）
var port = chrome.runtime.connect({name: "channelName"});
port.postMessage({msg: "connecting"});
port.onMessage.addListener(function(msg) {
  console.log(msg);
});

// 接收连接（background脚本）
chrome.runtime.onConnect.addListener(function(port) {
  port.onMessage.addListener(function(msg) {
    port.postMessage({response: "acknowledged"});
  });
});

     

    直接访问DOM（content脚本与页面）

    content脚本可以通过DOM操作与网页本身交互，但需注意隔离问题。

    // content脚本修改页面
document.body.style.backgroundColor = "red";

// 通过事件监听与页面通信
window.addEventListener("message", function(event) {
  if (event.data.type === "fromPage") {
    chrome.runtime.sendMessage(event.data);
  }
});

     

    使用chrome.storage同步数据

    适合组件间共享数据，但非实时通信。

    // 存储数据
chrome.storage.sync.set({key: value}, function() {
  console.log("Data saved");
});

// 读取数据
chrome.storage.sync.get(["key"], function(result) {
  console.log(result.key);
});

     

    使用window.postMessage

    用于content脚本与嵌入的iframe或网页脚本通信。

    // content脚本发送消息到iframe
document.querySelector("iframe").contentWindow.postMessage(
  {type: "fromContentScript"}, "*"
);

// iframe接收消息
window.addEventListener("message", function(event) {
  if (event.data.type === "fromContentScript") {
    console.log(event.data);
  }
});

     

    每种通信方式适用于不同场景，开发者应根据具体需求选择最合适的方法。

 

七、调试与发布

检查后台脚本

在Chrome开发者工具中，后台脚本通常指Service Worker或扩展程序的后台页面。打开开发者工具（快捷键F12或Ctrl+Shift+I），切换到Application标签页，左侧导航栏选择Service Workers或Background Pages。这里可以查看脚本状态、强制更新或终止运行。

对于扩展程序的后台脚本，需在地址栏输入chrome://extensions/，找到目标扩展并点击背景页按钮，单独弹出调试窗口。

查看错误日志

切换到开发者工具的Console标签页，所有脚本错误和日志会实时显示。若需筛选特定类型错误，可使用顶部过滤栏（如Errors、Warnings）。扩展程序的错误可能单独记录在后台脚本的Console中，需按上述方法打开对应调试窗口。

对于Service Worker的错误，还需在Application标签页的Service Workers部分查看Offline和Update on reload等状态，并勾选Show all以显示隐藏的错误。

打包成CRX文件

  1. 在Chrome地址栏输入chrome://extensions/，进入扩展程序管理页面。
  2. 启用右上角的开发者模式。
  3. 点击打包扩展程序按钮，选择扩展的根目录（包含manifest.json的文件夹）。
  4. 可选填写私钥文件路径（若首次打包可留空，系统会生成新私钥）。
  5. 点击打包扩展程序，生成.crx和.pem文件（后者为私钥，需妥善保存）。

提交至Chrome应用商店

  1. 登录Chrome Web Store开发者中心。
  2. 点击New Item上传.crx文件，或拖拽到指定区域。
  3. 填写扩展的详细信息（名称、描述、图标、截图等）。
  4. 选择发布范围（公开、限定测试群组等）。
  5. 支付一次性开发者注册费（5美元）。
  6. 提交审核，通常需数小时至数天。审核通过后扩展会自动发布。

注意：每次更新需重新打包并上传新版本号，同时更新manifest.json中的version字段。

    八、进阶开发建议

    使用chrome.storage管理数据

    chrome.storage API提供比localStorage更安全、异步的数据存储方式，适合扩展数据管理。同步存储（chrome.storage.sync）支持跨设备同步，本地存储（chrome.storage.local）适合大量数据。

    • 基础用法：

      // 保存数据
chrome.storage.local.set({ key: 'value' }, () => {
  console.log('Data saved');
});

// 读取数据
chrome.storage.local.get(['key'], (result) => {
  console.log('Retrieved value:', result.key);
});

       

    • 优势：

      • 异步操作避免阻塞UI。
      • 支持存储对象（localStorage仅支持字符串）。
      • 可通过配额查询（chrome.storage.local.getBytesInUse）管理空间。

    处理CSP安全性限制

    内容安全策略（CSP）可能限制内联脚本或外部资源加载，需在manifest.json中配置：

    • manifest配置示例：

      {
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

       

    • 注意事项：

      • 避免使用eval()或动态执行字符串代码。
      • 外部资源需通过白名单加载（如HTTPS域名）。

    扩展功能API探索

    通知功能（chrome.notifications）

    用于向用户发送系统级通知，需在manifest中声明权限：

    {
  "permissions": ["notifications"]
}

     

    • 代码示例： 
      chrome.notifications.create('id', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: '提示',
  message: '任务已完成'
});

       

    书签管理（chrome.bookmarks）

    支持增删改查浏览器书签，需声明权限：

    {
  "permissions": ["bookmarks"]
}

     

    • 常用操作： 
      // 创建书签
chrome.bookmarks.create({
  parentId: '1',
  title: 'Google',
  url: 'https://google.com'
});

// 查询书签
chrome.bookmarks.getTree((bookmarkTreeNodes) => {
  console.log(bookmarkTreeNodes);
});

       

    其他建议

    • 错误处理：所有chrome API调用需添加错误回调（如存储失败时提示用户）。
    • 用户权限透明化：在manifest中仅声明必要权限，运行时通过chrome.permissions.request动态申请敏感权限。
    • 性能监控：使用chrome.runtime.getBackgroundPage调试后台页面的资源占用。

     

     

     

    Logo
    MCP技术社区

    欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

    更多推荐

    Google能索引，AI却抓不到

    很多技术团队有个错觉：只要Google能正常收录，内容就没问题。但现实是，你的页面在Google搜索结果里好好的，在ChatGPT、Perplexity、Claude的答案里却像从未存在过一样。

    avatar MCP技术社区
    cover

    Windows 下部署 New API 中转站全过程实录（含 6 个真实踩坑）

    avatar MCP技术社区

    初识智能体

    在过去两年中，几乎所有人都体验过大语言模型（如 ChatGPT、Claude、DeepSeek）的强大能力：写周报、润色邮件、解答编程疑难。被动响应：你问一句，它答一句。如果你的 Prompt 没有写清楚约束条件，它无法主动追问或修正目标。知行脱节：大模型能用流畅的文字告诉你“如何部署一个高可用 K8s 集群”，但它无法替你登录服务器敲下命令、查看报错日志并自动回滚。信息孤岛：大模型的知识止步于预

    avatar MCP技术社区