Playing a sound file when the pop up is closed (Google extensions)

Question

I am developing a Google extension to play a set of songs. The extension has a pop-up to do volume-control. I use jPlayer to play songs.

I am facing two problems:

1. If the pop-up is closed, the music stops (as the code for the player is in the pop-up. How can I keep playing the music in background?
2. How can I remember variables when the pop up is closed? e.g Lets say I have a variable status which indicates the current status of the player (playing/stopped). The problem is, since the variable is destroyed when the pop-up is closed, how can I remember them between pop-ups

Answer 1

1. Don't embed the player in the pop-up, put it in the background page. Then, problem 2 is also avoided.

2. Use localStorage (or chrome.storage) to save data.
   Another option is to pass messages to the background page. This can generally be done using message passing. In pop-ups, it's much easier to use chrome.extension.getBackgroundPage():

   // popup.js:
   var background = chrome.extension.getBackgroundPage();
   // On load?
   var data = background.saved_data;
   
   // ... Later, when data changes, update data:
   background.saved_data = data;
   

Here's an example of using the chromeless Youtube player in the background page of a Chrome extension to play videos: https://stackoverflow.com/a/9379277/938089 (all files are included).