讓我的腦袋圍繞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 ...
它扔我「不能讀取未定義的屬性'id'」。儘管我發誓我以正確的方式寫這篇文章。 ***愚蠢的是，通過使用currentWindow定義chrome.tabs.query查詢信息：true，並且在調試過程中，保持開發工具窗口處於活動狀態，我阻止自己獲取實際的選項卡信息。愚蠢的錯誤...瞭解到，here！

Answer 1

因此，可能很明顯，沒有任何工作的問題是一個多方面的問題，主要與通常的問題，擴展noob可能遇到的問題。但爲了那些在相似的情況下，我想我會從我上面提供的工作代碼。基本上使用的控制檯，以確保我正在獲取值的所有方式。

main。JS消息傳遞鉻串行應用的部分包括在下面要發送到background.js

chrome.runtime.sendMessage(value); 

background.js從接收到的串行鉻應用（聯繫完整的應用程序在原來的問題）的消息傳遞部分上述和發送的消息交叉延伸

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使延伸部從所述鉻應用接收串行信息的部分信息，然後發送給所述內容的腳本。確保在調試時沒有devtools窗口處於活動狀態，否則會引發錯誤。

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); 

});