{"id":17312823,"url":"https://github.com/xdlrt/web-extension-starter","last_synced_at":"2026-04-07T16:31:37.268Z","repository":{"id":167805816,"uuid":"643402849","full_name":"xdlrt/web-extension-starter","owner":"xdlrt","description":"About 🖥️ Web Extension starter kit built with React, TypeScript, TailwindCSS, Storybook, Vitest, EsLint, Prettier, and Webpack. Supports Google Chrome + Mozilla Firefox + Brave Browser + Microsoft Edge + Opera 🔥","archived":false,"fork":false,"pushed_at":"2023-05-21T06:46:17.000Z","size":541,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T01:16:06.496Z","etag":null,"topics":["chrome-extension","eslint","prettier","react","storybook","tailwindcss","typescript","vitest","webpack"],"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/xdlrt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"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}},"created_at":"2023-05-21T03:33:17.000Z","updated_at":"2023-05-21T06:48:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"e22c2829-71b2-43ed-b9c1-081f1ae9e0fc","html_url":"https://github.com/xdlrt/web-extension-starter","commit_stats":null,"previous_names":["xdlrt/web-extension-starter"],"tags_count":0,"template":true,"template_full_name":"aeksco/react-typescript-web-extension-starter","purl":"pkg:github/xdlrt/web-extension-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdlrt%2Fweb-extension-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdlrt%2Fweb-extension-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdlrt%2Fweb-extension-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdlrt%2Fweb-extension-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xdlrt","download_url":"https://codeload.github.com/xdlrt/web-extension-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdlrt%2Fweb-extension-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31520428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","eslint","prettier","react","storybook","tailwindcss","typescript","vitest","webpack"],"created_at":"2024-10-15T12:44:40.309Z","updated_at":"2026-04-07T16:31:37.250Z","avatar_url":"https://github.com/xdlrt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![GitHub stars](https://img.shields.io/github/stars/xdlrt/web-extension-starter.svg?style=social\u0026label=Stars\u0026style=plastic)]()\n[![GitHub watchers](https://img.shields.io/github/watchers/xdlrt/web-extension-starter.svg?style=social\u0026label=Watch\u0026style=plastic)]()\n[![GitHub forks](https://img.shields.io/github/forks/xdlrt/web-extension-starter.svg?style=social\u0026label=Fork\u0026style=plastic)]()\n[![GitHub contributors](https://img.shields.io/github/contributors/xdlrt/web-extension-starter.svg)](https://github.com/xdlrt/web-extension-starter/graphs/contributors)\n[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)\n[![GitHub issues](https://img.shields.io/github/issues/xdlrt/web-extension-starter.svg)](https://github.com/xdlrt/web-extension-starter/issues)\n[![GitHub last commit](https://img.shields.io/github/last-commit/xdlrt/web-extension-starter.svg)](https://github.com/xdlrt/web-extension-starter/commits/master)\n[![GitHub pull requests](https://img.shields.io/github/issues-pr/xdlrt/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/xdlrt/web-extension-starter.svg)](http://hits.dwyl.com/xdlrt/web-extension-starter)\n[![Tweet](https://img.shields.io/twitter/url/https/github.com/xdlrt/web-extension-starter.svg?style=social)](https://twitter.com/intent/tweet?text=https://github.com/xdlrt/web-extension-starter)\n[![Twitter Follow](https://img.shields.io/twitter/follow/yeshu_in_future.svg?style=social)](https://twitter.com/yeshu_in_future)\n\n![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, Vitest, 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```\npnpm install\npnpm dev\n```\n\n**Scripts**\n\n-   `pnpm dev` - run `webpack` in `watch` mode\n-   `pnpm storybook` - runs the Storybook server\n-   `pnpm build` - builds the production-ready unpacked extension\n-   `pnpm test` - runs Vitest\n-   `pnpm lint` - runs EsLint\n-   `pnpm 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 `manfiest.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 Vitest - note that the `babel.config.js` and associated dependencies are only necessary for Vitest to work with TypeScript.\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-   [Vitest](https://vitest.dev/)\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxdlrt%2Fweb-extension-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxdlrt%2Fweb-extension-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxdlrt%2Fweb-extension-starter/lists"}