/react-typescript-chrome-extension-starter

:desktop_computer: A Chrome Extension starter kit built with React, TypeScript, SCSS, Storybook, Jest, EsLint, Prettier, Webpack and Bootstrap

Primary LanguageJavaScriptMIT LicenseMIT

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