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

Question

我面临一个问题。通过消息传递，我将 DOM 数据从内容脚本传输到后台页面。我想知道的是如何在选项页面和后台页面之间建立沟通 channel 。 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>

我像这样在 background.html 中检索 selected_Text

<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 中访问此文本的值，我尝试了 2 种方法
一种是像这样使用 chrome.extension.getBackgroundPage() :

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

init 是 onload 的 options.html 。这没有给我值(value)。事实上，它只是在 chrome.extension.backgroundPage 初始化时终止。

我尝试的另一种方法是使用不同的问候语从 contentscript.js 创建一个类似的请求(就像 contentscript.js 中已经存在的请求一样)，并在 options.html 中添加一个监听器。这在接收端似乎也不起作用(选项页面)因为我在请求后收到 contentscript 的回调。我肯定做错了什么，我不是吗？请帮忙。

Answer 1

第二种方法不起作用是有道理的。 Options.html在所有时间内并不“alive”，只有在选项页面上。因此，它无法监听来自内容脚本的请求。
这正是“背景”的用途。

至于第一种方法(使用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在选项和背景页面之间传递信息，因为它们共享相同的页面。