create-react-app (CRA) is probably the most common way to build, develop, and deploy React apps. A couple of weeks ago, I was working on a chrome extension. I wanted to use CRA to do it, but CRA only supports SPA out of the box.
So I decided to take it a step further. Here will be sharing how to customize CRA to fit our needs to develop a chrome extension (a link to the full code at the end).
You already have a manifest file created by CRA but we need to change it to match the extension requirements
Notice that we have index.html for the options page, and popup.html for our extension popup.
Go ahead and create (inside src) a folder for the options and one for your popup. Also, create your background.js file.
duplicate the index.html file and rename it to popup.html
create .env file and add the following
This is important since chrome doesn't allow inline script js code
Now we need to customize CRA. For this we will be using 4 great packages:
1 & 2 to override CRA webpack default configurations. 3 to copy our static assets and 4 to support multiple pages. so go ahead and install them.
Now where all the magic happens. Create config-overrides.js in your root folder with the following code
To make everything play together we just need to modify the scripts in package.json to use react-app-rewired and it will look like this:
Like any other CRA project, run the development cmd with
Wepback will create a dist folder Load it as an unpacked extension in Chrome. And when you are ready to publish your extension you can use the build command.
if everything went as planned your popup will look like this. And the best part is if you change your code you will see it instantly 🥳
I published the full boilerplate of on GitHub, so you can check the code if you'd like or just clone to develop your own extension.
Room for improvements:
Let me know if you have any questions, thoughts or suggestions!