来自 Content Script 和 DevTools Page JS 的 chrome.runtime.connect 无法连接答案

【问题标题】：chrome.runtime.connect from Content Script and DevTools Page JS failing to connect来自 Content Script 和 DevTools Page JS 的 chrome.runtime.connect 无法连接
【发布时间】：2014-09-23 15:31:14
【问题描述】：

我也审查了这个问题/答案： Communicating between Chrome DevTools and content script in extension

看起来他们正在做的事情与我尝试做的事情略有不同，所以我不知道它适用于多少。也许我绝对需要一个 background.js 文件？

我也看过这个问题： extension using background, content and devtools together

这里看起来他们没有使用这里记录的长期连接（这是我需要的）： https://developer.chrome.com/extensions/messaging#connect

不管怎样，前面的问题是我的问题：

我在几个小时内尝试了几种方法，所以我非常确信我只是在这里遗漏了一些东西来完成这项工作。

我的问题的症结在于：

chrome.runtime.onConnect.addListener(function(){...})

这里的监听器永远不会触发。

这是我的设置：

我的扩展使用内容脚本和 DevTools 页面。在 Content Script 和 DevTools 页面这两个位置，我尝试通过 chrome.runtime 启用消息传递。我的样板初始化看起来像这样用于启动连接：

console.log('initializing connection');
var port = chrome.runtime.connect({name: 'My Extension'});
console.log('port', port.name);

这等待 onConnect：

chrome.runtime.onConnect.addListener(function(port){
    console.log('got connection!!!!!!');
});

永远不会调用我的 onConnect 处理程序。我尝试将连接代码 (chrome.runtime.connect({...})) 放在内容脚本和 DevTools 页面 JS 中，同时将处理程序初始化放在相反的位置无济于事。

也就是说，如果我将连接代码放在 Content Script 中，我会将处理程序初始化放在 DevTools 页面 JS 中。如果我将连接代码放入 DevTools 页面 JS，我会将处理程序初始化放入 Content Script。

在这两种情况下，我都没有收到运行时错误，但是，我也从未看到 console.log('got connection!!!!!!'); 被调用。是的，当我在 DevTools 页面 JS 中进行处理程序初始化时，我正在查看 DevTools 页面控制台。

我只是误解了文档中的某些内容或遗漏了某些内容。谁能指出我正确的方向：让 DevTools Page JS 与内容脚本通信？

【问题讨论】：

DevTools 扩展中的消息传递存在大量错误。您应该尝试使用后台作为代理，并且只从 DevTools 发起连接。

标签： google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

根据 Xan 的评论，devtools 扩展和内容脚本之间的通信应该通过使用后台脚本来完成。流程基本上是：

(devtools script) - 创建连接（并通过打开的连接端口发送或监听消息）
（后台脚本） - 监听要创建的连接，接收端口并使用它来监听或广播消息

如果您想保持长期连接，这很有用，因此基本上您需要为单个进程来回传递几条消息。如果您希望不时传递简单的消息，但不需要来回传递多条消息，那么您可以实现更简单的通信：

（devtools 脚本）- 使用chrome.runtime.sendMessage发送消息
（后台脚本） - 使用 chrome.runtime.onMessage.addListener() 侦听由与其关联的任何扩展程序发送的消息

【讨论】：