ts-react-chrome-extension-boilerplate

Boilerplate to create a chrome extension with TypeScript and React.

Features

• Write code with TypeScript.
• Simple React example of Chrome Extension.
• Unit tests using Jest & Enzyme & Sinon.JS.
• E2E tests using Puppeteer.
• Lint using TSLint & tslint-react.
• Format using Prettier.

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.