Skip to content
This repository has been archived by the owner on Oct 26, 2021. It is now read-only.

Boilerplate to create a chrome extension with TypeScript and React.

Notifications You must be signed in to change notification settings

kobanyan/ts-react-chrome-extension-boilerplate

Repository files navigation

ts-react-chrome-extension-boilerplate

Build Status Coverage Status codebeat badge Dependency Status devDependency Status

Boilerplate to create a chrome extension with TypeScript and React.

Features

Developing

  1. Clone the repository. git clone https://github.com/kobanyan/ts-react-chrome-extension-boilerplate
  2. Remove .git directory.
  3. Run yarn install.
  4. Change the package information in package.json, i.e. name, description, etc.
  5. Change the package information in resources/manifest.json, i.e. name, description, etc.
  6. Run yarn dev.
  7. Load your extension on Chrome from build/lib.

Unit testing

  1. Run yarn test.

Unit test file's name must be src/**/__tests__/**/*.test.ts?(x).

E2E testing

  1. Run yarn e2e.

E2E test file's name must be src/**/__tests__/**/*.spec.ts.

Packaging

  1. Put your private key file in pem directory. If the key file does not exist, the file will be generated.
  2. Run yarn prod.
  3. Your extension file (.crx) will be generated in dist directory.

Structure

  • build/lib
    JavaScript files transpiled from TypeScript files in src and resource files copied from resources.
  • dist
    Chrome extension file. ([extension-name].crx)
  • pem
    Private key file.
  • resources
    Resource files, i.e. manifest.json, message.json, icon images, etc.
  • scripts
    Build script files.
  • src
    Source files.
  • webpack
    Webpack configuration files.

License

MIT

Author

kobanyan

Credits

This boilerplate is inspired by React Chrome Extension Boilerplate.

About

Boilerplate to create a chrome extension with TypeScript and React.

Resources

Stars

Watchers

Forks

Packages

No packages published