Comment cr?er une extension Chrome avec React (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 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!