Webextension 内联安装 chrome.runtime.connect 问题

Question

我遇到了一个非常奇怪的问题，我开发了一个 Web 扩展，它使用内容脚本和后台脚本之间的消息传递（使用 chrome.runtime.connect）和原生消息传递。

我面临的问题是，当我安装扩展程序时（事先从商店手动安装，然后连接到我的网站，一切都按预期工作，chrome.runtime.connect 工作并将有效端口返回到后台脚本.

但是，当我从我的网站进行扩展的内联安装以解决必须导航以在网页中包含内容脚本的事实时，我使用

手动将内容脚本注入我的页面

 function injectContentScript() {
             var s = document.createElement("script");
             s.setAttribute("src", "chrome-extension://<extensionid>/content.js");
             document.head.appendChild(s);
         }

和完全相同的内容脚本但手动注入的行为不一样。 chrome.runtime.connect 返回一个空对象，而 chrome.runtime.lastError 给了我

无法建立连接。接收端不存在。

我在发送方调用（content.js - 手动注入的内容脚本）chrome.runtime.connect(extensionID) 其中扩展 id 是 chrome 网上商店生成的扩展的 id。而在接收端（background.js - 扩展后台脚本）chrome.runtime.onConnect.addListener(onPortConnected);

我不太确定如何调试这个问题，也许是时间问题？ 即使使用内联安装，后台脚本也能很好地执行（我已经添加了日志并通过 chrome 扩展管理器中的 background.html 对其进行了调试）

任何帮助将不胜感激！

Answer 1

你有两种情况。

1. 您的内容脚本 content.js 在导航时正常执行，就像清单中定义的内容脚本一样。

   在这种情况下，它在附加到页面并为您的内容脚本保留的特殊 JS 上下文中执行。有关说明，请参阅 Execution Environment docs 部分。它与网页隔离，被视为扩展程序的一部分（尽管权限较低）。

   当您从内容脚本连接时，chrome.runtime.connect() 被视为扩展部分之间的内部通信。因此，虽然您可以提供扩展 ID，但它不是必需的。

   更重要的是，本例中引发的事件是chrome.runtime.onConnect。

2. 您从网页调用的所谓的“立即注入内容脚本”代码做了一些完全不同的事情。

   不是创建一个新的执行上下文，而是直接将代码添加到页面中；它不被视为扩展的一部分，并且无法访问扩展 API。

   通常，对chrome.runtime.connect() 的调用会失败，因为这不是向网页公开的函数；但是，您还声明了 externally_connectable，因此它专门暴露在您的网页中。

   在这种情况下，对于connect，传递扩展 ID 是强制。你已经这样做了，所以调用成功了。

   然而，这就是它失败的原因：对应的事件不再是onConnect，而是onConnectExternal！

你应该做的是：

• 不混合在非常不同的上下文中运行的代码。

• 如果您需要从网页到后台的通信，请始终从网页进行，而不是有时从内容有时从页面。

  这样你只需要听onConnectExternal，它就不需要内容脚本（如果它是它的唯一功能的话）。

  另请参阅文档：Sending messages from web pages。

• 您不必从chrome-extension://<extensionid>/ 获取代码；您可以直接将其添加到您网站的代码中，并可能避免使用web_accessible_resources。

如果您真的想在第一次运行时注入内容脚本，请参阅例如this answer。

相关阅读：How to properly handle chrome extension updates from content scripts