Skip to content
🖥 A Chrome Extension starter kit built with React, TypeScript, SCSS, Storybook, Jest, EsLint, Prettier, Webpack and Bootstrap
JavaScript TypeScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
dist
src
.eslintrc.js
.gitignore
.prettierignore
.prettierrc.js
LICENSE
README.md
babel.config.js
jest.config.js
package.json
tsconfig.json
webpack.common.js
webpack.dev.js
webpack.prod.js
yarn.lock

README.md

react-typescript-chrome-extension-starter

🖥 A Chrome Extension starter kit built with React, TypeScript, SCSS, Storybook, EsLint, Jest, Bootstrap, & Webpack.

Example Extension Popup

Getting Started

  1. Run the following commands to install dependencies and
yarn install
yarn dev
  1. Open up chrome://extensions in your browser. 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.

Installed Extension

Scripts

  • yarn dev - run webpack in watch mode
  • yarn storybook - runs the Storybook server
  • yarn build - builds the production-ready unpacked extension
  • yarn test -u - runs Jest + updates test snapshots
  • yarn lint - runs EsLint
  • yarn prettify - runs Prettier

Notes

  • Includes ESLint configured to work with TypeScript and Prettier.

  • Includes tests with Jest - note that the babel.config.js and associated dependencies are only necessary for Jest to work with TypeScript.

  • Recommended to use Visual Studio Code with the Format on Save setting turned on.

  • Example icons courtesy of FontAwesome.

  • 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

Example Storybook Setup

Built with

Misc. References

ToDos

You can’t perform that action at this time.