{"id":13475794,"url":"https://github.com/ivantsov/redux-webext","last_synced_at":"2025-08-03T02:14:06.765Z","repository":{"id":10860885,"uuid":"67285056","full_name":"ivantsov/redux-webext","owner":"ivantsov","description":"Redux for WebExtensions","archived":false,"fork":false,"pushed_at":"2022-06-23T21:58:09.000Z","size":555,"stargazers_count":109,"open_issues_count":15,"forks_count":15,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-22T21:46:42.015Z","etag":null,"topics":["chrome","extension","firefox","react","redux","redux-store","redux-webext","store","webextension","webextensions"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ivantsov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-03T10:41:23.000Z","updated_at":"2025-03-16T04:20:28.000Z","dependencies_parsed_at":"2022-09-15T10:01:30.667Z","dependency_job_id":null,"html_url":"https://github.com/ivantsov/redux-webext","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/ivantsov/redux-webext","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivantsov%2Fredux-webext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivantsov%2Fredux-webext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivantsov%2Fredux-webext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivantsov%2Fredux-webext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivantsov","download_url":"https://codeload.github.com/ivantsov/redux-webext/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivantsov%2Fredux-webext/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268484362,"owners_count":24257660,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","extension","firefox","react","redux","redux-store","redux-webext","store","webextension","webextensions"],"created_at":"2024-07-31T16:01:23.646Z","updated_at":"2025-08-03T02:14:06.732Z","avatar_url":"https://github.com/ivantsov.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries and Frameworks"],"sub_categories":[],"readme":"# redux-webext\n\n[![Build Status](https://travis-ci.org/ivantsov/redux-webext.svg?branch=master)](https://travis-ci.org/ivantsov/redux-webext)\n[![codecov](https://codecov.io/gh/ivantsov/redux-webext/branch/master/graph/badge.svg)](https://codecov.io/gh/ivantsov/redux-webext)\n[![npm version](https://badge.fury.io/js/redux-webext.svg)](https://badge.fury.io/js/redux-webext)\n\nThis package allows you to use [Redux](https://github.com/reactjs/redux) for managing the state of your WebExtension.\n\n## Installation\n\n`npm install redux-webext --save`\n\n## Introduction\n\nUsually WebExtension consists of two basic parts:\n \n* _background page_, where you store the data and process it somehow\n* _UI pages_ (e.g. popup or content scripts), where you show the data from _background page_\n\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cloud.githubusercontent.com/assets/1555792/19413626/dd0f33be-9332-11e6-801f-090ffb8eced4.png\"/\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\nAs you can see, to provide data between _background_ and _UI_ pages you have to use [messages](https://developer.chrome.com/extensions/messaging). Or... actually, you don't have to, because of `redux-webext`:\n\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cloud.githubusercontent.com/assets/1555792/19413725/21031a42-9336-11e6-85ce-d5dc63104936.png\"/\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\nIn a nutshell, `redux-webext` takes care of communication between _background_ and _UI_ pages using Redux. But there are 2 key things that you should understand:\n\n* In _background_ page there is Redux store that contains the entire state of your WebExtension. All logic (actions, reducers etc) is placed in _background_ page as well.\n* _UI_ pages have access to the state via their own Redux stores, but **there are no real actions or reducers**. I said *real* because _UI_ pages might have functions associated with actions in _background_ page. You can think about it like a proxy that allows you to call _background_ actions from _UI_ pages.\n\nThe words above don't make a lot of sense without code, right? So, there's [tutorial with example](https://github.com/ivantsov/redux-webext/tree/master/examples) where you can find how to use `redux-webext` and how it works.\n\n## Examples\n\n* https://github.com/ivantsov/redux-webext/tree/master/examples - simple example with tutorial \n* https://github.com/ivantsov/yandex-mail-notifier-chrome - real extension that uses `redux-webext`\n* https://github.com/armateam/extension - a real and simple extension that uses `redux-webext`\n\n## API\n\n#### `createBackgroundStore(options)` - creates Redux store for _background_ page.\n\n#### Options\n\n- `store` - instance of Redux store.\n- `actions` (optional) - object which keys are types of actions in _UI_ page and values are actions in _background_ page.\n- `onDisconnect` (optional) - function that will be called on destroying _UI_ store (e.g. right after closing a popup).\n\nReturns the provided `store`.\n\n#### Example\n\n```js\nconst store = createStore(reducer); // real Redux store\n\nconst backgroundStore = createBackgroundStore({\n    store,\n    actions: {\n        // \"INCREMENT_UI_COUNTER\" is a string that will be used as a type of action in UI page\n        // \"incrementUICounter\" is an action is background page\n        INCREMENT_UI_COUNTER: incrementUICounter,\n        DECREMENT_UI_COUNTER: decrementUICounter\n    }\n});\n```\n\n#### `createUIStore()` - creates Redux store for _UI_ pages.\n\nReturns `promise` which will be resolved after receiving the current state of _background_ store. And an object with identical to Redux store structure will be passed as resolved result.\n\n#### Example\n\n```js\nasync function initApp() {\n    const store = await createUIStore();\n\n    ReactDOM.render(\n        \u003cProvider store={store}\u003e\n            \u003cApp/\u003e\n        \u003c/Provider\u003e,\n        document.getElementById('app')\n    );\n}\n\ninitApp();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivantsov%2Fredux-webext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivantsov%2Fredux-webext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivantsov%2Fredux-webext/lists"}