如何从网站安全向Chrome扩展的内容脚本/后台发送JWT Token？

网站上下文无法直接调用chrome.runtimeAPI，得靠内容脚本做中转，结合window.postMessage实现跨上下文通信，具体步骤如下：

1. 修改网站代码，用window.postMessage发消息 #

把原来的chrome.runtime.sendMessage换成浏览器原生的window.postMessage，同时带上验证信息避免消息被滥用：

// 网站代码
const extensionId = "你的扩展ID";
const token = "你的JWT Token";

window.postMessage(
  { 
    type: "EXTENSION_AUTH_TOKEN",
    extensionId: extensionId,
    action: "auth-token",
    data: token 
  },
  "https://my-website.com" // 替换成你的网站域名，限定消息接收范围
);

2. 新增内容脚本，监听并转发消息 #

在扩展里添加内容脚本，监听网站发送的message事件，验证来源和扩展ID后转发到后台：

// content-script.js
window.addEventListener("message", (event) => {
  // 只处理可信网站的消息
  if (event.origin !== "https://my-website.com") return;
  // 确认消息是发给当前扩展的
  if (event.data.extensionId !== chrome.runtime.id) return;
  // 只处理我们定义的消息类型
  if (event.data.type !== "EXTENSION_AUTH_TOKEN") return;

  // 转发到扩展后台
  chrome.runtime.sendMessage(
    { action: event.data.action, data: event.data.data },
    (response) => {
      // 可选：把后台的响应回传给网站
      window.postMessage(
        { 
          type: "EXTENSION_AUTH_RESPONSE",
          success: response?.success ?? false 
        },
        event.origin
      );
    }
  );
});

3. 更新Manifest V3配置 #

确保内容脚本能注入到你的网站，同时保留externally_connectable配置：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://my-website.com/*"],
      "js": ["content-script.js"],
      "run_at": "document_start" // 尽早注入，保证能监听到消息
    }
  ],
  "externally_connectable": {
    "matches": ["*://my-website.com/*"]
  },
  "background": {
    "service_worker": "background.js"
  }
}

4. 后台接收并处理消息 #

后台用chrome.runtime.onMessage监听内容脚本转发的消息，处理Token逻辑：

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "auth-token") {
    console.log("收到JWT Token:", message.data);
    // 示例：把Token存到扩展存储里
    chrome.storage.local.set({ authToken: message.data }, () => {
      sendResponse({ success: true });
    });
    // 异步场景下必须返回true，否则sendResponse会失效
    return true;
  }
});

5. 可选：网站监听后台响应 #

如果需要知道Token是否发送成功，网站可以再加个监听逻辑：

// 网站代码新增
window.addEventListener("message", (event) => {
  if (event.origin !== "https://my-website.com") return;
  if (event.data.type === "EXTENSION_AUTH_RESPONSE") {
    event.data.success ? console.log("Token发送成功") : console.log("Token发送失败");
  }
});

关键安全提醒 #

• 严格校验来源：必须检查event.origin，只处理你自己网站的消息，防止恶意网站冒充。
• 验证扩展ID：内容脚本里要确认消息的extensionId和当前扩展ID一致，避免消息被其他扩展截获。
• 用HTTPS传输：网站必须走HTTPS，防止Token在传输过程中被窃听。
• 限定消息类型：通过自定义type字段过滤消息，只处理预期格式的内容。

内容的提问来源于stack exchange，提问作者blueseal