prototype

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.

clepsydra demo video

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:

the popup.html is rendered direclty in your browser UI
popup.html rendered in the Chrome UI

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;

Prepare the Resources

We’re going to produce two main HTML outputs,

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:

Content of the chrome build folder
Our extension

To load your new extension,

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!

Published in: react google-chrome quickstart javascript

comments powered by Disqus