saiumesh535 / browser-extension-starter-react

browser-extension-starter-react

Building and configuring browser extension with it's required config is relatively combursome task. So, I decided to make a template which helps to create browser extension using React.

Installation

npm install 

Dev build

This creates development build in dist/dev folder

npm run build-dev

Load extension

Open Chrome browser

• go to chrome://extensions
• Enable Developer mode
• Drag and Drop extension from dist/dev folder

Let's discuss couple of concepts from Browser extension.

manifest:

manifest.json Reference

default_popup Reference

background Reference

content_scripts Reference

Summary

• A content script is injected into each page matching some criteria.
• Background script can be used for all http calls and as well as persisting storage
• Default popup is out html page shows by clicking on extension icon

Source:

V2 version https://developer.chrome.com/docs/extensions/mv2/getstarted/

V3 version https://developer.chrome.com/docs/extensions/mv3/getstarted/