Restricting communication with selected tabId in chrome-extension development - google-chrome

Question

I am new to chrome-extension development. I followed some tutorials and later I was playing with the extension . there is something bugging me this extension.
steps to reproduce:
open the devtools in two pages side by side
follow the steps mentioned in github page.
when you click on(any one of the page) 'Insert button to send a message from page to devtools' button in panel, you can see that Html page changes.
then click on the button displayed in page. You can see that in both the panels, button/text is changed.
Is there any filter to restrict this and only change the button/text on clicked page only? I know this is happening because of port.postMessage(message); in background.js page.
I found this but I was not able to make it work.
Any help would be appreciated :)

Answer 1

The communication scheme is simple:
your devtools panel opens a port to the background page
the background page listens on that port and stores a lookup table of tabId-to-port mappings
the background page also listens for messages from content scripts and uses the above lookup table to route the message to a corresponding port channel
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];
});