how to communicate between a options page and background page of chrome extension

◇◆丶佛笑我妖孽 提交于 2021-02-06 11:53:18

问题


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?


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>

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>

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 is onload of options.html .This does not give me the value . infact it just terminates at initialization of chrome.extension.backgroundPage.

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.


回答1:


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.

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

Content script:

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

Background page:

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

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.



来源:https://stackoverflow.com/questions/8790106/how-to-communicate-between-a-options-page-and-background-page-of-chrome-extensio

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!