한 번 더 : 오류 : 연결 해제 된 포트 개체를 사용하려고 시도하는 방법?

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

무엇인지 내가 임의 탭에 contextMenu를 버튼을 클릭하고 meessage을 보내려고하고있는 중이 야.

무슨 일이 일어나는가는 내가 처음 클릭 할 때 아무 것도 일어나지 않고 오류도 발생하지 않습니다. 두 번 클릭하면 메시지가 사라집니다.

다른 탭으로 전환하고 메뉴 버튼을 클릭하면 Error: Attempting to use a disconnected port object 오류가 발생합니다. 내가 다시 메시지가 성공적으로

보내지을 클릭하면 내가 때마다 연결이 끊긴 포트

아이디어를 var port = chrome.runtime.connect({name: "CONTENTSCRIPT"});하지만 오류를 사용하려고했다?

Answer 1

chrome.tabs.query은 비동기입니다.

query이 콜백을 실행하고 포트를 설정하기 전에 즉시 반환하는 setPort()을 실행합니다. 현재 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을 사용하는 것이 좋습니다. 위의 코드를 테스트에만 사용했다고 가정합니다.