Browser Extension using React

A minimal example of a browser extension using React (with Hooks!).

Installation

Requirements:

• Google Chrome/Chromium 65+
• Firefox 63+
• yarn ^1.13.0

Clone this repo and install dependencies:

git clone https://github.com/herodrigues/chrome-react-minimal.git
cd chrome-react-minimal
yarn install

To run in development mode:

# watch files in development mode to './build'
$ yarn start

To run in production mode:

# build files to './dist'
$ yarn run build

Chrome

• Open the Extensions settings (Wrench button > Tools > Extensions or navigate to chrome://extensions.
• On the Extensions settings tab, click the "Developer Mode" checkbox.
• Click the now-visible "Load unpacked extension..." button. Navigate to the directory where you cloned guru-extension repository, then the build/chrome directory under that.

Firefox

• Navigate to about:debugging#addons.
• On the Add-ons tab, click the "Enable add-on debugging" checkbox.
• Click "Load Temporary Add-on" button. Navigate to the directory where you cloned guru-extension repository, then select the manifest.json file under the build/firefox directory.

Opera

• Navigate to opera://extensions.
• On the Extensions settings tab, click the "Developer mode" button.
• Click the "Load unpacked extension..." button. Navigate to the directory where you cloned guru-extension repository, then the build/opera directory under that.