0

I am new to extension development. Right now I am testing a Firefox extension developed with the Add-on SDK. I want to use HTM5 localstorage to store something from one of the background scripts in my extension, which will be fetched from a different background script of the same extension. npm (Node Packet Manager) has been used, so the problem is I am not able to use browser localStorage object, ReferenceError: localStorage is not defined is what I get.

By surfing I came to know about node-localstorage. I am following the instructions from https://www.npmjs.com/package/node-localstorage. But, when I test my extension with the given code in the link above, I get an error:

Message: Module `localStorage.js` is not found at resource://gre/modules/commonjs/localStorage.js

Stack: 
module.exports@resource://xxx-at-xyz-dot-com/scripts/Somescript.js:3:23 
@resource://xxx-at-xyz-dot-com/index.js:6:11
run@resource://gre/modules/commonjs/sdk/addon/runner.js:147:19
startup/</<@resource://gre/modules/commonjs/sdk/addon/runner.js:87:9 
Handler.prototype.process@resource://gre/modules/Promise-backend.js:933:23
this.PromiseWalker.walkerLoop@resource://gre/modules/Promise-backend.js:812:7
this.PromiseWalker.scheduleWalkerLoop/<@resource://gre/modules/Promise-backend.j s:746:1 –

Here is an approximation of how I was trying to use localStorage:

//Somescript.js (background script)

module.exports = function () {
    this.watchTab = function (tabId, port, url) {
       //some code
       localStorage.setItem("key","value");
       // some code
    }
}

The line localStorage.setItem("key","value") throws an error ReferenceError: localStorage is not defined. This is the reason I am not able to use localStorage.

Makyen
  • 31,849
  • 12
  • 86
  • 121
wittyrandhir
  • 1
  • 4
  • An initial question would be why do you use node-localStorage rather than HTML5 localStorage? Could you give more details about the error? – Haibara Ai Aug 04 '16 at 09:48
  • I tried using HTML5 localStorage but the problem I am getting is RefernceError: window is not defined when I use function storageAvailable(type) { try { var storage = window[type], x = '__storage_test__'; storage.setItem(x, x); storage.removeItem(x); return true; } catch(e) { return false; } } – wittyrandhir Aug 04 '16 at 09:52
  • window object is not available in node.js environment. similarly localStorage is not available. – wittyrandhir Aug 04 '16 at 09:54
  • More details about the error: Stack: module.exports@resource://xxx-at-xyz-dot-com/scripts/Somescript.js:3:23 @resource://xxx-at-xyz-dot-com/index.js:6:11 run@resource://gre/modules/commonjs/sdk/addon/runner.js:147:19 startup/<@resource://gre/modules/commonjs/sdk/addon/runner.js:87:9 Handler.prototype.process@resource://gre/modules/Promise-backend.js:933:23 this.PromiseWalker.walkerLoop@resource://gre/modules/Promise-backend.js:812:7 this.PromiseWalker.scheduleWalkerLoop/<@resource://gre/modules/Promise-backend.j s:746:1 – wittyrandhir Aug 04 '16 at 09:57
  • Why would you use node for chrome extension? – Haibara Ai Aug 04 '16 at 09:59
  • Node is being used for both chrome and firefox. Its a legacy extension which is using npm as package manager which uses grunt and bower. – wittyrandhir Aug 04 '16 at 10:02
  • Sure, I know node is used for package management and build system, I just want to know why node environment is used for background page – Haibara Ai Aug 04 '16 at 10:04
  • I am very new to this node thing. What i can say you is that I have somehting like this "module.exports = function () {//all the code here}" in background script. Inside the curly braces all the functions and var are declared. From one of the function inside, I am trying to store in localStorage. – wittyrandhir Aug 04 '16 at 10:22
  • If you just want to use the modules, see [ES6 Modules](http://exploringjs.com/es6/ch_modules.html). [And I guess chrome extension can't 100% support node.js platform](http://stackoverflow.com/questions/12575965/is-it-possible-to-develop-google-chrome-extensions-using-node-js). – Haibara Ai Aug 04 '16 at 10:30
  • I just want to use localStorage, i am not getting how to do it. Do you have any idea? – wittyrandhir Aug 04 '16 at 10:40
  • Please [edit] much of the information you have provided in comments into your question (e.g. the error info, that you tried HTML5 kocakStorage and how, etc.). Are you actually developing this extension on Firefox (implied by some indications in question) or Google Chrome? If Firefox, what type of extension are you developing (WebExtension, Add-on SDK, bootstrap, or overlay/legacy)? – Makyen Aug 04 '16 at 10:52
  • This is framed as basically a debugging question. Please [edit] your question to include your code. Without code, the question could be considered off-topic. – Makyen Aug 04 '16 at 10:59
  • @wittyrandhir, no additional efforts needed to access HTML5 localStorage in background page ( browser javascript), so just drop node.js – Haibara Ai Aug 04 '16 at 11:03
  • A `window` variable is not defined as a specific object because the scope you are in included many things which could be the `window` you desire. To obtain a reference to the most recently used browser window you can use: `var window = require('sdk/window/utils').getMostRecentBrowserWindow();` – Makyen Aug 04 '16 at 11:06
  • How do i drop node.js? I didn't get. – wittyrandhir Aug 04 '16 at 11:10
  • Is your question really "How to use the package node-localstorage", or "How can I store data to some type of local storage from my Add-on SDK extension?" If your question is the latter, then you should look at the [simple-storage](https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/simple-storage) API. – Makyen Aug 04 '16 at 11:54

1 Answers1

1

When using the Firefox Add-on SDK, you should be strrongly biased towards using the High Level APIs. If those don't do what you want, look at the Low-Level APIs. Only if none of the above work for your needs should you be exploring other options. One of the reasons those APIs exist is to allow you to write add-ons with less concern about having to spend large amounts of effort maintaining your code as Firefox develops and changes.

Assuming your question is really "How can I store data to some type of local storage from my Add-on SDK extension?", then you should be at least considering the simple-storage API, which is a standard part of the Add-on SDK.

Assuming you are using code similar to what is in your question, the following should work:

//Somescript.js (background script)
var simpleStorage= require("sdk/simple-storage"); //Usable elsewhere in your code.
module.exports = function () {
    this.watchTab = function (tabId, port, url) {
        //some code
        simpleStorage.storage["key"] = "value";
        // some code
    }
}

Note: Your code did not make it clear if key and value should be considered variables or string literals.

Note if you are using jpm run to develop and test you add-on, you will need to use a specific profile in order for the storage to persist across multiple runs. You can do this by using the --profile and -nocopy options to jpm.

Makyen
  • 31,849
  • 12
  • 86
  • 121