https://github.com/upmostly/react-chrome-extension

Boilerplate code to build a Chrome extension in React
https://github.com/upmostly/react-chrome-extension

chrome-extension chrome-extensions javascript react reactjs

Last synced: 5 days ago
JSON representation

Boilerplate code to build a Chrome extension in React

• Host: GitHub
• URL: https://github.com/upmostly/react-chrome-extension
• Owner: upmostly
• Created: 2020-04-09T12:08:45.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T18:57:10.000Z (almost 2 years ago)
• Last Synced: 2024-11-07T20:51:30.109Z (13 days ago)
• Topics: chrome-extension, chrome-extensions, javascript, react, reactjs
• Language: JavaScript
• Size: 1.21 MB
• Stars: 169
• Watchers: 5
• Forks: 51
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## react-chrome-extension

![Alt text](./react-chrome-extension.png?raw=true "Optional Title")

This is the first in a series of React boilerplate projects to help web developers learn and understand React. This project actually came about as I was creating my latest project, [StyleStash - Save Your favorite CSS Styles](https://stylestash.dev).

## Video Code Walkthrough

If you're more of a visual learner, I've recorded a [20 minute video walkthrough of this project](https://www.youtube.com/watch?v=4x0lQu1TOCQ).

### Local Testing

`npm start`

Runs the app in the development mode.


Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

### Testing Inside Chrome

This project needs to be built in order to take advantage of the Chrome Extension API, such as using the Content script to get the extension's ID, or using the Chrome Storage API. These features cannot be used when running this project locally.

To load as a developer extension inside of Chrome:

1. `npm run build` 


2. Navigate to `chrome://extensions/` in your browser 


3. Toggle the `Developer mode` switch on in the top right hand corner 


4. Click the `Load unpacked` button in the top left corner 


5. Select the `build` folder inside of this project folder 


Builds the app for Chrome to the `build` folder.