如何在Chrome扩展程序的选项页面和后台页面之间进行通信

Question

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

---

这就是我一直在尝试的。

    <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>

我在 background.html 中这样检索所选文本：

我在 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>

现在，要在选项页面options.html中访问此文本的值，我尝试了两种方法。其中一种是使用chrome.extension.getBackgroundPage()，如下所示：

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

init是options.html的onload事件。但它并没有给我想要的值，实际上它只是在chrome.extension.backgroundPage的初始化时终止了。

我尝试了另一种方法，从contentscript.js创建一个类似于已经存在的请求（像contentscript.js中已有的那个），并使用不同的问候语添加一个监听器到options.html。但接收方（选项页面）似乎也无法工作，因为我在请求之后在contentscript中得到了回调。我肯定做错了什么，对吗？请帮忙。

- user964001

---

为什么chrome.extension.getBackgroundPage() API是无用的？ - check_ca

Answer 1

第二种方法无法起作用是有道理的。Options.html并不总是处于活动状态，只有在选项页面打开时才会活跃。因此，它无法监听来自内容脚本的请求。 这正是“background”所用之处。

至于第一种方法（使用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.
  });
});

另一个更简单但不太正规的解决方案是使用 localStorage 在选项页和后台页面之间传递信息，因为它们共享同一个存储空间。

- ronme

---

getBackgroundPage会获取到背景页的所有属性，包括所有window变量。 - fiatjaf

sendrequest已过时。 - Muhammad Umer