react-typescript-web-extension-starter

by aeksco

:desktop_computer: A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, Jest, ...

464 Stars 31 Forks Last release: Not found MIT License 73 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

GitHub stars GitHub watchers GitHub forks GitHub contributors MIT License GitHub issues GitHub last commit GitHub pull requests PR's Welcome

HitCount Tweet Twitter Follow

React TypeScript Web Extension Starter

:desktop_computer: A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, EsLint, Prettier, Jest, Bootstrap,x & Webpack. Compatible with Google Chrome, Mozilla Firefox, and Brave.

Example Extension Popup

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 a new tab. 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 in Google Chrome

Loading the extension in Brave

In Brave, open up brave://extensions in a new tab. 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 in Brave

Loading the extension in Mozilla Firefox

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

Installed Extension in Mozilla Firefox

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.

Example Storybook Setup

Built with

Misc. References

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.