通过特定设置让我的头脑围绕 Chrome 应用程序和扩展消息传递

Question

我正在尝试构建一个示例扩展程序，它可以处理来自连接到计算机的串行设备的传入消息，并影响屏幕上的 UI 元素。

例如。假设扩展是浏览页面时遇到的所有图像的运行计数。该扩展程序在右上角显示一个小框，用于记录遇到的图像。因此，对于我打开的每个选项卡或导航到的每个页面，扩展框（不是弹出窗口，而是在每个页面上显示为覆盖）的数字一直在增加。该扩展有一个 background.js 脚本，用于侦听来自 chrome 串行应用程序的外部消息，然后将该信息中继到内容脚本。

然后我有一个串口设备通过usb连接到电脑上。我正在使用 this guy's chrome serial app 读取一些即将到来的序列号。例如，我希望这些数字减少扩展 UI 图像计数器中的总数。

我通读了 Chrome 消息 api 并认为我可以弄清楚如何在 chrome 应用程序和 chrome 扩展程序之间发送这些消息。
将以下内容放在 Chrome 串行应用程序的后台 js 中，它从内容脚本中接收到一些关于传入串行读数的信息：

chrome.runtime.onMessage.addListener( 
    function(request, sender, sendResponse) {
        sendResponse("Got something!");
        console.log(request);
        var comPort = chrome.runtime.connect(extId);
        comPort.postMessage(request);

})

然后，根据我的理解，我需要让 background.js 侦听从 Chrome 串行应用程序广播的消息，然后将其转发到运行内容脚本（tabs.connect) 使用以下代码：

chrome.runtime.onConnectExternal.addListener(function(port) {
    port.onMessage.addListener(function(msg) {
        console.log(msg);

        //relay the decrement amount
        chrome.tabs.query({active:true, currentWindow:true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, msg, function(response) {
                console.log("sent" + msg );
            });
        });
    });
});

最后，在内容脚本中设置一个侦听器来侦听通过的号码。

chrome.runtime.onConnect.addListener(function(port) {
    port.onMessage.addListener(function(msg) {
    console.log(msg)
    // decrement the value in the ui box

    });
})

基本上。什么都没有发生。代码似乎已签出，但串行 chrome 应用程序与扩展程序之间没有通信。

如有任何见解，我们将不胜感激。

编辑：我有事情的串行方面运作良好。串行应用程序的后台 js 正在与内容脚本聊天。现在我只是想把事情传递给似乎没有任何进展的扩展。

编辑#2：
通过它工作。慢慢地到达那里。我好像被困在chrome.tabs.sendMessage...
它让我感到震惊 "cannot read property 'id' of undefined"。尽管我发誓我正在以正确的方式写这篇文章。 ***愚蠢的我，通过使用 currentWindow:true 定义 chrome.tabs.query 查询信息，并在调试期间保持开发工具 window 处于活动状态，我阻止自己获取实际的选项卡信息。愚蠢的错误...了解到！

Answer 1

所以很明显，没有任何工作的问题是一个多方面的问题，主要与扩展菜鸟可能遇到的常见问题有关。但是为了那些处于类似情况的人，我认为我会 post 上面提供的工作代码。基本上使用控制台来确保我一直在获取值。

main.js Chrome Serial App 的消息传递部分包括以下要发送到 background.js

chrome.runtime.sendMessage(value);

background.js Chrome 串行应用程序的消息传递部分（link 到原始问题中的完整应用程序），从上面收到并已发送消息交叉扩展

var extId = "xxxxx"   //actual ID extension
chrome.runtime.onMessage.addListener( 
    function(request, sender, sendResponse) {
        sendResponse("Got something!");
        console.log(request);//receives 
        var comPort = chrome.runtime.connect(extId);//connects to extension
        comPort.postMessage(request);//sends to extension

})

background.js 扩展的消息传递部分从 chrome 应用程序接收串行信息，然后发送到内容脚本。确保在调试时没有激活 devtools window 否则它会抛出错误。

function sendToInject(value){
    chrome.tabs.query({active:true, currentWindow:true}, function(tabs) {

        if (tabs[0] != null)
            console.log(tabs[0].id);
        else {
            console.log("??");
        }
        chrome.tabs.sendMessage(tabs[0].id, value, function(response) {
            console.log(value );
        });
    });
}
chrome.runtime.onConnectExternal.addListener(function(port) {
    port.onMessage.addListener(function(msg) {
        console.log(msg);
        sendToInject(msg);

    });
});

inject.js 主要扩展内容脚本的消息传递部分，用于接收从串行一直到网页的值。

chrome.runtime.onMessage.addListener(function(value) {

//do something with the request
    console.log(value);

});

通过特定设置让我的头脑围绕 Chrome 应用程序和扩展消息传递

Getting my head wrapped around Chrome app and extension messaging with specific setup

javascript

serial-port

google-chrome-extension