https://github.com/atif-aqeel/react-parcel-extension

React Parcel Extension
https://github.com/atif-aqeel/react-parcel-extension

chrome-extension manifest-v3 npm parcel react react-dom

Last synced: 23 days ago
JSON representation

React Parcel Extension

• Host: GitHub
• URL: https://github.com/atif-aqeel/react-parcel-extension
• Owner: Atif-Aqeel
• Created: 2024-10-15T06:13:42.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-10-17T19:59:47.000Z (28 days ago)
• Last Synced: 2024-10-20T06:00:40.421Z (26 days ago)
• Topics: chrome-extension, manifest-v3, npm, parcel, react, react-dom
• Language: JavaScript
• Homepage:
• Size: 104 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Chrome Extension built with React + Parcel

## Fun Practice

### Development

```Shell

npm run watch

```

Starts the watcher for building project when a file changed.

### Building

```Shell

npm run build

```

Preps your app for deployment. Minifies all files, piping them to the `src/build` folder.

### Step 1: Creating Project Files

manifest.json file for providing information about Chrome extension, Every extension has a JSON-formatted manifest file, named manifest.json, that provides important information like name, version, and permissions

### Step 2: Creating package.json

'watch' command watches your main.js and compiles if there was a change or if dependencies are imported from main.js.

'build' command builds your files into the src/build/main.js file.

### Step 3: Creating files and folders

Create a source folder

Create a components folder in src folder

Create main.js ,popup.js and popup.html files

### Step 4: Writing the Popup

The popup appears at the top of the bar in Chrome when a user clicks the icon of the extension.

### Step 5: Rendering React App

At this point, main.js should listen to messages which are coming from popup.js.

### Testing it

For testing your extension:

If you didn’t build your files, build them by running the npm run build command

Go to “chrome://extensions”

Check the “Developer Mode” switcher

Click the “Load Unpacked” button, then select your project folder