CODEWITHSUNDEEP
google-chrome-extensionfirefox-addonstorage
Tom Grundy
Tom Grundy

Reputation: 826

Cross-browser extension storage: chrome.storage or browser.storage or?

I have an extension working in Chrome that uses chrome.storage.local.set and .get. I'm having trouble understanding the WebExtensions API docs in terms of how to port that storage code to Firefox.

Some of the sample code referenced from the WebExtensions API doc uses browser.storage.local.set and .get, but those lines return 'browser is not defined' when I use them in my extension running in Chrome. The WebExtensions API porting doc here suggests that chrome.storage.local.set and .get should work in Firefox and Safari, but, maybe I'm reading them incorrectly?

I have not tried chrome.storage.set and .get in a Firefox extension yet. Should they just work?

Upvotes: 9

Views: 5408

Answers (3)

gal007
gal007

Reputation: 7182

Well, the fact is the namespaces are different. So no, browser won't work on Chrome. I imagine you can add a line at the beginning of your background/content code, with something like:

var browser = (window.browser)? window.browser : window.chrome;

That way you can use "browser" from Chrome and Firefox extensions. But there is still a problem. Maybe you already observed that there are some few differences in the APIs, e.g. Chrome uses callbacks in some messages while Firefox uses Promises.

So, I suggest you using the webextension-polyfill library, that will allow you to use the "browser" object and Promises in any browser.

https://github.com/mozilla/webextension-polyfill

If you are using npm, you can import the production version with:

"webextension-polyfill": "^0.2.1"

After that, you should import the library before doing anything else:

  "background": {
    "scripts": [
      "node_modules/webextension-polyfill/dist/browser-polyfill.js",
      "background/your-code-goes-here.js"
    ]
  },

  "content_scripts": [{
      "matches": ["*://*/*"],
      "js": [
        "node_modules/webextension-polyfill/dist/browser-polyfill.js",
        "content/your-code-goes-here.js"
      ]
    }

And if you are using an iframe, you should import it from there also. E.g.

<script src="../node_modules/webextension-polyfill/dist/browser-polyfill.js"></script>

Hope it helps.

Upvotes: 4

john k
john k

Reputation: 6615

In Chrome, JavaScript APIs are accessed under the chrome namespace. In Firefox and Edge, they are accessed under the browser namespace.

from https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities

So for your case, it sounds like you have to change all chrome.whatever into browser.whatever

Upvotes: 5

Sergii Rudenko
Sergii Rudenko

Reputation: 2684

chrome.storage.set and chrome.storage.get will work in Firefox extension, but better to use storage API.

Here is example of usage: https://github.com/mdn/webextensions-examples/blob/master/navigation-stats/popup.js#L26

The difference with chrome that it's a Promised-based API.

For Safari you can look at settings API.

Also, you can always use cookies or localStorage on your BG page or content script.

Upvotes: 0

Related Questions