This Polyfill provides basic support for chrome.storage.sync and chrome.storage.local API outside of chrome extension runtime

readme.md

Chrome Storage Polyfill

This Polyfill provides basic support for chrome.storage.sync and chrome.storage.local API outside of chrome extension runtime. It is using window.localStorage browser API to store data.

How to use?

Inject the script at the top of the script and call following function

chromeStoragePolyfill(dbName?);

If you don't provide any database name as argument for Local Stroage then CHROME_STORAGE_API_WRAPPER_DB will be used as default.

chrome.storage.sync

IMPORTANT! QUOTA limit for chrome.storage.sync was not regarded.

set

chrome.storage.sync.set({key:value},cb?)

Callback is optional which has data as argument. If the Callback is not provided then Promise is returned with data.

get

chrome.storage.sync.get(['key1','key2'],cb?)

Callback is optional which has data as argument. If the Callback is not provided then Promise is returned with data with related key.

clear

chrome.storage.sync.clear(cb?)

Callback is optional which has data as argument. If the Callback is not provided then Promise is returned without any data.

chrome.storage.local

set

chrome.storage.local.set({key:value},cb?)

Callback is optional which has data as argument. If the Callback is not provided then Promise is returned with data.

get

chrome.storage.local.get(['key1','key2'],cb?)

Callback is optional which has data as argument. If the Callback is not provided then Promise is returned with data with related key.

clear

chrome.storage.local.clear(cb?)

Callback is optional which has data as argument. If the Callback is not provided then Promise is returned without any data.

chrome_storage_polyfill.js

const chromeStoragePolyfill = function (dbName) {
    const STORAGE_PREFIX = "CHROME_STORAGE_API_WRAPPER_DB";
    let __db__;

    const _getData = () => {
        const jsonData = window.localStorage.getItem(__db__);
        if (jsonData) {
            return JSON.parse(jsonData);
        }
    };

    const _saveRecord = (newRecords) => {
        const data = _getData(__db__);
        const newData = Object.assign(data, {}, newRecords);
        window.localStorage.setItem(__db__, JSON.stringify(newData));
    };

    function _initDB() {
        window.localStorage.setItem(__db__, JSON.stringify({}));
    }

    function _handleSuccess(cb, record) {
        if (typeof cb === "function") {
            cb(record);
        } else {
            return Promise.resolve(record);
        }
    }

    function _handleError(cb, error) {
        if (typeof cb === "function") {
            cb(error);
        } else {
            return Promise.reject(error);
        }
    }

    const syncStorage = {
        set(record, cb) {
            if (
                !record ||
                typeof record !== "object" ||
                Array.isArray(record)
            ) {
                throw new SyntaxError(
                    "Only Object with key value pairs are acceptable"
                );
            }
            try {
                _saveRecord(record);
                return _handleSuccess(cb, record);
            } catch (error) {
                return _handleError(cb, error);
            }
        },
        get(key, cb) {
            try {
                const data = _getData();
                let result = {};
                if (Array.isArray(key)) {
                    key.forEach((property) => {
                        result[property] = data[property];
                    });
                } else if(key == null){
                    result = data;
                } else {
                    result = data[key];
                }
                return _handleSuccess(cb, result);
            } catch (error) {
                return _handleError(cb, error);
            }
        },
        clear(cb) {
            _initDB();
            return _handleSuccess(cb);
        },
    };

    function _newStorage(dbName = STORAGE_PREFIX) {
        if (!__db__) {
            __db__ = dbName;
        }
        if (_getData()) {
            return syncStorage;
        } else {
            _initDB();
        }
        return syncStorage;
    }

    function _initalizeStorage(dbName) {
        const storage = _newStorage(dbName);
        return {
            sync: storage,
            local: storage,
        };
    }

    if (!window.chrome || (window.chrome && !window.chrome.storage)) {
        window.chrome = window.chrome || {};
        window.chrome.storage = _initalizeStorage(dbName);
    }
};

chromeStoragePolyfill();

Great work! One minor issue chrome.storage.sync.get('key') doesn't work same way as original.