DEV Community

Cover image for Create Chrome Extension in React

Create Chrome Extension in React

Louis Bayard on March 19, 2020

When I moved to Edge weeks ago, I found there's no built-in strong password generator in Edge. Then I decide write one for it. Most of the extensi...
Collapse
 
vasilyshelkov profile image
Vasily Shelkov

Hi, I've created a repo in order to skip having to do these steps which I aim to maintain in case anyone is interested. You can check out the github repo

or just try it out:

npx create-react-app my-browser-extension --scripts-version react-browser-extension-scripts --template browser-extension
Enter fullscreen mode Exit fullscreen mode

or for typescript support

npx create-react-app my-browser-extension --scripts-version react-browser-extension-scripts --template browser-extension-typescript
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dim0147 profile image
Bon

Thanks u

Collapse
 
rajvirsingh1313 profile image
Rajvir Singh

Can you add some examples in your readme like I am trying to make my own BlockSite extension, just for fun.

Collapse
 
619 profile image
Bobby

Reactjs in a chrome extension completely ruins the built in message passing capabilities. I found that using reactJS for my popup, background, and content scripts meant none of the 3 parts could talk to each other anymore.

Collapse
 
nemrosim profile image
Artem Diashkin

I'm describing this issue here:
medium.com/litslink-frontend-devel...

Collapse
 
mihailthebuilder profile image
Mihail Marian

What alternative do you use? vanilla JS + webpack?

Collapse
 
nyashanziramasanga profile image
Nyasha (Nash) Nziramasanga

Thanks for sharing was extremely helpful, for anyone using React + TypeScript you can use: $npx create-react-app my-app --template typescript in Stage 1 instead of $npx create-react-app extension

Collapse
 
deepakshrma profile image
Deepak Vishwakarma

you don need all these script.
To pass u u can create .env file

REACT_APP_INLINE_RUNTIME_CHUNK=false
REACT_APP_GENERATE_SOURCEMAP=false
REACT_APP_BUILD_PATH=dist
Enter fullscreen mode Exit fullscreen mode

and for move file

MACHINE="$(uname -s)"
if [[ $MACHINE =~ "Darwin" ]]; then
    mv dist/index.html dist/popup.html
else
    move dist\index.html dist\popup.html
fi
Enter fullscreen mode Exit fullscreen mode
Collapse
 
fishsticks89 profile image
fishsticks89

Why did you change generate sourcemap to false?

Collapse
 
spothedog1 profile image
Ron Basumallik

Hello, how could I include an Image in the Popup? I'm trying to include a button in the Popup with an image as the button but I can't figure out how to import the image. The source image file isn't reachable by the Popup. Thanks

Collapse
 
semivori profile image
Vlad Osadchy

How run script/build.sh on Windows?

Collapse
 
fishsticks89 profile image
fishsticks89

if you have git bash you can run

bash build.sh

Collapse
 
ngoc199 profile image
Migo

You can type in your command prompt bash ./script/build.sh

Collapse
 
gabrielqmatos88 profile image
Gabriel Q. Matos

Nice :D, It's very interesting

Collapse
 
itslooklike profile image
Alexey Masalov

What is the point of creating a dist folder? why is build not suitable by default?

Collapse
 
pradeepradyumna profile image
Pradeep Pradyumna

Good one! Thanks for posting.

Collapse
 
jasoncruzdev profile image
Jason Cruz

somebody copped this site from somebody lol

javascript.plainenglish.io/creatin...

Collapse
 
madrus profile image
Madrus

Good article. Thanks. The extension should also work for Yandex browser.

Collapse
 
sebazc profile image
Sebastián Azcárate

Awesome!

Collapse
 
oh_jeez_rick profile image
Gavin Chan

thank you

Collapse
 
brettfinlay profile image
BrettFinlay

Like it

Collapse
 
ajyjk7 profile image
ajyjk7

I'm going to introduce Firebase in my extension, any tips?

Collapse
 
vasilyshelkov profile image
Vasily Shelkov

Great article though :) and I definitely haven't tackled some questions like:

Is there any performance issue to write extension in React?

Collapse
 
yacinehechmi profile image
yacine717

thank you