0

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

Community
  • 1
  • 1
stafan
  • 155
  • 1
  • 9
  • 2
    Your code adds *three* onMessage listeners because chrome.runtime.onMessage is the actual and preferred API that supersedes chrome.extension.onMessage. Two of the three listeners are those that message to the devtools panel, and both are triggered by a message from a tab. Rework your code. – wOxxOm Mar 08 '17 at 16:27
  • @wOxxOm thanks for the suggestion. Could you please give me some more hint as I am new to this and code is not written by me but that was just an example/reference which I am using. – stafan Mar 08 '17 at 16:40
  • I'd probably have to re-write it completely because I don't like how it's done here. Have you read [messaging documentation](https://developer.chrome.com/extensions/messaging)? The implementation seems straightforward. – wOxxOm Mar 08 '17 at 16:44
  • Ah ok. Yes I did read that but now I will read it again. Thanks anyways for your time :) – stafan Mar 08 '17 at 17:05
  • Please [edit] the question to be on-topic: include a [mcve] that duplicates the problem. For Chrome extensions or Firefox WebExtensions this almost always means including your *manifest.json* and some of the background, content, and/or popup scripts/HTML. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. – Makyen Mar 08 '17 at 21:05

1 Answers1

4

The communication scheme is simple:

  1. your devtools panel opens a port to the background page
  2. the background page listens on that port and stores a lookup table of tabId-to-port mappings
  3. 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];
});
wOxxOm
  • 65,848
  • 11
  • 132
  • 136