Google chrome 如何在chrome扩展的选项页和背景页之间进行通信

Google chrome 如何在chrome扩展的选项页和背景页之间进行通信,google-chrome,google-chrome-extension,Google Chrome,Google Chrome Extension,我面临一个问题。通过消息传递,我将DOM数据从内容脚本传输到后台页面。我想知道的是如何在选项页面和背景页面之间建立一个沟通渠道。APIchrome.extension.getBackgroundPage()没有用处。通过sendRequest和addlistener传递的传统消息也不起作用。如何将此数据从后台页面传输到选项页面?有人能提供一个经过测试的片段来解释吗 这就是我一直在尝试的。 在我的contentscript.js中 <script> var selec

我面临一个问题。通过消息传递,我将DOM数据从内容脚本传输到后台页面。我想知道的是如何在选项页面和背景页面之间建立一个沟通渠道。API
chrome.extension.getBackgroundPage()
没有用处。通过
sendRequest
addlistener
传递的传统消息也不起作用。如何将此数据从后台页面传输到选项页面?有人能提供一个经过测试的片段来解释吗


这就是我一直在尝试的。 在我的contentscript.js中

    <script>
    var selected_Text ="";
    window.addEventListener("dblclick",function(event){

    selected_Text = String(window.getSelection());
    chrome.extension.sendRequest({greeting: "maprender",name:selected_Text},     function(response) {
        alert("reached here")
        console.log(response.farewell);
        });

//i am to then load options.html on DOM like this 
var Div = document.createElement("iframe");
Div.setAttribute('src', chrome.extension.getURL('options.html'));
Div.setAttribute("style","width:130px;height:80px;position:absolute;left:10px;");
Div.setAttribute("id","xyz");
document.body.appendChild(Div);
</script>

var selected_Text=“”;
addEventListener(“dblclick”,函数(事件){
所选文本=字符串(window.getSelection());
sendRequest({问候语:“maprender”,名称:selected_Text},函数(响应){
警报(“到达此处”)
console.log(response.bye);
});
//然后我将像这样在DOM上加载options.html
var Div=document.createElement(“iframe”);
Div.setAttribute('src',chrome.extension.getURL('options.html');
setAttribute(“样式”,“宽度:130px;高度:80px;位置:绝对;左侧:10px;”);
Div.setAttribute(“id”、“xyz”);
文件.正文.附件(Div);
我在background.html中检索所选的_文本,如下所示

<script>
var Addr_details={
place:null
};
chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {

    if (request.greeting == "maprender")
     {
        alert("reached here sendin resp"+request.name);
        Addr_details.place = request.name;
        sendResponse({farewell: "goodbye"});

     }
    else
      sendResponse({}); // snub them.
  });
</script>

var地址详细信息={
地点:空
};
chrome.extension.onRequest.addListener(
功能(请求、发送方、发送响应){
if(request.greeting==“maprender”)
{
警报(“到达此处发送响应”+请求名称);
Addr_details.place=request.name;
sendResponse({再见:“再见”});
}
其他的
sendResponse({});//怠慢它们。
});
现在,为了在options页面options.html上访问此文本的值,我尝试了两种方法 一个是像这样使用chrome.extension.getBackgroundPage():

<script>
function init(){
var bkg = chrome.extension.getBackgroundPage();
alert("the selected text is "+bkg.Addr_details.place);
}
</script>

函数init(){
var bkg=chrome.extension.getBackgroundPage();
警报(“所选文本为“+bkg.Addr_details.place”);
}
init是options.html的onload。这并没有给我这个值。实际上它只是在chrome.extension.backgroundPage初始化时终止


我尝试的另一种方法是从contentscript.js创建一个类似的请求(如contentscript.js中已经存在的请求),并使用不同的问候语,然后在options.html中添加一个侦听器。这在接收方似乎也不起作用(选项页)因为我在请求后在contentscript得到了回调。我肯定是做错了什么,amnt i?请帮助。

第二种方法不起作用是有道理的。Options.html不是一直处于“活动”状态,只有在选项页面打开时才处于活动状态。因此,它无法侦听来自内容脚本的请求。 这正是“背景”的含义

至于第一种方法(使用getBackgroundPage()),我自己从未使用过这个方法,但它似乎只返回后台页面的DOM,因此您无法访问后台js中的变量

您的最佳选择应该是从选项页面向背景页面发送请求,请求该值,例如:

内容脚本:

chrome.extension.sendRequest({greeting: "retrieveAddr"}, function(response) {
  // do something with response.addr...
});
背景页:

chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {
    switch (request.greeting) {
    case "maprender"):
      alert("reached here sendin resp"+request.name);
      Addr_details.place = request.name;
      sendResponse({farewell: "goodbye"});
      break;
    case "retrieveAddr":
      sendResponse({addr: Addr_details});   

    default:
      sendResponse({}); // snub them.
  });
});

另一个更简单但更黑客的解决方案是在选项和后台页面之间传递信息,因为它们共享同一个页面。

“API chrome.extension.getBackgroundPage()没有用处”为什么?
getBackgroundPage
带来了后台页面的所有属性,包括所有
窗口
变量。sendrequest已过时