CODEWITHSUNDEEP
google-chrome-extension
Shevus
Shevus

Reputation: 3

Chrome Extension Popup - Setting DIV text from background.js function

Thank you for reading.

I am stuck on passing information between my background.js and popup.html!

In this example, I am trying to call testRequest in background.js from popup.html. I have looked at dozens of examples of how to do this and coded as many solutions, but I have not been successful...this is one of the solutions I tried:

Popup.html:

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript"  src="background.js">                
            $(document).ready(function () {
                document.getElementById("test").textContent = chrome.extension.getBackgroundPage.testRequest();
            });
    </script>
    <div id="test"></div>
</body>
</html>

background.js

var testRequest = function(){
return 'yay!';
}

Your help is greatly appreciated!

~Brian

Upvotes: 0

Views: 925

Answers (1)

BeardFist
BeardFist

Reputation: 8201

You could use simple message passing to do this. For example:

Popup.html

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

popup.js

$(function() {
  chrome.runtime.sendMessage({method:"testRequest"},function(reply){
    $('#test').text(reply);
  });
});

background.js

chrome.runtime.onMessage.addListener(function(message,sender,sendRepsonse){
  if(message.method == "testRequest")
    sendResponse(testRequest());
});
function testRequest(){
  return "yay!";
}

Inline code is not allowed in popup.html so we move it all to an external file, you were using jQuery already so don't be afraid to use it more, and if you are using it, don't forget to include it.

Upvotes: 3

Related Questions