Message isn't passed between background.html and popup.html

Question

I'm trying to pass data that is saved in sessionStorage from background.html to popup.html

background.html:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  data = sessionStorage.getItem(request.tabId);
  alert(data);
  sendResponse({ data: data });
});

and in popup.html:

chrome.tabs.getSelected(null, function(tab) {
  chrome.extension.sendRequest({ tabId: tab.id }, function(response) { 
    alert(response.data);
  });
});

The popup is opened by a pageAction button, when I click the button I get an alert box with "null" on the popup and then an alert box with the data that I stored in sessionStorage on the background!

Any ideas how to fix this?

Have you considered using localStorage? Then you can access the data directly in the popup without passing messages. — abraham
– abraham, Commented Jan 2, 2012 at 19:51
I want the data to perish as soon as the session is over, isn't localStorage lasting? — Daniel
– Daniel, Commented Jan 2, 2012 at 20:07
localStorage is persistant. You could clear it when the the background page opens the next time though. — abraham
– abraham, Commented Jan 2, 2012 at 22:03

Community · Accepted Answer · 2017-05-23 12:20:14Z

3

You don't need to use message/request APIs. I think this response may help you.

You also don't need sessionStorage, just store your data in a global variable of the background page. It will persist until the browser is closed or until the extension is restarted.

So, here is how I would rewrite your code:

background.html:

var data = {}; // Object storing data indexed by tab id

and in popup.html:

chrome.tabs.getSelected(null, function(tab) {
  alert(chrome.extension.getBackgroundPage().data[tab.id]);
});

Note that chrome.tabs.getSelected is deprecated since Chrome 16, so popup code should be:

chrome.windows.getCurrent(function(win) { 
  chrome.tabs.query({'windowId': win.id, 'active': true}, function(tabArray) {
    alert(chrome.extension.getBackgroundPage().data[tabArray[0].id]);
  }); 
});

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Jan 2, 2012 at 21:06

check_ca

1,7561 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Over a year ago

Thanks for the suggestions, see my own answer to the cause of the problem I was having - I tried using a global object as well as sessionStorage and localStorage to no avail. I still prefer sessionStorage to a global object because I'm storing a few MBs of data and it just seems "right", although I'm open opposing opinions :) Double thanks for telling me about the deprecation of getSelected()!

check_ca Over a year ago

You're welcome. BTW, isn't the sessionStorage object the same one for background page and popup page (since they share the same "domain") ?

check_ca Over a year ago

FYI, localStorage (and I guess sessionStorage) is not really designed to store large objects. Actually, it's quite counter-productive if you look at perfs.

Daniel Over a year ago

I thought sessionStorage would behave the same as localStorage but it didn't work for me. This test case has convinced me to go with a simple object instead :)

Daniel · Accepted Answer · 2012-01-03 06:58:27Z

0

Well, I've done something dumb.

I inspected the background page by opening chrome-extension://[extension-id]/background.html in a tab instead of clicking on "inspect active views: background.html" in the extensions management page. This caused the tab to catch the request and call sendResponse, but the popup expected the REAL background page to call sendResponse (and if I understand Google's documentation regarding message passing, the fact that sendResponse was called twice is root of the problem, because the first call clears the request object)

edited Jan 3, 2012 at 6:58

answered Jan 3, 2012 at 6:47

Daniel

2,9283 gold badges23 silver badges34 bronze badges

Collectives™ on Stack Overflow

Message isn't passed between background.html and popup.html

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related