{"id":14007191,"url":"https://github.com/abstractalgo/react-browser-extension","last_synced_at":"2025-05-12T05:31:24.471Z","repository":{"id":64523590,"uuid":"444062611","full_name":"abstractalgo/react-browser-extension","owner":"abstractalgo","description":"starter repo for building web browser extensions (MV3) with React v18 and Typescript","archived":false,"fork":false,"pushed_at":"2023-03-23T20:46:39.000Z","size":414,"stargazers_count":52,"open_issues_count":7,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-06T05:12:56.408Z","etag":null,"topics":["browser-extension","chrome","chrome-extension","extension","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/abstractalgo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-03T13:01:15.000Z","updated_at":"2025-02-02T17:17:24.000Z","dependencies_parsed_at":"2024-08-10T10:14:25.039Z","dependency_job_id":null,"html_url":"https://github.com/abstractalgo/react-browser-extension","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/abstractalgo%2Freact-browser-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abstractalgo%2Freact-browser-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abstractalgo%2Freact-browser-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abstractalgo%2Freact-browser-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abstractalgo","download_url":"https://codeload.github.com/abstractalgo/react-browser-extension/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253682072,"owners_count":21946870,"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":["browser-extension","chrome","chrome-extension","extension","react","typescript"],"created_at":"2024-08-10T10:01:53.570Z","updated_at":"2025-05-12T05:31:19.452Z","avatar_url":"https://github.com/abstractalgo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Web Extensions React starter\n\nA starter repo for building browser extensions with React and Typescript.\n\nHere's what you get:\n\n- :atom_symbol: content scripts, popup and options page as three separate React (v18.2+) apps\n- 𝙏𝙎 Typescript (v5.0+) on all apps and other scripts\n- 💬 a common communication channel and storage for all these apps and scripts\n- 🧩 works with Manifest V3 (i.e. works with all Chromium-based browsers and soon Firefox)\n\n## developing your own extension\n\nShort version:\n\n```bash\n# install dependencies in all apps thanks to Yarn workspaces\nyarn\n\n# run\ncd content_scripts/app \u0026\u0026 yarn start\ncd options \u0026\u0026 yarn start\ncd popup \u0026\u0026 yarn start\n\n# to build\nyarn build\n\n# to package into an archive\nyarn zip\n```\n\nMore details:\n\n- learn more about WebExtensions and Manifest files (see [resources](#resources) section)\n- update information inside `manifest.json` (name, description, homepage,...) and update icons\n- code and test your React apps within `/content_scripts/app`, `/options` and `/popup`\n  - all three folders are regular React apps bundled via [Vite](https://vitejs.dev/), so just refer to their `package.json` and `vite.config.js` for config, and write code like you would for any other React app\n  - if you don't need some of these apps or scripts, simply remove them from the project and remove their build steps in the build pipeline (inside `./build.sh`)\n- build/compile your extension by running `yarn build` from the root folder (this executes `./build.sh`), load it in the browser and try it there\n  - you can use generated `./build` folder to load the \"unpacked\" version of the extension in the browser and test it locally (see how [for Chrome](https://developer.chrome.com/docs/extensions/mv3/getstarted/#manifest) or [for Firefox](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#trying_it_out))\n- pack the extension into a single archive\n  - run `yarn zip` from the root folder\n- publish it on the web stores\n  - instructions for [publishing to Chrome Web Store](https://developer.chrome.com/docs/extensions/mv3/hosting/)\n  - instructions for [publishing to Firefox Add-ons](https://extensionworkshop.com/documentation/publish/)\n\n## resources\n\nDocs and guides:\n\n- [Chrome API reference](https://developer.chrome.com/docs/extensions/reference/)\n- [MV3 architecture overview](https://developer.chrome.com/docs/extensions/mv3/architecture-overview/) (Chrome)\n- [Manifest V3 file format](https://developer.chrome.com/docs/extensions/mv3/manifest/)\n- [Anatomy of a Web Extension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension) (Firefox)\n- [Building a cross-browser extension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension)\n- [Porting a Google Chrome extension](https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/)\n\nUseful code repos:\n\n- [mozilla/webextension-polyfill](https://github.com/mozilla/webextension-polyfill)\n- [mozilla/web-ext](https://github.com/mozilla/web-ext)\n- [GoogleChrome/chrome-extensions-samples](https://github.com/GoogleChrome/chrome-extensions-samples) (non-React)\n\n## how it works\n\nWeb extensions, and thus this repo, consist of four large parts, plus the manifest file specifying each of those and some additional meta-information. The parts are: content scripts, action/popup, options page and background scripts. A single web extension can have any combination of these, neither of all of them (i.e. all are optional); only the manifest is mandatory.\n\n- The root folder (`./`) holds basic meta-information about the extension, i.e. its manifest and icons.\n- `/content_scripts` is a place for the extra JS and CSS that gets injected into the pages that you view while your extension is installed and enabled. `/app` folder within it holds the React app where you basically write the entirety of logic, and the remaining files are there to create a container for your React root (similar to how `div#root` exists in `public/index.html` when using a regular CRA).\n- `/popup` is a place for another React app that gets displayed as a popup/dropdown when clicking on the extension's icon displayed near the address bar in the browser.\n- `/options` hosts a React app that serves an Options page for the extension where you can configure and persists whatever some common options.\n- `/worker` is a place for a service worker (MV3) or a background script (MV2). These scripts can never have any UI as a part of it, so it consists only of TS/JS files, and they run in the background.\n\nBy having a very predictable build output (a single JS bundle) for each part of our extension, we can hardcode their script files inside `manifest.json` and that's it - always the same output, always the same entry points and script files, i.e. no need for [programmatic injection](https://developer.chrome.com/docs/extensions/mv3/content_scripts/#programmatic), dynamic loading or anything complex.\n\nThis is a build output:\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1355455/148201165-d4d02ff7-f5ab-4ae4-9222-3dfe7bf9eee0.png\" height=\"200\"/\u003e\n\nYou can see how that exactly matches the files specified inside of `manifest.json`:\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1355455/148199900-da93d2e5-63d3-4174-a5d6-9b93f78217ff.png\" height=\"200\" /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabstractalgo%2Freact-browser-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabstractalgo%2Freact-browser-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabstractalgo%2Freact-browser-extension/lists"}