嵌入Chrome扩展页面的iframe网页能否与后台脚本通信？求助

我正尝试让Web应用与Chrome扩展的后台脚本通信，但从Web应用调用chrome.runtime.sendMessage()向扩展的background.js发送消息时，响应回调从未触发，且background.js似乎未收到消息。请问这种需求是否可行？若可行，能否根据以下信息提供帮助？

背景信息 #

1. 扩展新标签页通过iframe加载Web应用：

<html>
  <body style="margin:0px;padding:0px;overflow:hidden;">
    <iframe src="https://www.example.com" frameBorder="0" style="height:100vh; width:100vw; overflow: hidden" height="100%" width="100%"/>
  </body>
</html>

2. manifest.json的内容安全策略配置：

"content_security_policy": {
  "extension_pages": "object-src 'none'; child-src https://www.example.com https://example.com; frame-src https://www.example.com https://example.com; script-src 'self'"
}

3. manifest.json的externally_connectable配置：

"externally_connectable": {
  "matches": [
    "http://localhost:3000/*",
    "https://*.example.com/*",
    "https://example.com/*"
  ]
}

4. Web应用中的发消息代码：

function sendMessageToExtension() {
  console.log("I got called");
  if (chrome && chrome.runtime) {
    console.log("Sending message to extension"); // 此代码会执行
    chrome.runtime.sendMessage(
      "extension_id", 
      { type: "example.message.type"}, 
      {includeTlsChannelId : true}, 
      function(rsp) {
        if(arguments.length === 0) {
          console.log(chrome.runtime.lastError);
        }
        console.log(rsp.message)
      } // 此回调从未触发
    );
  } else {
    // TODO: 生产环境需要检测此情况
    console.log("no chrome.runtime");
  }
}

5. 后台消息监听代码：

chrome.runtime.onMessageExternal.addListener(
  (request, sender, sendResponse) => {
    console.log("onMessageExternal invoked") // 从未被调用
    if (request.type === "example.message.type") {
      sendResponse({message: "message received by background worker."});
    }
  }
)

补充说明：即使直接在地址栏访问该网页，此功能仍无法正常工作。

这种需求完全可行，以下是排查和修复步骤：

1. 确认extension_id的正确性 #

• chrome.runtime.sendMessage中传入的"extension_id"必须是扩展的实际ID，不能用占位符。
• 获取方式：打开chrome://extensions/，开启「开发者模式」，找到目标扩展后复制其ID。

2. 校验externally_connectable匹配规则 #

• 确保Web应用的URL完全匹配matches中的规则，注意域名前缀（如www）、协议（http/https）和路径通配符的正确性。
• 调试阶段可临时添加"http://*/*"和"https://*/*"到matches中，验证是否为规则匹配问题（生产环境请勿保留此配置）。

3. 修正消息发送的权限与参数问题 #

• includeTlsChannelId: true需要扩展拥有tlsChannelId权限，若无需此功能可直接移除该选项；若必须使用，需在manifest.json中添加：

"permissions": ["tlsChannelId"]

4. 正确处理后台响应的异步逻辑 #

• 即使当前监听逻辑是同步的，也建议显式返回true告知Chrome保留响应通道，避免因潜在异步操作导致回调失效：

chrome.runtime.onMessageExternal.addListener(
  (request, sender, sendResponse) => {
    console.log("onMessageExternal invoked")
    if (request.type === "example.message.type") {
      sendResponse({message: "message received by background worker."});
    }
    return true; // 保留响应通道
  }
)

5. 优化错误调试逻辑 #

• 回调中直接检测chrome.runtime.lastError可更精准定位问题，替代原有的arguments.length判断：

function(rsp) {
  if (chrome.runtime.lastError) {
    console.error("Message error:", chrome.runtime.lastError);
    return;
  }
  console.log(rsp.message);
}

6. 检查后台页面的调试日志 #

• 打开chrome://extensions/，点击扩展的「查看视图」→「后台页面」，在控制台中查看是否有错误信息，同时确认onMessageExternal监听是否成功注册。

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