CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Hick
Hick

Reputation: 36414

How to communicate between popup.js and background.js in chrome extension?

The message from popup.js is being posted twice to background.js, but I get absolutely nothing from background.js.

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"));



  }
};


}


chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse){
        console.log("hello");
        if(request.msg == "login") {
            //alert(request.password);
            login(request.username,request.password);}
    }
);

  chrome.extension.onConnect.addListener(function(port) {
  console.log("Connected .....");
  port.onMessage.addListener(function(msg) {
        console.log("message recieved "+ msg);
        port.postMessage("Hi Popup.js");
  });
});

popup.js:

function login(){
alert(document.login.username.value);
chrome.extension.sendRequest({ msg: "login",username:document.login.username.value,password:document.login.password.value});
document.getElementById('openBackgroundWindow').visbility = "hidden";

}

$(document).ready(function (){

checkUserAuth();
console.log("Inside");
$("#openBackgroundWindow").click(login);

});


function checkUserAuth(){
console.log(localStorage.getItem("apiKey"));
if(localStorage.getItem("apiKey") != null)
    {
        $("#openBackgroundWindow").visbility ="hidden";
    }
}


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

Upvotes: 80

Views: 72765

Answers (5)

Sha'an
Sha'an

Reputation: 1276

Manifest Version 3

Example for sending message from popup.js to background.js:

manifest.json:

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "./popup.html"
  },
  "background": {
    "service_worker": "./background.js"
  }
}

popup.html:

<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <button id="btn">Trigger BG</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js:

document.getElementById('btn').addEventListener('click', () => {
  // how we send data:
  chrome.runtime.sendMessage({ greeting: 'hello' });
});

background.js:

// how we receive data:
chrome.runtime.onMessage.addListener((msg, sender, res) => {
  console.log(msg);
});

You can swap the content of popup and background js files to send data from background.js to popup.js

Docs: Message passing, chrome.runtime

Upvotes: 2

jatin gupta
jatin gupta

Reputation: 71

What I understand from answers is: The problem is that if bg.js is trying to communicate with Popup.js, if it is not active it will return error that "no suitable endpoint".

Therefore one can do either of the following.

  1. STORAGE - Save the shared message temporarily using chrome Storage
  2. DOM MANIPULATION - Save the message permanently in DOM itself (if wanted to manipulate DOM) as end result.
  3. LONG LIVE CONNECTION - Create a long term connection with popup. (using chrome onConnect method)
  4. FULL DUPLEX - Use handshake method by double function call from each side and using response callback to pass the answer.

Upvotes: 2

GorvGoyl
GorvGoyl

Reputation: 49570

Full Duplex Communication

Call background.js methods asynchronously from popup.js and get response back:

Popup.js:

// wrapper method 
function getContent() {
    callEventPageMethod('getContent', 'some parameter', function (response) {
        doSomethingWith(response);
    });

}

//generic method
function callEventPageMethod(method, data, callback) {
    chrome.runtime.sendMessage({ method: method, data: data }, function (response) {
        if(typeof callback === "function") callback(response);
    });
}

Background.js/eventPage.js: 

chrome.runtime.onMessage.addListener(callback);
function callback(obj, sender, sendResponse) {
    if (obj) {
        if (obj.method == 'getContent') {
            getContent(sendResponse);
        } else if (obj.method == 'othermethod') {

        }
    }
    return true; // remove this line to make the call sync!
}


//some async method
function getContent(sendResponse) {
    chrome.storage.local.get(["mydata"], function (obj) {
        var mydata = $.trim(obj["mydata"]);
        sendResponse(mydata);
    });
}

If need to call popup.js methods from background.js then swap the above code in files.

Method 2: You can load the reference of background page in a variable and access all methods. 

var bgPage = chrome.extension.getBackgroundPage();
 var response =  bgPage.someMethodInBGPage();

Upvotes: 4

Kishan Rajdev
Kishan Rajdev

Reputation: 1965

This can be used in 2 way communication. Same code goes in both the files.

popup.js & background.js

//for sending a message
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {

});

//for listening any message which comes from runtime
chrome.runtime.onMessage.addListener(messageReceived);

function messageReceived(msg) {
   // Do your work here
}

Ref: https://developer.chrome.com/extensions/runtime#method-sendMessage

Upvotes: 23

Sudarshan
Sudarshan

Reputation: 18554

Method - A :
Using Long Lived Connections you can communicate from background.js to popup.js of extension page for any activities( Here i have included popup.html and only initiated sample communication from popup.js as a sample)

background.js

 chrome.extension.onConnect.addListener(function(port) {
      console.log("Connected .....");
      port.onMessage.addListener(function(msg) {
           console.log("message recieved" + msg);
           port.postMessage("Hi Popup.js");
      });
 })

popup.js

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

Method - B :
Direct Manipulation of DOM* if your end result is modification of DOM, you can achieve with this

popup.html

<html>
    <head>
        <script src="popup.js"></script>
    </head>
    <body>
        <div id="x" value="m">Some thing</div>
    </body>
</html>

background.js

var views = chrome.extension.getViews({
    type: "popup"
});
for (var i = 0; i < views.length; i++) {
    views[i].document.getElementById('x').innerHTML = "My Custom Value";
}

Method - C :

Using Long Lived Connections you can communicate from background.js to popup.js of extension page for any activities( Here i have not included popup.html and initiated sample communication from background.js;

background.js

chrome.browserAction.onClicked.addListener(function(tab) {

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

});

I have changed your code and made it running after eliminating some stuff and making it a simple version. Add your code for AJAX requests and HTML DOM on this skeleton( Make sure you add <script> tag in head section and put chrome.extension.onConnect.addListener out of (xhr.readyState == 4) code;)

popup.html

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

manifest.json

{
    "name": "Demo",
    "version": "1.0",
    "manifest_version": 2,
    "description": "This is a demo",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": ["<all_urls>",
        "storage",
        "tabs"
    ]
}

background.js

chrome.extension.onConnect.addListener(function(port) {
    console.log("Connected .....");
    port.onMessage.addListener(function(msg) {
        console.log("message recieved " + msg);
        port.postMessage("Hi Popup.js");
    });
});

popup.js

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

Upvotes: 142

Related Questions