Chrome Extension: How to send data from Panel Window to Popup?

Question

I am working on Chrome extension which on clicking extension Icon popsup a window( popup.html ) which contain button for Video Play. Upon clicking of the button opens another button which is created by using window.create of type panel . Upon clicking of PLAY button on popup.html does following:

• Make a DIV enabled
• Create new window by calling window.create with name mypanel.html . It uses panel.js to make ajax call and DOM changes functions.
• Make an Ajax call, get data and play Video

Now thing is, the data I am getting via AJAX call in panel.js . I want to send that data back to pop.html which itself is using file popup.js . How can I send data from panel window to back to Popup Window ?

Answer 1

The standard method of communicating between parts of the extension is described in Messaging documentation .

However, you need to keep in mind that as soon as a popup is closed, it is unloaded and the JavaScript context is destroyed along with it. So it cannot receive messages when closed and will lose all state when reopened.

There are two solutions to this:

1. You could employ a background page to hold state (if set to be persistent) and route messages between parts of the extension, eg a popup can request the current state when opening. This is an old-school solution.

2. If all you need is to pass/persist some data, you can easily employ chrome.storage.local to do it. You can save data with panel.js and react to changes with chrome.storage.onChanged event . The extra bonus is that when a popup reopens, it can simply read the storage to build its initial state.