chrome contents.js 与 background.js的通信方式详解

最近在做一个https网站与局域网设备服务器通信的浏览器插件，用于转发https到http，代理websocket。研究了一下插件的通信。

✅ 简明回答：content.js 和 background.js 的通信方式有两种

🧩 1. chrome.runtime.sendMessage / chrome.runtime.onMessage

作用：

发送一次性消息（请求 -> 响应）

示例：

content.js 发消息到 background.js

chrome.runtime.sendMessage({ type: "ping" }, (response) => {
  console.log("收到 background 响应:", response);
});

background.js 中接收：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === "ping") {
    sendResponse({ reply: "pong from background" });
  }
  return true; // 保持异步响应有效
});

✅ 适合： 请求设备状态、获取 token、简单查询等。

🔁 2. chrome.runtime.connect / onConnect + port.postMessage

作用：

建立持久连接，可用于持续数据交互，如：

• 分片上传大文件
• WebSocket 代理中转
• 实时日志或状态推送

示例：

content.js 中发起连接：

const port = chrome.runtime.connect({ name: "toocaa-page" });

port.postMessage({ type: "file-chunk", data: ... });

port.onMessage.addListener((msg) => {
  console.log("收到 background 推送:", msg);
});

background.js 中监听连接：

chrome.runtime.onConnect.addListener((port) => {
  if (port.name === "toocaa-page") {
    port.onMessage.addListener((msg) => {
      if (msg.type === "file-chunk") {
        // 收到文件片段
      }

      // 发送响应或推送消息
      port.postMessage({ type: "upload-status", progress: "50%" });
    });
  }
});

✅ 适合： 文件流、持续上传、插件与网页实时交互。

❗重要提醒：

区别总结：

✅ 建议使用方式（经验）

网页直接与background.js 直接通讯的方式

在 Chrome 插件中，网页与 background.js（或 service worker）之间的通信是否必须经过 content.js，要根据情况区分。下面详细解释各种通信方式：

✅ 结论：

网页想要直接与 background.js 通信，不必须经过 content.js，但前提是网页主动连接插件。

📌 一、三种通信方式汇总

🧠 二、网页直接与 background.js 通信的条件

1. 使用 chrome.runtime.sendMessage 或 chrome.runtime.connect

网页可以直接调用如下代码：

// 网页中（非插件脚本）
chrome.runtime.sendMessage(
  '扩展ID',
  { greeting: 'hello' },
  response => {
    console.log('收到来自插件的回应：', response);
  }
);

2. 需要插件在 manifest.json 中声明权限：

"externally_connectable": {
  "matches": ["https://example.com/*"]  // 或 ["<all_urls>"]（调试用）
}

否则网页是没有权限连接插件的，调用会失败。

3. 插件 background.js 需要监听来自网页的连接：

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    console.log('收到网页的消息:', request);
    sendResponse({ received: true });
  }
);

❗ 注意事项：

• 插件必须知道自己的 ID（或者网页知道插件的 ID），才能发送消息。
• 多数情况下推荐使用 content.js 中转，这样可以安全地监听网页中的 JS 行为，并与插件通信。

✅ 推荐使用场景总结：