Chrome-extension: How to send message from content.js to popup.js - Page_Action

Question

Chrome v64.

I want to send a message from content.js to popup.js.

I managed to send a message from popup.js to content.js. But how to do it the opposite way? I have also downloaded a sample extensions, which also don't work.

Do I have to add a special permission? I tried one time messaging and long running message channel.

Permissions:

 "permissions": [
    "background",
    "tabs",
    "activeTab",
    "storage",
    "webRequest",

Content.js

chrome.runtime.sendMessage({
    data: "mauzen"
}, function (response) {
   return true;
});
debugger;
var port = chrome.runtime.connect({
    name: "knockknock"
});
port.postMessage({
    joke: "Knock knock"
});
port.onMessage.addListener(function (msg) {
    debugger;
    if (msg.question == "Who's there?")
        port.postMessage({
            answer: "Madame"
        });
    else if (msg.question == "Madame who?")
        port.postMessage({
            answer: "Madame... Bovary"
        });
});

Background.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    sendResponse({
        data: "background"
    });
    if (request.data === "success") {
        alert("success");
    } else {
        //alert(request.data);
    }
});

console.assert(port.name == "knockknock");
port.onMessage.addListener(function (msg) {
    if (msg.joke == "Knock knock")
        port.postMessage({
            question: "Who's there?"
        });
    else if (msg.answer == "Madame")
        port.postMessage({
            question: "Madame who?"
        });
    else {
        port.postMessage({
            question: "background"
        });
    }
});

Popup.js

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    sendResponse({
        data: "popup"
    });
    if (message.data === "success") {
        alert("success");
    } else {
        // alert(message.data);
    }
});

chrome.runtime.onConnect.addListener(function (port) {
    console.assert(port.name == "knockknock");
    port.onMessage.addListener(function (msg) {
        if (msg.joke == "Knock knock")
            port.postMessage({
                question: "Who's there?"
            });
        else if (msg.answer == "Madame")
            port.postMessage({
                question: "Madame who?"
            });
        else {
            port.postMessage({
                question: "popup"
            });
        }
    });
});

Answer 1

This is what I found out, testing around a bit.

To send a message from the content.js script to your popup you do the following:

 chrome.runtime.sendMessage({
                    data: "Hello popup, how are you"
                }, function (response) {
                    console.dir(response);
                });

and in your popup.js:

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    sendResponse({
        data: "I am fine, thank you. How is life in the background?"
    }); 
});

The message sent from content.js to popup.js will only be received, when your Popup is active (=open)

, i.e. you click on your page_action (browser_action) icon in the toolbar and the popup appears, then it is open/active. And only then, it can send and receive messages!

---

You can test it like this

Put the following script in you content.js:

 var timer = 0;
  var si = setInterval(() => {
            try {
               chrome.runtime.sendMessage({
                    data: "Hello popup, how are you"
                }, function (response) {
                    console.dir(response);
                });
                timer++;
                if (timer === 5) {
                    clearInterval(si);
                }
            } catch (error) {
                // debugger;
                console.log(error);
            }
        }, 2000);

and in your **popup.js:**

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    alert("I am popup!");
    sendResponse({
        data: "I am fine, thank you. How is life in the background?"
    }); 
});

As long as the setInterval executes you can click on your extension icon, to open the popup, then it will show an alert.