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.
It doesn't support multiple pages (if you want to have options page and popup for your extension)
You only use the production build version which makes it harder to debug.
After every change in your code, you need to re-run the build cmd
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).
Step 1: ⚛ create a react app
npx create-react-app extension
Step 2: Modify public/manifest.json
You already have a manifest file created by CRA but we need to change it to match the extension requirements
Like any other CRA project, run the development cmd with
npm run start
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 🥳
Source code
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.
Final thoughts
Room for improvements:
minimize the background.js file
optimization
use webpack-extension-reloader?
Let me know if you have any questions, thoughts or suggestions!