{"id":13402324,"url":"https://github.com/aeksco/react-typescript-web-extension-starter","last_synced_at":"2025-05-16T10:06:07.048Z","repository":{"id":37475686,"uuid":"231162725","full_name":"aeksco/react-typescript-web-extension-starter","owner":"aeksco","description":":desktop_computer: Web Extension starter kit built with React, TypeScript, TailwindCSS, Storybook, Jest, EsLint, Prettier, and Webpack. Supports Google Chrome + Mozilla Firefox + Brave Browser + Microsoft Edge + Opera :fire:","archived":false,"fork":false,"pushed_at":"2024-06-18T09:32:39.000Z","size":3079,"stargazers_count":956,"open_issues_count":13,"forks_count":83,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-05-07T22:35:27.548Z","etag":null,"topics":["brave","chrome-extension","eslint","extension-popup","google-chrome","jest","microsoft-edge-extension","mozilla-firefox","opera-extension","prettier","react","storybook","tailwindcss","typescript","webpack"],"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/aeksco.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":"aeksco"}},"created_at":"2020-01-01T01:14:35.000Z","updated_at":"2025-05-02T14:58:10.000Z","dependencies_parsed_at":"2024-01-08T07:55:44.925Z","dependency_job_id":"82f3b40e-aeff-4ad6-a1cf-51630e42eaf1","html_url":"https://github.com/aeksco/react-typescript-web-extension-starter","commit_stats":{"total_commits":131,"total_committers":10,"mean_commits":13.1,"dds":"0.40458015267175573","last_synced_commit":"d0233f3a7e2ee5e229c8f797370f77e6d62d9ded"},"previous_names":["aeksco/react-typescript-chrome-extension-starter"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Freact-typescript-web-extension-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Freact-typescript-web-extension-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Freact-typescript-web-extension-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Freact-typescript-web-extension-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aeksco","download_url":"https://codeload.github.com/aeksco/react-typescript-web-extension-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254509477,"owners_count":22082891,"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":["brave","chrome-extension","eslint","extension-popup","google-chrome","jest","microsoft-edge-extension","mozilla-firefox","opera-extension","prettier","react","storybook","tailwindcss","typescript","webpack"],"created_at":"2024-07-30T19:01:14.533Z","updated_at":"2025-05-16T10:06:07.026Z","avatar_url":"https://github.com/aeksco.png","language":"JavaScript","funding_links":["https://github.com/sponsors/aeksco"],"categories":["JavaScript"],"sub_categories":[],"readme":"[![GitHub stars](https://img.shields.io/github/stars/aeksco/react-typescript-web-extension-starter.svg?style=social\u0026label=Stars\u0026style=plastic)]()\n[![GitHub watchers](https://img.shields.io/github/watchers/aeksco/react-typescript-web-extension-starter.svg?style=social\u0026label=Watch\u0026style=plastic)]()\n[![GitHub forks](https://img.shields.io/github/forks/aeksco/react-typescript-web-extension-starter.svg?style=social\u0026label=Fork\u0026style=plastic)]()\n[![GitHub contributors](https://img.shields.io/github/contributors/aeksco/react-typescript-web-extension-starter.svg)](https://github.com/aeksco/react-typescript-web-extension-starter/graphs/contributors)\n[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/aeksco/react-typescript-web-extension-starter/blob/main/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/aeksco/react-typescript-web-extension-starter.svg)](https://github.com/aeksco/react-typescript-web-extension-starter/issues)\n[![GitHub last commit](https://img.shields.io/github/last-commit/aeksco/react-typescript-web-extension-starter.svg)](https://github.com/aeksco/react-typescript-web-extension-starter/commits/master)\n[![GitHub pull requests](https://img.shields.io/github/issues-pr/aeksco/react-typescript-web-extension-starter.svg?style=flat)]()\n[![PR's Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)](http://makeapullrequest.com)\n\n[![HitCount](http://hits.dwyl.com/aeksco/react-typescript-web-extension-starter.svg)](http://hits.dwyl.com/aeksco/react-typescript-web-extension-starter)\n[![Tweet](https://img.shields.io/twitter/url/https/github.com/aeksco/react-typescript-web-extension-starter.svg?style=social)](https://twitter.com/intent/tweet?text=https://github.com/aeksco/react-typescript-web-extension-starter)\n[![Twitter Follow](https://img.shields.io/twitter/follow/aeksco.svg?style=social)](https://twitter.com/aeksco)\n\n![React TypeScript Web Extension Starter](https://i.imgur.com/wjIiRSv.png)\n\n:desktop_computer: A Web Extension starter kit built with React, TypeScript, Storybook, EsLint, Prettier, Jest, TailwindCSS, \u0026amp; Webpack. Compatible with Google Chrome, Mozilla Firefox, Brave, and Microsoft Edge.\n\n![Example Extension Popup](https://i.imgur.com/UvOOWlv.png \"Example Extension Popup\")\n\n**Getting Started**\n\nRun the following commands to install dependencies and start developing\n\n```\nyarn install\nyarn dev\n```\n\n**Scripts**\n\n-   `yarn dev` - run `webpack` in `watch` mode\n-   `yarn storybook` - runs the Storybook server\n-   `yarn build` - builds the production-ready unpacked extension\n-   `yarn test -u` - runs Jest + updates test snapshots\n-   `yarn lint` - runs EsLint\n-   `yarn prettify` - runs Prettier\n\n\u003cdetails\u003e\n  \u003csummary\u003eLoading the extension in Google Chrome\u003c/summary\u003e\n\nIn [Google Chrome](https://www.google.com/chrome/), open up [chrome://extensions](chrome://extensions) in a new tab. Make sure the `Developer Mode` checkbox in the upper-right corner is turned on. Click `Load unpacked` and select the `dist` directory in this repository - your extension should now be loaded.\n\n![Installed Extension in Google Chrome](https://i.imgur.com/Y2dQFte.png \"Installed Extension in Google Chrome\")\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eLoading the extension in Brave\u003c/summary\u003e\n\nIn [Brave](https://brave.com/), open up [brave://extensions](brave://extensions) in a new tab. Make sure the `Developer Mode` checkbox in the upper-right corner is turned on. Click `Load unpacked` and select the `dist` directory in this repository - your extension should now be loaded.\n\n![Installed Extension in Brave](https://i.imgur.com/rKsbtcO.png \"Installed Extension in Brave\")\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eLoading the extension in Mozilla Firefox\u003c/summary\u003e\n\nIn [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/), open up the [about:debugging](about:debugging) page in a new tab. Click the `This Firefox` link in the sidebar. One the `This Firefox` page, click the `Load Temporary Add-on...` button and select the `manifest.json` from the `dist` directory in this repository - your extension should now be loaded.\n\n![Installed Extension in Mozilla Firefox](https://i.imgur.com/FKfTw4B.png \"Installed Extension in Mozilla Firefox\")\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eLoading the extension in Microsoft Edge\u003c/summary\u003e\n\nIn [Microsoft Edge](https://www.microsoft.com/en-us/edge), open up [edge://extensions](edge://extensions) in a new tab. Make sure the `Developer Mode` checkbox in the lower-left corner is turned on. Click `Load unpacked` and select the `dist` directory in this repository - your extension should now be loaded.\n\n![Installed Extension in Microsoft Edge](https://i.imgur.com/ykesx0g.png \"Installed Extension in Microsoft Edge\")\n\n\u003c/details\u003e\n\n**Notes**\n\n-   This project is a [repository template](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/) - click the `Use this template` button to use this starter codebase for your next project.\n\n-   Includes ESLint configured to work with TypeScript and Prettier.\n\n-   Includes tests with Jest - note that the `babel.config.js` and associated dependencies are only necessary for Jest to work with TypeScript.\n\n-   Recommended to use `Visual Studio Code` with the `Format on Save` setting turned on.\n\n-   Example icons courtesy of [Heroicons](https://heroicons.com/).\n\n-   Includes Storybook configured to work with React + TypeScript. Note that it maintains its own `webpack.config.js` and `tsconfig.json` files. See example story in `src/components/hello/__tests__/hello.stories.tsx`\n\n-   Includes a custom mock for the [webextension-polyfill-ts](https://github.com/Lusito/webextension-polyfill-ts) package in `src/__mocks__`. This allows you to mock any browser APIs used by your extension so you can develop your components inside Storybook.\n\n**Built with**\n\n-   [React](https://reactjs.org)\n-   [TypeScript](https://www.typescriptlang.org/)\n-   [Storybook](https://storybook.js.org/)\n-   [Jest](https://jestjs.io)\n-   [Eslint](https://eslint.org/)\n-   [Prettier](https://prettier.io/)\n-   [Webpack](https://webpack.js.org/)\n-   [Babel](https://babeljs.io/)\n-   [TailwindCSS](https://tailwindcss.com/)\n-   [webextension-polyfill](https://github.com/mozilla/webextension-polyfill)\n\n**Misc. References**\n\n-   [Chrome Extension Developer Guide](https://developer.chrome.com/extensions/devguide)\n-   [Firefox Extension Developer Guide](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension)\n-   [Eslint + Prettier + Typescript Guide](https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb)\n\n**Notable forks**\n\n-   [capaj](https://github.com/capaj/react-typescript-web-extension-starter) - Chakra-ui instead of TailwindCSS, Storybook removed\n-   [DesignString](https://github.com/DesignString/react-typescript-web-extension-starter) - Vite Js instead of Webpack\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeksco%2Freact-typescript-web-extension-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faeksco%2Freact-typescript-web-extension-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeksco%2Freact-typescript-web-extension-starter/lists"}