Quickstart a Chrome Extension with create-react-app
I published my first Chrome extension. It shows a short introduction with a few forms to fill then it replaces your New Tab Page with a custom page.
Developing the extension was easier than I expected, so I recommend trying it out. The setup part was more convoluted than I expected. I’m going to walk you through my first steps to quickstart your React-based Chrome Extension.
Here’s how I modified my
create-react-app project to build a Chrome Extension. We’ll use two features for now, the
popup for configuration and the
Chrome Extension Structure
In the end, our Chrome Extension will be a folder containing:
manifest.json, which describe our extension and its features.
- at least an icon file for the top bar.
- HTML files for each part of the app. For example, Chrome will show the
popup.htmlwhen the User clicks on the Extension Icon.
The Google Chrome team shares a few templates on their Developer Doc.
We’re going to use
create-react-app to produce a basic Chrome extension. This quickstart should get you started in 10 minutes or less.
First, we create the application then we eject to have access to the build configurations:
create-react-app my-extension cd my-extension/ yarn run eject
When we eject,
yarn will expose its configuration files;
scripts/, the build scripts,
config/, the plugins configurations.
Prepare the Resources
We’re going to produce two main HTML outputs,
newtab.htmlto replace the New Tab page,
popup.htmlto appear when the user clicks on our icon.
First I create both HTML from the original
cp public/index.html public/newtab.html cp public/index.html public/popup.html
Nothing to change in the HTML: the webpack compiler will inject the script into each HTML file.
cp src/index.js src/newtab.js cp src/index.js src/popup.js
Update the Production Compilation Step
Our sources are ready. Now we need to modify the build step to compile them:
First we add the new paths in
config/webpack.config.prod.js we update the entry point with our new scripts:
And we call the
HtmlWebpackPlugin for each entry point:
You can check the corresponding commits in the Clepsydra repository.
Chrome uses a Manifest file to understand extensions. The manifest describes the features that the extension provide, the permission they need, etc.
Note that this is not related to the default manifest file produced by create-react-app (which targets PWA). We’re going to override it.
Here’s a minimal
public/manifest.json to get you started. It describes an extension with a
popup file and a
The chrome team provides a default template image that you can put in your
public/ folder and reference from the manifest file.
My whole manifest file is available in the Clepsydra Repo. There are instances of options such as Custom Security Policies and permissions.
Try the extension
At this point, if you run
yarn build you get a build folder that Chrome can load:
To load your new extension,
- go to chrome://extensions/,
- tick the
- then click on the
[load unpacked extension]button,
- select the build folder.
Boom, the extension is available in your Chrome.
You can check the whole source code of my extension at github.com/lsenta/clepsydra. Reuse it if you don’t want to go through the setup part!
Right now we only build for production. Next, I’ll show how to setup a development build that connects to the redux and react development tools. Please send me a message on Twitter or comment below if you need a hand with your setup!