CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Ronno
Ronno

Reputation: 23

Difficulty passing messages between background and content script in chrome extension

I'm attemtping to send a message from the content script to the background script, and send a response in return.

This is what I've got in my background script: 

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message received");
    if(request.activeStatusRequest == "disable"){
      sendResponse({activeStatusUpdate: "disable"});
    }else if(request.activeStatusRequest == "enable"){
      sendResponse({activeStatusUpdate: "enable"});
    }
    return true;
});

This is what I've got in my content script: 

printReviews.onclick = function(element) {
  if(printReviews.classList.contains("activeButton")){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: `${injectionLiteralGETURL}`}
        );
    });

    toggleClasses(printReviews, "activeButton", "inactiveButton");

    chrome.runtime.sendMessage({activeStatusRequest: "disable"}, function(response){
      console.log("response received");
      console.log(response.activeStatusUpdate);
    });
  }
  else {
    toggleClasses(printReviews, "inactiveButton", "activeButton");
    chrome.runtime.sendMessage({activeStatusRequest: "enable"}, function(response){
      console.log("response received");
      console.log(response.activeStatusUpdate);
    });
  }
  };

The rest of the above code works as expected, except that the none of the console logs in the content script run. The console log in the background script does run, however. Anyone got any ideas as to what I've done wrong?

Upvotes: 0

Views: 877

Answers (1)

Aym_jl
Aym_jl

Reputation: 11

If you want to try another method, you could try to add a listener in the content script

Content.js

    chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        console.log("Message received  from background", response.type, response.activeStatusUpdate);
        switch(request.type){
            case 'SomeFirstAction'
                break;

            case 'SomeSecondAction'
                break;
        }

    });

Background.js

    chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        console.log("Message received");
        if(request.activeStatusRequest == "disable"){
          sendMessageToCurrentTab({type: 'SomeFirstAction', activeStatusUpdate: "disable"});
        }else if(request.activeStatusRequest == "enable"){
          sendMessageToCurrentTab({type: 'SomeSecondAction', activeStatusUpdate: "enable"});
        }
        // return true; -> not needed with that method
    });


    function sendMessageToCurrentTab(message){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, message);
        }
    }

To have played with callbacks between popup/background/content-script, I prefer just play with messages,because when using sendResponse, the manner it works, it open a port to communicate, but if something change (tab close, popup close), you will have an error because the port will be closed too. Using the 'Full send message manner', the background need to clearly target the receiver tab.

I also recommand you to use a type or some unique action attribute, because all listener will listen to all action. It will identify the action and it's purpose. Here I just used a switch in the content script, but the background could use the same logic.

Maybe it's not the greatest way of doing things, but it works well for me.

Hope this can help you

Upvotes: 1

Related Questions