Firefox extension: share state - firefox

Question

I have a Firefox overlay extension with a tree in a sidebar.
How can I keep the tree state synchronized in several windows?
For example in first window added new item in tree, how update tree in other windows?
If somebody can show minimal code for it (with use code modules, observers, broadcasters or something else), please help.
I read similar question, but it did not help:
Firefox extension - Share common state between two or more windows

Answer 1

The answer in the question you reference is good, but short on explanation. You should read the references to which it links. I have duplicated those links here.
One way to keep state information outside of a window context is to use JavaScript code modules (JSM). The section Sharing objects using code modules talks briefly about doing this. Once you have set up your JSM to share the data, it is merely a matter of informing each window that a change has been made and it should update the displayed state. This is easily accomplished by using an event which you define. All of the sidebars listen for a particular event in their window. Then there is one function in the JSM which runs through all the windows signalling them that they need to update.
The code to signal could look something like:
Components.utils.import("resource://gre/modules/Services.jsm");
function forEachOpenWindow(todo) {
// Apply a function to all open browser windows
var windows = Services.wm.getEnumerator("navigator:browser");
while (windows.hasMoreElements()) {
todo(windows.getNext().QueryInterface(Components.interfaces.nsIDOMWindow));
}
}
function signalUpdateNeeded(window){
let event = window.document.createEvent("Event");
event.initEvent("myExtensionName-UpdateAvailable",false,false);
window.dispatchEvent(event);
}
function sendUpdateAvailableToAllWindows(){
forEachOpenWindow(signalUpdateNeeded);
}
Then in the code for the sidebar:
//This imports your JSM, it does not need the .jsm extension, you can use
// whatever extension you want.
Components.utils.import("chrome://MyExtension/content/moduleName.jsm");
window.addEventListener("myExtensionName-UpdateAvailable",
updateDataFromModule, false);
//Instead you may need the following (or another way to get to the
// top window). What is actually needed will depend on the context in
// which your sidebar code is running. You should see below for code to
// access the main browser window from within a sidebar.
//window.top.addEventListener("myExtensionName-UpdateAvailable",
// updateDataFromModule, false);
function updateDataFromModule(){
//Whatever it is you need to do here.
mylocalVariable = myExtensionModule.dataStructure.whatever;
}
Refactoring the first code section above so that it looks like it is in a module that uses one variable to reduce namespace clutter. The code for the module could be something like:
var EXPORTED_SYMBOLS = [ "myExtensionModule" ];
Components.utils.import("resource://gre/modules/Services.jsm");
var myExtensionModule = {
dataStructure: {
whatever: true,
you: 1,
want: ["here.", "It", "is", "your", "data."]
};
forEachOpenWindow: function(todo){
// Apply a function to all open browser windows
var windows = Services.wm.getEnumerator("navigator:browser");
while (windows.hasMoreElements()) {
todo(windows.getNext()
.QueryInterface(Components.interfaces.nsIDOMWindow));
}
},
signalUpdateNeeded: function(window){
let event = window.document.createEvent("Event");
event.initEvent("myExtensionName-UpdateAvailable",false,false);
window.dispatchEvent(event);
},
sendUpdateAvailableToAllWindows: function(){
this.forEachOpenWindow(this.signalUpdateNeeded);
}
}
I have not actually tested this, so there may be some errors.
Having either your sidebar code access the main browser window, or the JSM code find which sidebar your code is in (in order to send or listen fro events) may be a bit more complicated than you think. You should see Working with windows in chrome code. Specifically, Accessing the elements of the top-level document from a child window. That section provides the following code to access the main browser window from within a sidebar:
var mainWindow = window
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
An alternative is for your JSM to keep a reference to an object in the data structure on which all of the sidebars place listeners. This could be an object which it creates. If you do use this method and choose to use a window, then you need to make sure that handle releasing the reference if the window is closed. If you don't you could end up with a memory leak.