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 newtab
page.
Chrome Extension Structure
In the end, our Chrome Extension will be a folder containing:
- a
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.html
when 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.
create-react-app
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.html
to replace the New Tab page,popup.html
to appear when the user clicks on our icon.
First I create both HTML from the original public/index.html
,
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.
We create the javascript entry points. They?ll contain our React code for each context of the extension.
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/paths.js
:
Then 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.
Manifest File
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 newtab
page.
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
[x] developer
checkbox, - then click on the
[load unpacked extension]
button, - select the build folder.
Boom, the extension is available in your Chrome.
Finally
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!