再來一次：錯誤：嘗試使用斷開的端口對象，如何？

Question

這裏是我的設置

background.js

var port = null; 
function setPort() { 
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) { 
     port = chrome.tabs.connect(tabs[0].id, {name: "CONTENTSCRIPT"}); 
    }); 
} 

// when i click on something, get the port and send a message 
function clickHandler(e) { 
    setPort(); 
    if (port) { 
     port.postMessage({key: 'message', value: true}); 
    } 
} 

contentscript.js

chrome.runtime.onConnect.addListener(function (port) { 
    if (port.name == "CONTENTSCRIPT") { 
     port.onMessage.addListener(function (msg) { 
      console.log(msg); 
     }); 
    } 
}); 

什麼我做的是點擊隨機選項卡的文本菜單按鈕，並嘗試發送meessage。

發生什麼事是我點擊第一個齒，沒有任何反應，沒有錯誤。第二次，我點擊消息通過。

如果我切換到另一個選項卡，並單擊菜單按鈕，我得到Error: Attempting to use a disconnected port object錯誤。如果我再次點擊該消息被成功

送我試着每次使用var port = chrome.runtime.connect({name: "CONTENTSCRIPT"});但錯誤出有斷開的端口

想法？

Answer 1

您的問題在於chrome.tabs.query是異步的。

您執行setPort()，在query執行回調並設置端口之前立即返回。此時，port或者爲null，或者引用您之前標籤的端口。

因此，您要麼沒有錯誤，要麼因爲舊端口無效而出現錯誤。

發生這種情況後，query中的回調被執行，並且port被設置爲下一次通信。

---

因此，要解決這個問題，你需要發送郵件的端口設置在調用鏈之後。例如：

function setPort(callback) { 
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) { 
     port = chrome.tabs.connect(tabs[0].id, {name: "CONTENTSCRIPT"}); 
     callback(port); 
    }); 
} 

function clickHandler(e) { 
    setPort(function (port) { 
     if (port) { port.postMessage({key: 'message', value: true}); } 
    }); 
} 

---

編輯：順便說一下，你應該重複使用的端口，它是一種點的。如果你每次都重新建立連接，你最好用sendMessage，儘管我想你只是使用上面的代碼進行測試。