Grommet Web Extension Starter

Web extension starter kit built with Grommet, React, Styled Components, Babel, Webpack, Jest, Enzyme, ESLint, Prettier, Husky.

Compatible with Google Chrome, Mozilla Firefox, Microsoft Edge and Brave Browser.

Getting Started

Install dependencies and start local development

npm install (or yarn)
npm start

Load extension in Chrome

1. Visit chrome://extensions and enable Developer mode

2. Choose Load unpacked and point to the dist directory in your new project

Load extension in Firefox

1. Go to Add-ons from menu
2. In Manage Your Extensions, select Debug Add-ons from the settings menu
3. Choose Load Temporary Add-on... and point to the manifest file in the dist directory of your new project

Load extension in Edge

1. Visit edge://extensions and enable Developer mode
2. Choose Load unpacked and point to the dist directory in your new project

Load extension in Brave

1. Visit brave://extensions and enable Developer mode
2. Choose Load unpacked and point to the dist directory in your new project

Scripts

npm run build - Builds a production-ready unpacked extension
npm start - Runs webpack in watch mode
npm test - Runs test suite
npm run lint - Runs linter on source files
npm run prettify - Formats all source files

VSCode Settings

Prettier

1. Install the Prettier - Code formatter extension from the marketplace
2. Open VS Code's user settings/preferences as JSON and put the following:

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true

If you want to limit the scope to the current project only, create a new file .vscode/settings.json in the root of your project and paste the settings from above.

ESLint

Install the ESLint extension from the marketplace to enable seamless linting as you type in VSCode.

EditorConfig

Install the EditorConfig extension from the marketplace.

Built with

• Grommet
• React
• Styled Components
• Babel
• Webpack
• ESlint
• Prettier
• Husky
• Lint staged
• Jest
• Enzyme
• Web Extension Polyfill
• Webpack Chrome Extension Reloader

References

• Chrome Extension Developer Guide
• Firefox Extension Developer Guide