react-typescript-web-extension-starter

🖥️ A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, EsLint, Jest, Bootstrap, & Webpack. Compatible with both Google Chrome + Mozilla Firefox.

Getting Started

Run the following commands to install dependencies and start developing

yarn install
yarn dev

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

Loading the extension in Google Chrome

In Google Chrome, 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.

Loading the extension in Mozilla Firefox

In Mozilla Firefox, open up the about:debugging page in your browser. 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.

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.

• Microsoft Edge is not currently supported.

• 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

• Includes a custom mock for the 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.

Built with

• React
• TypeScript
• Storybook
• Jest
• Eslint
• Webpack
• Babel
• Bootstrap
• SCSS
• webextension-polyfill-ts

Misc. References

• Chrome Extension Developer Guide
• Firefox Extension Developer Guide
• Eslint + Prettier + Typescript Guide

ToDos

• Build out README.md
  • Description of tech used
  • Document directory structure
  • Add icons for tech used
  • https://cdn.svgporn.com/logos/jest.svg
  • https://cdn.svgporn.com/logos/react.svg
  • https://cdn.svgporn.com/logos/chrome.svg
  • https://cdn.svgporn.com/logos/firefox.svg
  • https://cdn.svgporn.com/logos/storybook.svg
  • https://cdn.svgporn.com/logos/storybook-icon.svg
  • https://cdn.svgporn.com/logos/typescript-icon.svg
  • https://cdn.svgporn.com/logos/typescript.svg
  • https://cdn.svgporn.com/logos/eslint.svg
  • https://cdn.svgporn.com/logos/webpack.svg
  • https://cdn.svgporn.com/logos/bootstrap.svg