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
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Added storybook react + typescript configuration, added example story… Jan 1, 2020
dist
src Updated README.md Jan 2, 2020
.eslintrc.js Added eslint dependencies & .eslintrc.js Jan 1, 2020
.gitignore Added storybook-static to .gitignore Jan 1, 2020
.prettierignore Updated prettier to run against both TS and TSX files Jan 1, 2020
.prettierrc.js Added example to Hello component to inject JS script into current chr… Jan 2, 2020
LICENSE Initial commit Jan 1, 2020
README.md Cleaned up formatting of list bullets Jan 7, 2020
babel.config.js
jest.config.js Added storybook react + typescript configuration, added example story… Jan 1, 2020
package.json Added eslint dependencies & .eslintrc.js Jan 1, 2020
tsconfig.json Added storybook react + typescript configuration, added example story… Jan 1, 2020
webpack.common.js Added SCSS support Jan 1, 2020
webpack.dev.js Webpack working with TS -> includes dev/watch/build scripts Jan 1, 2020
webpack.prod.js Webpack working with TS -> includes dev/watch/build scripts Jan 1, 2020
yarn.lock Added eslint dependencies & .eslintrc.js Jan 1, 2020

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.