{"id":15711381,"url":"https://github.com/myterminal/chrome-extension-helper","last_synced_at":"2026-04-24T16:40:18.378Z","repository":{"id":57198465,"uuid":"192593053","full_name":"myTerminal/chrome-extension-helper","owner":"myTerminal","description":"A library of constructs for Google Chrome extensions","archived":false,"fork":false,"pushed_at":"2022-08-20T05:07:12.000Z","size":24,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-07T09:35:33.279Z","etag":null,"topics":["chrome-extensions"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/myTerminal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-18T18:30:01.000Z","updated_at":"2022-08-03T23:35:50.000Z","dependencies_parsed_at":"2022-09-16T14:10:28.700Z","dependency_job_id":null,"html_url":"https://github.com/myTerminal/chrome-extension-helper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Fchrome-extension-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Fchrome-extension-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Fchrome-extension-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Fchrome-extension-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/myTerminal","download_url":"https://codeload.github.com/myTerminal/chrome-extension-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246358189,"owners_count":20764365,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extensions"],"created_at":"2024-10-03T21:12:45.775Z","updated_at":"2026-04-24T16:40:18.330Z","avatar_url":"https://github.com/myTerminal.png","language":"JavaScript","funding_links":["https://ko-fi.com/Y8Y5E5GL7"],"categories":[],"sub_categories":[],"readme":"# chrome-extension-helper\n\n[![npm version](https://badge.fury.io/js/chrome-extension-helper.svg)](https://badge.fury.io/js/chrome-extension-helper)\n[![npm downloads](https://img.shields.io/npm/dt/chrome-extension-helper.svg)](https://www.npmjs.com/package/chrome-extension-helper)\n[![License](https://img.shields.io/github/license/myTerminal/chrome-extension-helper.svg)](https://opensource.org/licenses/MIT)  \n[![Build Status](https://travis-ci.org/myTerminal/chrome-extension-helper.svg?branch=master)](https://travis-ci.org/myTerminal/chrome-extension-helper)\n[![Code Climate](https://codeclimate.com/github/myTerminal/chrome-extension-helper.png)](https://codeclimate.com/github/myTerminal/chrome-extension-helper)\n[![js-myterminal-style](https://img.shields.io/badge/code%20style-myterminal-blue.svg)](https://www.npmjs.com/package/eslint-config/myterminal)\n[![Coverage Status](https://img.shields.io/coveralls/myTerminal/chrome-extension-helper.svg)](https://coveralls.io/r/myTerminal/chrome-extension-helper?branch=master)  \n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/Y8Y5E5GL7)  \n[![NPM](https://nodei.co/npm/chrome-extension-helper.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/chrome-extension-helper/)\n\nA library of constructs for Google Chrome extensions\n\n## Wrappers\n\n* Storage: `chrome.storage.local` \u0026 `chrome.storage.sync`\n* Notifications: `chrome.notifications`\n\n## How to Use\n\n### Directly from a web page\n\nOne can use *chrome-extension-helper* directly from a web-page by attaching script file to the DOM.\n\n    \u003c!-- Attaching the chrome-extension-helper script --\u003e\n    \u003cscript type=\"text/javascript\" src=\"path/to/library/chrome-extension-helper.js\"\u003e\u003c/script\u003e\n    \n    \u003c!-- Usage --\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        chromeExtensionHelper.storage.initializeStorage();\n    \u003c/script\u003e\n\n### With [Webpack](https://webpack.js.org), [Browserify](http://browserify.org) or [RequireJS](http://requirejs.org)\n\nInstall *chrome-extension-helper* from NPM\n\n    npm install chrome-extension-helper --save-dev\n\nConsume as an ES6 module\n\n    import * as helpers from 'chrome-extension-helper';\n\nor\n\n    import helpers from 'chrome-extension-helper';\n\nor\n\n    import { storage } from 'chrome-extension-helper';\n\nConsume as a CommonJS module\n\n    var helpers = require('chrome-extension-helper');\n\nConsume as an AMD\n\n    require(['chrome-extension-helper'], function (helpers) {\n        // Consume helpers\n    }\n\n### Included wrappers\n\n\u003e **Note:** The API is tentative and is very likely to change by a great degree in upcoming versions.\n\n#### Storage\n\nThis wrapper around `chrome.storage` includes a couple of methods to make working with Chrome extension storage a little convenient.\n\n    import { storage } from 'chrome-extension-helper';\n\nThe first step should be initialization.\n\n    storage.initializeStorage(onError);\n\nWhen there is an error accessing storage, the function `onError` is called with a string specifying a reason for the error.\n\nOnce 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.\n\nBelow is an example of how a synced property can be created.\n\n    const colorMode = storage.createSyncedProperty(\n        'color-mode', // Key used in store\n        colorModes, // A set of possible values for the property\n        value =\u003e {\n            const bodyDom = document.body;\n\n            bodyDom.className = bodyDom.className\n                .replace(/ (light|dark)/, '')\n                + ` ${value}`;\n\n            document.querySelector('#color-mode').innerText = value;\n        } // A handler to reflect a change on the UI\n    );\n\nThe 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:\n\n- `name` - The name of the property\n- `values` - An array of possible values for the property\n- `set` - A function that takes in a new value and a callback that is passed with the value when the update is complete\n- `get` - A function that is called with the current value once it is retrieved from storage\n- `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.\n- `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`.\n\n#### Notifications\n\nThis 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.\n\n    import { notifications } from 'chrome-extension-helper';\n\n    const showError = message =\u003e {\n        notifications.showSimpleNotification(\n            'error',\n            {\n                iconUrl: 'icons/error.png',\n                title: 'There was an error!',\n                message\n            }\n        );\n    }\n\nBelow are the required parameters:\n\n- `id` - This is required to create a notification, could be any unique string\n- 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](https://github.com/myTerminal/chrome-text-stash/blob/master/src/manifest.json).\n\n## To-do\n\n* Implement more wrappers\n* Write unit-tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyterminal%2Fchrome-extension-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmyterminal%2Fchrome-extension-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyterminal%2Fchrome-extension-helper/lists"}