Home/ Questions/Q 8911351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T03:55:16+00:00

Message passing: chrome.extension.onConnect.addListener(function(port) { console.assert(port.name == knockknock); port.onMessage.addListener(function(msg) { if (msg.joke == Knock knock)

  • 0
  Message passing:


  chrome.extension.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 if (msg.answer == "Madame... Bovary")
          port.postMessage({question: "I don't get it."});
      });
    });

This is my background.js:

function login(username,password){

    console.log(username);
var xhr = new XMLHttpRequest();

xhr.open("POST", "http://localhost:3000/login/", true);
xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
data = {"username":username,"password":password};
console.log(JSON.stringify(data));
xhr.send(JSON.stringify(data));
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // JSON.parse does not evaluate the attacker's scripts.
    var resp = JSON.parse(xhr.responseText);
    console.log(resp);
    var lStorage = localStorage;
    localStorage.setItem("username",resp["username"]);
    localStorage.setItem("apiKey",resp["apiKey"]);
    localStorage.setItem("password",resp["password"]);
    console.log(localStorage.getItem("username"));



  }
};


}

So, how do I call chrome.extension.onConnect.addListener(function(port) {} from XHR.onReadyState so that I can send values to popup.js once received by the background.js.

I know that I can’t define chrome.extension.onConnect.addListener(function(port) {} inside XHR.onReadyRequest. Thus, how do I post a message once I receive an API response?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have implemented a sample to cover your case, you can notify popup.js whenever you are done with your AJAX call

    manifest.json

    {
  "name": "Demo",
  "description": "Sample Message Communication",
  "version": "1",
  "permissions": [
    "tabs","<all_urls>"
   ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_icon": "screen.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

    popup.html

    <html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>

    popup.js

    var port = chrome.extension.connect({name: "Sample Communication"});
port.postMessage("Hi BackGround");
port.onMessage.addListener(function(msg) {
        console.log("message recieved"+ msg);
});

chrome.extension.onMessage.addListener(function (msg,sender,call){
    console.log("Message recieved"+msg);
});

    background.js

    chrome.extension.onConnect.addListener(function(port) {
  console.log("Connected .....");
  port.onMessage.addListener(function(msg) {
        console.log("message recieved "+ msg);
        console.log("mesage"+msg);
        searchquotes();
     });
});
function searchquotes(){
console.log("Inside");
var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(data) {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
            chrome.extension.sendMessage("Hi popup.js");
            console.log("Response is recieved");
        }
      } else {
        //callback(null);
      }
    }

var url = 'http://www.w3schools.com/html/default.asp';
xhr.open('GET', url, true);
xhr.send();

}
window.onload = searchquotes;
    • 0