How can I communicate between background.js and popup.js?

Question

I have an extension, with a background script:

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

and a content script:

"content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["scripts/content_script.js"]
    }
  ],

a popup window (popup.html), and a popup script (popup.js). popup.js is not registrated into manifest,and it deals with popup.html look, and listen for user actions made in popup.html, such as clicking a button.

I want to make an extension, what emails the current tab's page, and for this, I need to get the page DOM with the content_script, pass data (DOM) to the background script. After this, when the user triggers an event in popup.html, popup.js catches this event, and I want popup.js to be able to get the passed data(DOM) from background.js. How could I make this? So, my question is, how could I communicate between background.js and popup.js?

I found an answer to my own question:

Thanks Elvis, I think I solved the problem; I only need to get the DOM of site in content script, but my question's solution was this:

content_script.js

 // SEND DOM structure to the background page
    chrome.extension.sendRequest({dom: "page DOM here"});

background.html

<html>
<head>
<script>
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.dom != "")
        var theDOM = request.dom;
        console.log(request.dom); // page DOM here -> works
        chrome.extension.sendRequest({theDOM: theDOM}); // theDOM : "page DOM here"
});
</script>
</head>
<body>
</body>
</html>

popup.js

var dom;
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.theDOM != ""){
        console.log("popup request: "+request.theDOM);
        dom = request.theDOM;
    }
});

// HANDLE TAB_1 REQUESTS (EMAIL PAGE)
// ---------------------------------
$("#send").click(function(){
    console.log(dom); // page DOM here
}

Thanks for the help ;)

Elvis D'Souza · Accepted Answer · 2012-05-01T10:07:56.033

4

You can do Message Passing. From the documentation:

Use this in your content script:

chrome.extension.sendRequest({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

It sends {greeting: "hello"} to the background. Notice the callback specified

The background page can listen to these requests using:

chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

The arguments to the sendResponse function will be passed to the callback

edited May 01 '12 at 10:07

answered May 01 '12 at 09:54

Elvis D'Souza

2,273
1
23
31

Thanks, i already read this article in the documentation, and already inserted in my code, but two problems still existing -its only messaging between `contentscript` and `backgroundscript`, and not between `backgoundscript` and `popup.js`. Notice: i have 3 scripts, 1 content, 1 background, and 1 for editing popup.htmls look. - other problem that in console, i see no alert/text, so message parsing doesnt works at me. -> do i need to trigger an event to send the request? – Attila Kling May 01 '12 at 10:18
When the event is triggered in the popup, you can communicate to the background in the same way as stated in the answer (i.e. using chrome.extension.sendRequest) and the background can return the data it wants. – Elvis D'Souza May 01 '12 at 10:35
Ohh, as soon as i changed background.js to background.html, message parsing started to work, one issue solved :) **Elvis**: ok, i give it a try, thanks – Attila Kling May 01 '12 at 10:36
Great. You should write an answer (that explains your solution) and accept it as the correct answer – Elvis D'Souza May 01 '12 at 10:38
Problems again, after doing things shown in question, i want to handle data like this in popup.js: `console.log(dom); //page DOM here || alert(dom); //page DOM here || var body = dom; alert(body); //undefined` . I just cant figured out what could be the problem :( – Attila Kling May 01 '12 at 12:08
This is in 3 consecutive lines? Also, it would be great if you could create a separate question for this – Elvis D'Souza May 01 '12 at 18:39
`sendRequest` and `onRequest` are obsolete. Please use `sendMessage` and `onMessage` instead. since chrome 33 – xkeshav Dec 02 '14 at 07:07

How can I communicate between background.js and popup.js?

1 Answers1

Linked