how to get data from the background to be displayed in popup page

Question

i want to display the array data i have in the background when the get data button is clicked but nothing is done when i click the button am very new for chrome ext. thanks.

manifest.json:

{
    "name":"modz",
    "manifest_version":2,
    "version":"1.0",
    "description":"this ext. will help you record all the urls you have visited",

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

  },

    "browser_action":
    {
    "default_icon":"icon.png",
    "default_popup":"popup.html"
    },

    "permissions":[
          "tabs"
        ]

}

background.js:

var data=[];
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    var url = tab.url;
    if (url!=="undefined" && changeInfo.status=="complete")
  {
   data.push (tab.url);
   alert(data.length);
  }
  }

); 
chrome.runtime.onMessage.addListener(function(message,sender,sendrespose){
//send the array data back
});

popup.js:

document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('btn').addEventListener('click',function(){
    chrome.runtime.sendMessage("getdata");
   });
});

popup.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\modz\Desktop\modz_extention\popup.js"></script>
    <style type="text/css">
     body{
       width:440px;
     }
    </style>
</head>
<body>
<input  id="btn"  type="button"  value="get data" />
<div id="data"></div>

</body>
</html>

Include a response function in [sendMessage](https://developer.chrome.com/extensions/runtime#method-sendMessage) that does something with the data. Then background.js calls `sendrespose(data)`. — Teepeemm, Jul 11 '15 at 19:52
could you please give me a code snippet as am very new to chrome ext and also the button dosent work could you please help me with that thank you — mohamed hussein, Jul 11 '15 at 23:13
I would recommend [this answer](http://stackoverflow.com/a/16325442/2336725) or [this question](http://stackoverflow.com/q/16066317/2336725). — Teepeemm, Jul 12 '15 at 00:02
please post your previous comment as an answer as it was my answer so i could accept it — mohamed hussein, Jul 12 '15 at 03:36

score 2 · Accepted Answer · answered Jul 13 '15 at 14:17

The official reference for messaging is here. In your case, you’d want background.js to have

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    sendResponse({"dataArray":data});
});

popup.js would have

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('btn').addEventListener('click',function(){
        chrome.runtime.sendMessage({},function(response){
            document.getElementById("data").textContent = response.dataArray.toString();
        });
    });
});

This would also work in a content script. But if the content script were running at the default document_end, it wouldn’t need the DOMContentLoaded event, since document_end happens afterward.

This is actually sending an empty message (the empty object {}). If there were different messages you wanted to send, you’d want to change that. This is also why message isn’t used in background.js.

Since you’re not really sending a message, another approach is to use getBackgroundPage. background.js wouldn’t need the listener, and popup.js would have:

chrome.runtime.getBackgroundPage(function(backgroundWindow){
    document.getElementById("data").textContent = backgroundWindow.data.toString();
});

Two more things:

popup.html can’t use the absolute path to popup.js. Put both in the extension directory, and use a relative path: src="popup.js".
Google recommends that you transition background pages to event pages. The biggest difference is that you can’t have the global variable data in event pages (you can, but it gets reset when the event page reloads). If you have trouble getting that working, I’d recommend getting your extension working as a background page, and then posting another question.

how to get data from the background to be displayed in popup page

1 Answers1