Firefox WebExtension, store an array in the browser's storage

Question

Can you store an array using browser.storage.local.set or achieve the same result with a different method?

Details:

My extension currently will redirect a website specified through the options.html form. Currently when you specify a new website the old one will be replaced. Is there a way I can append to an array of websites that will be redirected instead of replacing the website?

options.js: (will process information from form in options.html)

function saveOptions(e) {
    e.preventDefault();
    browser.storage.local.set({
        url: document.querySelector("#url").value
    });
}
function restoreOptions() {
    function setCurrentChoice(result) {
        document.querySelector("#url").value = result.url || "reddit.com";
    }
    function onError(error) {
        console.log(`Error: ${error}`);
    }
    var getting = browser.storage.local.get("url");
    getting.then(setCurrentChoice, onError);
}
document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);

redirect.js:

function onError(error) {
    console.log(`Error: ${error}`);
}
function onGot(item) {
    var url = "reddit.com";
    if (item.url) {
        url = item.url;
    }
    var host = window.location.hostname;
    if ((host == url) || (host == ("www." + url))) {
        window.location = chrome.runtime.getURL("redirect/redirect.html");
    }
}
var getting = browser.storage.local.get("url");
getting.then(onGot, onError);

One thought I had was to add a storage location per url, however i would have to also be stored to prevent it getting reset each time options.js is loaded. (Something similar to the below code)

var i = 0;
browser.storage.local.set({
    url[i]: document.querySelector("#url").value
});
i++;

A more logical solution would be for the url storage location to be an array.

If there is a way for url to be an array then redirect.html could contain the following:

if ( (url.includes (host) ) || (url.includes ("www." + host) ) ){
    window.location = chrome.runtime.getURL("redirect.html");
}

Possible duplicate of [Store an array with chrome.storage.local](https://stackoverflow.com/questions/16605706/store-an-array-with-chrome-storage-local) — Daniel Herr, Sep 01 '17 at 19:53
Why do you think you might not be able to store an Array? Seriously. I'd like to be able to change the documentation so that other people don't have this confusion. I'm trying to find where the documentation could be improved to prevent others from getting this impression. — Makyen, Sep 01 '17 at 20:46
@Makyen I think the problem might have been tired eyes. Having looked at the documentation again, both chrome ([link](https://developer.chrome.com/extensions/storage)) and mozilla ([link](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage/StorageArea/set)) clearly state you can store arrays. — Logan Miller, Sep 02 '17 at 08:32

score 0 · Accepted Answer · answered Sep 02 '17 at 08:05

Fresh eyes has solved my problem.

In options.js:

function saveOptions(e) {
    e.preventDefault();
    var array = (document.querySelector("#url").value).split(",");
    browser.storage.local.set({
        url: array
    });

In redirect.js:

function onGot(item) {
    var url = "";
    if (item.url) {
        url = item.url;
    }
    var host = window.location.hostname;
    if ( (url.includes(host)) || (url.includes("www." + host)) ) {
        window.location = chrome.runtime.getURL("redirect/redirect.html");
    }   
}

Firefox WebExtension, store an array in the browser's storage

1 Answers1