DEV Community

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...

Read full post

Vasily Shelkov • Jan 15 '21

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

or for typescript support

npx create-react-app my-browser-extension --scripts-version react-browser-extension-scripts --template browser-extension-typescript

Bon • Mar 1 '21

Thanks u

Rajvir Singh • Jun 22 '21

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

Bobby • Aug 2 '20

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.

Artem Diashkin • Apr 14 '21

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

Mihail Marian • Mar 7 '21

What alternative do you use? vanilla JS + webpack?

Nyasha (Nash) Nziramasanga • Jul 9 '20

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

Deepak Vishwakarma • Mar 29 '21

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

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

fishsticks89 • Jul 17 '21

Why did you change generate sourcemap to false?

Ron Basumallik • Sep 2 '20

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