0

I've been trying to figure this out for a while and I simply can't do it on my own - I've looked at quite a few related posts on stackoverflow and I've read and re-read the documentation many times but I must be missing something. The goal of this script is to pass a message to the background script when the user presses a button in the popup. The background script then sends a message to both the popup script and a content script, with data that both scripts need. So far, the background script does receive the message and it successfully sends a message to the non-popup content script, but my popup script gets nothing.

The code in question:

background.js

important_string = "hi"; 
important_boolean = false;

function popupMessageHandler(request, sender, sendResponse){
  console.log("Message from the popup script: " + request.greeting);
  if((important_boolean && request.greeting == "click-onoff")     || 
    (!important_boolean && request.greeting == "popup-activated") ){
    important_boolean = false;
    chrome.browserAction.setIcon({path: "../icons/on-32.png"}); 
  }
  else if((!important_boolean && request.greeting == "click-onoff")    || 
          (important_boolean && request.greeting == "popup-activated") ){
    important_boolean = true;
    chrome.browserAction.setIcon({path: "../icons/off-32.png"});
  }

  if(request.greeting == "popup-activated" || request.greeting == "click-onoff"){
    console.log("Received: " + request.greeting + ", sent a response"); 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {greeting: "I've responded!", impString: important_string, impBoolean: important_boolean});
    });
  }
}


chrome.runtime.onMessage.addListener(popupMessageHandler);

popup.js (the actual usage of the important strings and booleans is omitted for brevity)

var button_onoff = document.getElementById('button_onoff');

important_string = "hi";
important_boolean = false;

// When popup loads, send message to background script to get some data
chrome.runtime.sendMessage({greeting: "popup-activated"});

// When button is clicked, do stuff 
button_onoff.addEventListener('click', function(event) {
  console.log("Button was clicked!");

  chrome.runtime.sendMessage({greeting: "click-onoff"});
});

chrome.runtime.onMessage.addListener(request => {
  console.log("Heard response!");
  important_boolean = request.impBoolean;
  important_string = request.impString;
  onResponse();
  return true;
});

function onResponse(request, sender, sendResponse) {
  console.log("Popup received a repsonse!");
  if(request.greeting == "I've responded!"){
    console.log("Response from the background script: " + request.greeting);
    important_string = request.impString;
    important_boolean = request.impBoolean;
    // Do things with important_string and important_boolean
  }
  return true;
}

content.js

important_boolean = false;

chrome.runtime.onMessage.addListener(request => {
  important_boolean = request.impBoolean;
  important();
  return true;
});


function important() {
   // Do important things with important string and boolean
}

manifest.json

{
  "manifest_version": 2,
  "name": "Extension",
  "version": "1.0",


  "permissions": [
    "<all_urls>",
    "tabs",
    "activeTab"
  ],

  "background": {
    "scripts": ["background.js"]
  },

  "content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_end"
  }
  ],

  "browser_action": {
    "default_icon": "icons/off-32.png",
    "default_title": "Popup",
    "default_popup": "popup/popup.html"
  }
}

popup.html (just in case it's needed)

<!DOCTYPE html>

<html>

  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <link href="popup.css" rel="stylesheet" type="text/css">
    <title>Title</title>
  </head>

  <body>
    <div class="main_popup">
    <a id="button_onoff" class="buttonGreen" title="Clickable Button">Clickable Button</a>
    <script src="popup.js"></script>
    <div id="important_string" class="textIP">Displayed Text</div>
  </div>  
  </body>

</html>

Obviously there's a style sheet but I doubt it's relevant.

Hopefully I've provided enough information to get some help, this issue is very frustrating...

To reiterate, pressing the 'Clickable Button' successfully executes the 'important()' function in my content script but not the 'onResponse()' function in my popup script

Help_Needed
  • 1
  • 1

0 Answers0