{"id":14984307,"url":"https://github.com/sinanbekar/browser-extension-react-typescript-starter","last_synced_at":"2025-04-04T23:07:33.831Z","repository":{"id":37050014,"uuid":"497378878","full_name":"sinanbekar/browser-extension-react-typescript-starter","owner":"sinanbekar","description":"🚀 React \u0026 TypeScript Starter for developing web extensions with hot reload!","archived":false,"fork":false,"pushed_at":"2025-03-17T17:47:58.000Z","size":429,"stargazers_count":157,"open_issues_count":10,"forks_count":21,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-28T22:12:13.405Z","etag":null,"topics":["browser-extension","chrome-extension","edge","eslint","firefox","firefox-add-ons","google-chrome","jest","opera-extension","prettier","react","redux","redux-persist","redux-toolkit","tailwindcss","typescript","vitejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/sinanbekar.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-28T16:59:33.000Z","updated_at":"2025-03-17T06:56:15.000Z","dependencies_parsed_at":"2023-01-20T14:18:58.494Z","dependency_job_id":"6ef62c3b-50eb-4c7d-b31c-0efa816939b5","html_url":"https://github.com/sinanbekar/browser-extension-react-typescript-starter","commit_stats":{"total_commits":65,"total_committers":3,"mean_commits":"21.666666666666668","dds":"0.46153846153846156","last_synced_commit":"2dccee8bb61713c85b2b91f31e5c530612bd836f"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinanbekar%2Fbrowser-extension-react-typescript-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinanbekar%2Fbrowser-extension-react-typescript-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinanbekar%2Fbrowser-extension-react-typescript-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinanbekar%2Fbrowser-extension-react-typescript-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sinanbekar","download_url":"https://codeload.github.com/sinanbekar/browser-extension-react-typescript-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247261603,"owners_count":20910108,"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-extension","edge","eslint","firefox","firefox-add-ons","google-chrome","jest","opera-extension","prettier","react","redux","redux-persist","redux-toolkit","tailwindcss","typescript","vitejs"],"created_at":"2024-09-24T14:08:49.389Z","updated_at":"2025-04-04T23:07:33.806Z","avatar_url":"https://github.com/sinanbekar.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/sinanbekar/browser-extension-react-typescript-starter/main/public/images/extension_128.png\" alt=\"Browser Extension React \u0026 TypeScript Starter\" width=\"128\"\u003e\n  \u003cbr\u003e\n  \u003ch2\u003e\n    Browser Extension \u003cbr\u003e\n    React \u0026 TypeScript Starter\n    \u003cbr\u003e\n  \u003c/h2\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003eA cross-platform (Chrome, Firefox, Edge, Opera, Brave) web browser extension (Manifest V3 and Manifest V2) starter kit with hot reload support, built with React, Typescript, Redux, Vite, ESLint, Prettier, TailwindCSS, Jest and more! \u003c/p\u003e\n\u003chr /\u003e\n\n\u003cdiv align=\"center\" \u003e\n  \u003ca href=\"https://github.com/sinanbekar/browser-extension-react-typescript-starter/actions\"\u003e\n    \u003cimg src=\"https://github.com/sinanbekar/browser-extension-react-typescript-starter/actions/workflows/ci.yml/badge.svg\" alt=\"CI\"\u003e\n  \u003c/a\u003e\n    \u0026nbsp;\n  \u003ca\u003e\n    \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome\"\u003e\n  \u003c/a\u003e\n    \u0026nbsp;\n  \u003ca href=\"https://github.com/sinanbekar/browser-extension-react-typescript-starter/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/apm/l/atomic-design-ui.svg\" alt=\"MIT License\"\u003e\n  \u003c/a\u003e\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e ·\n  \u003ca href=\"#quick-start\"\u003eQuick Start\u003c/a\u003e ·\n  \u003ca href=\"#important-notes\"\u003eImportant Notes\u003c/a\u003e ·\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e 🚀 **NEW** (experimental) Zustand for state management instead Redux, with [`webext-zustand`](https://github.com/sinanbekar/webext-zustand) package. You can try it now on the branch [`experimental-zustand`](https://github.com/sinanbekar/browser-extension-react-typescript-starter/tree/experimental-zustand)\n\n## Features\n\n- **Instant HMR** (hot reload)[^1]\n- Write once run on any browser\n- Global Redux support with persist option. Effortless communication between content, background, popup, options, and more pages.\n- Provides a basic content example and popup, options, and welcome pages with all React\n- Latest Manifest V3 support\n- Manifest V2 support (beta)\n- Dynamic manifest.json\n- Includes ESLint configured to work with TypeScript and Prettier\n- Includes tests with Jest\n\n#### Built with\n\n- React\n- TypeScript\n- Redux (toolkit and redux-persist)\n- TailwindCSS\n- Vite\n- Jest\n- ESLint\n- Prettier\n- simple-git-hooks (lightweight husky alternative)\n- nano-staged\n\n[^1]: While it is fully supported and stable in most cases, hard reloading is rarely recommended.\n\n## Browser Support\n\n| [![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](/) | [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](/) | [![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](/) | [![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)](/) | [![Brave](https://raw.github.com/alrra/browser-logos/master/src/brave/brave_48x48.png)](/) |\n| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |\n| ✔                                                                                             | ✔ (Beta)                                                                                         | ✔                                                                                       | ✔                                                                                          | ✔                                                                                          |\n\n## Quick Start\n\nEnsure you have\n\n- [Node.js](https://nodejs.org) 16 or later installed\n- [Yarn](https://yarnpkg.com) installed\n\n### Use the Template\n\n#### GitHub Template\n\n[Create a repo from this template on GitHub](https://github.com/sinanbekar/browser-extension-react-typescript-starter/generate).\n\n**_or_**\n\n#### Clone to local\n\nIf you prefer to do it manually with the cleaner git history\n\n\u003e **Note** If you don't have yarn installed, run: npm install -g yarn\n\n```bash\nnpx degit sinanbekar/browser-extension-react-typescript-starter my-web-extension\ncd my-web-extension\ngit init\n```\n\nThen run the following:\n\n- `yarn install` to install dependencies.\n- `yarn dev` to start the development server.\n- `yarn build` to build an unpacked extension.\n\n- **Load extension in Chrome (Chromium, Manifest V3)**\n\n  - Go to the browser address bar and type `chrome://extensions`\n  - Check the `Developer Mode` button to enable it.\n  - Click on the `Load Unpacked Extension` button.\n  - Select your `dist` folder in the project root.\n\n- **Load extension in Firefox (Manifest V2)**\n\n  - Go to the browser address bar and type `about://debugger`\n  - Click on the `Load Temporary Add-on` button.\n  - Select your `dist-firefox-v2` folder in the project root.\n\n### Available Commands\n\n- `yarn clean` to remove dist folder. `dev` and `build` commands call this command.\n- `yarn format` to fix code with eslint and prettier.\n- `yarn lint` to call ESLint and Prettier.\n- `yarn test` for testing.\n\n### Redux\n\nYou can use redux (redux-toolkit) as state manager between popup, background, content and custom pages. Read the documentation for more.\n\n#### [@eduardoac-skimlinks/webext-redux](https://github.com/eduardoacskimlinks/webext-redux)\n\n### Bundling\n\n#### [@crxjs/vite-plugin](https://github.com/crxjs/chrome-extension-tools)\n\n\u003e **Note** This plugin powers the development side of this starter.\n\u003e\n\u003e docs: https://crxjs.dev/vite-plugin\n\u003e\n\u003e Special thanks to [@jacksteamdev](https://github.com/jacksteamdev) and contributors for this amazing plugin.\n\n## Contributing\n\nThis repository is following the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) standard.\n\n## License\n\nMIT © [Sinan Bekar](https://sinan.engineer)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinanbekar%2Fbrowser-extension-react-typescript-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsinanbekar%2Fbrowser-extension-react-typescript-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinanbekar%2Fbrowser-extension-react-typescript-starter/lists"}