Have ideas to improve npm?Join in the discussion! »


    0.13.1 • Public • Published


    npm version npm downloads
    Build Status Code Climate js-myterminal-style Coverage Status
    Dependency Status devDependency Status peer Dependency Status

    A library of constructs for Google Chrome extensions


    • Storage: chrome.storage.local & chrome.storage.sync
    • Notifications: chrome.notifications

    How to Use

    Directly from a web page

    One can use chrome-extension-helper directly from a web-page by attaching script file to the DOM.

    <!-- Attaching the chrome-extension-helper script -->
    <script type="text/javascript" src="path/to/library/chrome-extension-helper.js"></script>
    <!-- Usage -->
    <script type="text/javascript">

    With Webpack, Browserify or RequireJS

    Install chrome-extension-helper from NPM

    npm install chrome-extension-helper --save-dev

    Consume as an ES6 module

    import * as helpers from 'chrome-extension-helper';


    import helpers from 'chrome-extension-helper';


    import { storage } from 'chrome-extension-helper';

    Consume as a CommonJS module

    var helpers = require('chrome-extension-helper');

    Consume as an AMD

    require(['chrome-extension-helper'], function (helpers) {
        // Consume helpers

    Included wrappers

    Note: The API is tentative and is very likely to change by a great degree in upcoming versions.


    This wrapper around chrome.storage includes a couple of methods to make working with Chrome extension storage a little convenient.

    import { storage } from 'chrome-extension-helper';

    The first step should be initialization.


    When there is an error accessing storage, the function onError is called with a string specifying a reason for the error.

    Once the initialization is done, local or synced properties can be instantiated. Whether you create a local property or a synced property, the constructor is exactly the same but the difference lies in behavior, which is exactly the difference between chrome.storage.local and chrome.storage.sync respectively.

    Below is an example of how a synced property can be created.

    const colorMode = storage.createSyncedProperty(
        'color-mode', // Key used in store
        colorModes, // A set of possible values for the property
        value => {
            const bodyDom = document.body;
            bodyDom.className = bodyDom.className
                .replace(/ (light|dark)/, '')
                + ` ${value}`;
            document.querySelector('#color-mode').innerText = value;
        } // A handler to reflect a change on the UI

    The above snippet creates a synced property with the supplied name in store, that can have the specified possible values and a change to the property (locally or from a different extension instance, as this is a synced property) will be automatically reflected on the UI according to the passed handler. The returned property has the following properties/methods attached:

    • name - The name of the property
    • values - An array of possible values for the property
    • set - A function that takes in a new value and a callback that is passed with the value when the update is complete
    • get - A function that is called with the current value once it is retrieved from storage
    • load (optional) - A handler that accepts a value and can handle change to the value. Currently, it is used internally to reflect changes on the UI and is not supposed to be used from external code.
    • read - A function that reads the current value of the property and loads it using the loader. Internally, it's as simple as calling a get and using the value in a load.


    This wrapper around chrome.notifications currently only includes a single method for being able to create a basic notification with a title, message and an icon.

    import { notifications } from 'chrome-extension-helper';
    const showError = message => {
                iconUrl: 'icons/error.png',
                title: 'There was an error!',

    Below are the required parameters:

    • id - This is required to create a notification, could be any unique string
    • An object containing iconUrl, title and message. Due to a limitation, the icon being used needs to be defined in the manifest file as you can see here.


    • Implement more wrappers
    • Write unit-tests


    npm i chrome-extension-helper

    DownloadsWeekly Downloads






    Unpacked Size

    17.7 kB

    Total Files


    Last publish


    • avatar