如何在Chrome扩展程序的选项页面和背景页面之间进行通信 [英] how to communicate between a options page and background page of chrome extension

问题描述

我遇到了问题.通过消息传递，我将DOM数据从内容脚本传输到了后台页面.我想知道的是如何在选项"页面和背景"页面之间建立通信渠道.API chrome.extension.getBackgroundPage()无效.传统消息也不会通过 sendRequest 和 addlistener 传递.如何将这些数据从后台页面传输到选项页面?有人可以提供经过测试的代码段进行解释吗?

I face a problem. Through message passing I transferred DOM data from content script to background page. What i would like to know is how you can establish a communication channel between Options page and background page. The API chrome.extension.getBackgroundPage() is not useful. Nor is traditional message passing through sendRequest and addlistener working . How do i transfer this data from background page to the options page? Could someone provide a tested snippet to explain?

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

this is what i have been trying . In my 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

I retreive the selected_Text at background.html like this

<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():

Now to access the value of this text at the options page options.html i tried 2 methods One was to use chrome.extension.getBackgroundPage() like this:

<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初始化时终止.

init is onload of options.html .This does not give me the value . infact it just terminates at initialization of chrome.extension.backgroundPage.

我尝试的另一种方法是使用不同的问候语从contentscript.js创建一个类似的请求(例如contentscript.js上已经存在的请求)，并在options.html上添加一个侦听器.接收方(选项页)，因为在请求后我在内容脚本上收到了回调.我肯定做错了，不是吗?请帮忙.

Another approach i tried was to create a similar request(like the one already present at contentscript.js) from contentscript.js with a different greeting and add a listener to it at options.html .That doesnt seem to work either at the receiver side(options page) because i get the callback at the contentscript after the request.I am surely doing something wrong , amnt I ?Please help.

推荐答案

第二种方法无效.Options.html在所有时间内并不alive"，只有在选项页面上.因此，它无法侦听来自内容脚本的请求.这正是背景"的目的.

It makes sense for the second approach not work. Options.html is not "alive" all of the time, only when the options page is up. Hence, it cannot listen to requests from the content script. That's exactly what "background" is for.

对于第一种方法(使用getBackgroundPage())，我自己从未使用过此方法，但是它似乎只带回了后台页面的DOM，因此您无法访问后台js中的变量.

As for the first approach (using getBackgroundPage()), I never used this method myself, but it seems to bring back only the DOM of the background page, and therefore you cannot access the variables in the background js.

您最好的选择是将请求从选项页面发送到后台页面，询问该值，例如:

Your best shot should be to send a request from the options page to the background page, asking for this value, e.g.:

内容脚本:

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 在选项之间传递信息和背景页面，因为它们共享同一个页面.

Another, easier but hackier solution is to use localStorage to pass info between the options and background pages, as they both share the same one.

这篇关于如何在Chrome扩展程序的选项页面和背景页面之间进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！