chibat/chrome-extension-typescript-starter

Always looking for a good chrome starter. This one is react, TS, Jest, Webpack, and some sample code. Thinking of making a zenhub from github ticket extension.

Summary

chibat/chrome-extension-typescript-starter is a boilerplate template for building Chrome extensions with TypeScript, wired up with Webpack and bundled with React. It comes with Jest for unit tests and includes example code for the standard extension entry points so engineers can focus on their own logic instead of project scaffolding. The project is intended for developers who already use Node.js and optionally Visual Studio Code.

What it is useful for

This starter is useful when an engineer wants a working baseline for a new Chrome extension and does not want to redo the standard tooling setup from scratch. It is preconfigured for TypeScript, Webpack, React, and Jest, and it provides example code covering Chrome Storage, an Options page (Options Version 2), a content script, a background script, and a count-up badge number on the toolbar icon.

The folder layout matches what Chrome expects when loading an unpacked extension: TypeScript source lives in src/typescript, static files in src/assets, and the build output in dist, with generated JavaScript under dist/js. That means the developer can point Chrome at the dist directory once the build runs. It is best suited to extensions that want a React-based UI surface (such as a popup or options page) and prefer writing extension logic in typed TypeScript rather than plain JavaScript.

How engineers can use it

The README documents a short workflow. Prerequisites are Node.js and npm; Visual Studio Code is listed as optional.

1. Install dependencies with npm install.
2. Build the extension with npm run build.
3. For iterative development, run npm run watch in a terminal, or press Ctrl + Shift + B in VS Code to trigger the watch build task.
4. In Chrome, load the unpacked extension from the generated dist directory.
5. Run the test suite with npx jest or npm run test.

The README also mentions importing the project as a Visual Studio Code workspace, but it does not list the actual steps, so engineers should refer to the repository for the current instructions on that. Because this is a starter, the bundled examples (Chrome Storage, options page, content script, background, and badge counter) are reference implementations rather than production-ready code, and users will need to replace or extend them for their own use case. No specific browser support matrix or runtime version requirements beyond a current Node.js are stated, so verify against your target Chrome version before shipping.