크롬 확장 개발에서 선택된 탭으로의 통신 제한

Question

크롬 확장 개발을 처음 사용했습니다. 나는 튜토리얼을 따라 갔고 나중에는 extension으로 게임을했다. 이 확장 프로그램을 저에게 괴롭히는 무언가가 있습니다.

단계 재현 :

• 은 옆에 두 페이지 측면의 DevTools로를 열
• 은 GitHub의 페이지에 언급 된 단계를 수행합니다.
• 패널의 '삽입 버튼을 클릭하여 페이지에서 devtools로 메시지를 보내려면'버튼을 클릭하면 Html 페이지가 변경되었음을 알 수 있습니다.
• 페이지에 표시된 버튼을 클릭하십시오. 두 패널 모두에서 버튼/텍스트가 변경되었음을 알 수 있습니다.

제한을 두거나 클릭 한 페이지의 버튼/텍스트 만 변경하는 필터가 있습니까? background.js 페이지의 port.postMessage(message); 때문에이 문제가 발생했다는 것을 알고 있습니다.

나는 this을 찾았지만 제대로 작동하지 못했습니다.

어떤 도움을 주시면 감사하겠습니다 :)

Answer 1

통신 방식은 간단하다 :

1. 당신의 DevTools로 패널은 배경 페이지
배경 페이지가 해당 포트에서 수신
2. 과에 포트를 엽니 다 TabId - 포트 매핑의 조회 테이블을 저장합니다.
3. 배경 페이지는 콘텐츠 스크립트의 메시지를 수신하고 위의 조회 테이블을 사용하여 메시지를 chrome.runtime.onMessage는이 때문에

DevTools로 - panel.js 포트 채널을 대응

var port = chrome.runtime.connect(); 

port.onMessage.addListener(message => { 
    $id('insertmessagebutton').innerHTML = message.content; 
}); 

$id('executescript').onclick =() => 
    runContentScript({code: "console.log('Content script executed')"}); 

$id('insertscript').onclick =() => 
    runContentScript({file: "inserted-script.js"}); 

$id('insertmessagebutton').onclick =() => { 
    runContentScript({code: "document.body.innerHTML='<button>Send to panel</button>'"}); 
    runContentScript({file: "messageback-script.js"}); 
}; 

function runContentScript(params) { 
    port.postMessage(
     Object.assign({ 
      tabId: chrome.devtools.inspectedWindow.tabId, 
     }, params) 
    ); 
} 

function $id(id) { 
    return document.getElementById(id); 
} 

background.js는

var tabPorts = {}; 

chrome.runtime.onConnect.addListener(port => { 
    let tabId; 
    port.onMessage.addListener(message => { 
     if (!tabId) { 
      // this is a first message from devtools so let's set the tabId-port mapping 
      tabId = message.tabId; 
      tabPorts[tabId] = port; 
     } 
     if (message.code || message.file) { 
      delete message.tabId; 
      chrome.tabs.executeScript(tabId, message); 
     } 
    }); 
    port.onDisconnect.addListener(() => { 
     delete tabPorts[tabId]; 
    }); 
}); 

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { 
    const port = sender.tab && tabPorts[sender.tab.id]; 
    if (port) { 
     port.postMessage(message); 
    } 
}); 

chrome.tabs.onRemoved.addListener(tabId => { 
    delete tabPorts[tabId]; 
}); 

chrome.tabs.onReplaced.addListener((newTabId, oldTabId) => { 
    delete tabPorts[oldTabId]; 
});