CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
mohamed hussein
mohamed hussein

Reputation: 13

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

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>

Upvotes: 0

Views: 617

Answers (1)

Teepeemm
Teepeemm

Reputation: 4508

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.

Upvotes: 2

Related Questions