Browser Extension with React

A minimal example of a browser extension (manifest V3) using React.

Installation

Requirements:

• Google Chrome/Chromium 65+
• Firefox 63+
• npm ^11.12.0

Clone this repo and install dependencies:

git clone https://github.com/herodrigues/react-browser-extension.git
cd react-browser-extension
npm install

To run in development mode:

# watch files in development mode to './dist'
$ npm run dev

To run in production mode:

# build files to './dist'
$ npm 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 dist 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 dist 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 dist directory under that.