Search code examples
javascriptfirefoxfirefox-addonfirefox-addon-sdk

localStorage between panel content script and page content script in firefox addon


I'm creating a firefox addon with addon builder, and I want to save a value from page content, and then read it from panel content script. I want to use localStorage, but I tried and I cannot share the same localStorage between page and panel script. Also I tried with self.port.emit , and this method is working perfectly I can send the value with port.emit and port.on, but this is not what i want because I need to refresh this value every second, and if I use that method then browser is overloaded with port requests, and that's why I want to use localStorage or something which can be stored in a variable and easily accessed from panel script.

here I'm attaching panel script, which will read the value saved with page script.

var panel = require("panel").Panel({
          width: 100,
          height: 100,
          contentScriptFile: data.url("panel_script.js")
    });

here I'm attaching page script which will save a value from page content and panel script will read it.

var pageMod = require("page-mod");
pageMod.PageMod({
    include: "*",
    contentScriptFile: self.data.url("page_script.js"),
    contentScriptWhen: 'ready'
  });

Solution

  • I believe the port system is the recommended route for interacting with a Panel page. However here's how you'd solve the problem you've posted of accessing localStorage for a page via a Firefox add-on.

    var chrome = require('chrome');
    var data = require('sdk/self').data;
    
    var ios = chrome.Cc["@mozilla.org/network/io-service;1"]
                    .getService(chrome.Ci.nsIIOService);
    var ssm = chrome.Cc["@mozilla.org/scriptsecuritymanager;1"]
                    .getService(chrome.Ci.nsIScriptSecurityManager);
    var dsm = chrome.Cc["@mozilla.org/dom/storagemanager;1"]
                    .getService(chrome.Ci.nsIDOMStorageManager);
    
    var uri = ios.newURI(data.url('index.html'), "", null);
    var principal = ssm.getCodebasePrincipal(uri);
    var storage = dsm.getLocalStorageForPrincipal(principal, data.url('index.html'));
    

    With that you'll be able to access the page's localStorage using the storage object as you normally would in a web page. e.g. storage.setItem('key', 'value') and storage.getItem('key').