将var从background.js传递给popup.js

时间:2013-04-12 08:55:27

标签: jquery google-chrome-extension

我想将 background.js 中的变量"word"发送到 popup.js ,然后在函数中处理它。 问题是我无法发送该变量并以任何方式启动 popup.js

我试过了:

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

据我所知,我可以直接从 popup.js 获取请求,但 popup.js 下没有任何工作。

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

我知道 popup.js 只有在我点击页面操作时才会触发,但当时没有任何反应。

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>

1 个答案:

答案 0 :(得分:1)

由于您想要的变量位于后台页面中,并且弹出窗口仅在您打开时加载,因此您可以使用message passing来执行此操作。在这种情况下,最好将弹出窗口中的消息发送到后台页面,如下所示:

<强> 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
  }
});

编辑:好的,所以我拿了你的代码并编辑了一些,但最初的“工作!”弹出窗口没有任何变化。这些只会有助于防止将来出现问题。

<强>的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"]
}],

我删除了重复的权限,你试图在js部分注入一个css文件。

<强> 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});

你有多个onMessage听众,我将它们合并在一起。

通过这些更改,当点击页面操作时,弹出第一个弹出窗口,然后弹出一个空白弹出窗口,因为单词永远不会设置为任何内容。