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

Question

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.

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