CODEWITHSUNDEEP
jquerygoogle-chrome-extension
Edeph
Edeph

Reputation: 772

Passing var from background.js to popup.js

I want to send a variable "word" from background.js to popup.js where it will be processed in a function. The problem is i cannot send that variable and start the popup.js in any way.

I tried:

chrome.runtime.sendMessage({valoare: word},function atribut(word){}); with and without the function attached.

And from what i heard i can access it without a request straight from popup.js but nothing is working under popup.js.

var selection = chrome.extension.getBackgroundPage().word;
alert(selection);

I understand that popup.js fires only when i click the page action but nothing happens then.

Popup.html:

<html>
<head>
<script src='jquery-1.9.1.min.js'></script>
<script src='jquery-ui.js'></script>
<script type="text/javascript" src="jquery.googleSuggest.js">
<link class="jsbin" href="jquery-ui.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="suggest.min.css" />
<script src="popup.js"></script>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<meta charset=utf-8 />
</head>
<body>
<div id="pop">
     <label for="term">Suggested term: </label>
     <input id="term" style="display: none;"type="text" value=""/>
</div>
</body>
</html>

Upvotes: 1

Views: 3668

Answers (1)

BeardFist
BeardFist

Reputation: 8201

Since the variable you want is in the background page, and the popup is only loaded when you open it, you could use message passing to do this. In this case it would be best to send a message from the popup to the background page like this:

popup.js

chrome.runtime.sendMessage({method:"getWord"},function(response){
  //here response will be the word you want
  console.log(response);
});

background.js

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
  if(message.method == "getWord"){
    //depending on how the word is stored you can do this in one of several ways
    // 1. If it is a global variable, we can just return it directly
    sendResponse(word);
    // 2. It needs to be retrieved asynchronously, in that case we do this
    getWord(sendResponse);
    return true;
    // This passes the ability to reply to the function where we get the info
    // Once we have the info we can just use sendResponse(word); like before
  }
});

Edit: Okay so I took your code and edited some of it, but the initial "Works!" popup worked without any changes. These will just help prevent problems in the future.

manifest.json

"permissions": [
  "tabs", "https://twitter.com/*"
],
"content_scripts": [{
  "matches": ["https://twitter.com/*"],
  "js": ["jquery-1.9.1.min.js", "myscript.js"],
  "css": ["mystyle.css" , "jquery-ui.css", "suggest.min.css"]
}],

I removed the duplicate permission, and you were trying to inject a css file in the js section.

background.js

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
  if(msg.check)
    word = msg.check;
  if(msg.method == "getWord")
    sendResponse(word);
});

script.js

//get the word you want to send
chrome.runtime.sendMessage({check: word});

You had multiple onMessage listeners, I combined them.

With these changes, when clicking the page action, the first popup pops up followed by an empty one as word is never set to anything.

Upvotes: 1

Related Questions