Creating a React based Chrome extension

Creating Chrome extensions is quite easy. In fact it is so easy I found it hard to believe how quick I had a sample up and running. And given how useful Chrome extensions can be I wondered how hard it would be to create one using React. It turns out that it is easy Smile


Creating a basic React app

To get started I decided to create a React app using create-react-app.  This gave me a working React application to get started with. To turn an HTML page with JavaScript into a Chrome extension you need to add a package.json file. The Chrome developer Getting Started tutorial has a nice template to get started with. As this file needs to be in the root of the folder you deploy as an extension I added it to the public folder. As it needs an PNG to display I downloaded the logo_small.png from the React GitHub repository and also added that to the public folder. After updating the page to open to index.html I ended up with the following manifest.json:

{<br>  <span style="color: #006080">"manifest_version"</span>: 2,<br><br>  <span style="color: #006080">"name"</span>: <span style="color: #006080">"Demo React-Chrome extension"</span>,<br>  <span style="color: #006080">"description"</span>: <span style="color: #006080">"This extension shows how to run a React app as a Chrome extension"</span>,<br>  <span style="color: #006080">"version"</span>: <span style="color: #006080">"1.0"</span>,<br><br>  <span style="color: #006080">"browser_action"</span>: {<br>    <span style="color: #006080">"default_icon"</span>: <span style="color: #006080">"logo_small.png"</span>,<br>    <span style="color: #006080">"default_popup"</span>: <span style="color: #006080">"index.html"</span><br>  }<br>}


This is already enough but it is helpful to give the window a specific size. If you don’t the window will be as small as is possible which isn’t nice in this case. Again easy to do by adding a height and width to the body tag in the index.css.

<span style="color: #0000ff">body</span> {<br>  <span style="color: #0000ff">margin</span>: 0;<br>  <span style="color: #0000ff">padding</span>: 0;<br>  <span style="color: #0000ff">font-family</span>: sans<span style="color: #006080">-serif;</span><br><br>  <span style="color: #008000">/* Added body dimensions */</span><br>  <span style="color: #0000ff">height</span>: <span style="color: #006080">300px;</span><br>  <span style="color: #0000ff">width</span>: <span style="color: #006080">250px;</span><br>}<br>
A chrome extension needs to be static files that get packed up. Again easy to do, just run npm run build and the resulting build folder contains exactly what you need.

Testing the extension locally

Doing a local test with the extension is easy. Open up Chrome and select Setting/Extensions or just navigate to chrome://extensions/. At the right top there Developer mode checkbox. Make sure that it’s checked.


Next you can drag the build folder into the extensions window. Now you should see the extension appear in the top bar of Chrome. There you should see the React icon appear.


When you click the React icon the extension should start. You will see the default create-react-app Welcome to React home screen. Complete with its animation and just like you would see it in the main browser window.


How cool is that Smile



Deploying to the Chrome web store

Publishing the extension to the Chrome web store is easy as well. You will need to create an account for a small one time fee. Once your account is setup just follow these steps and you will be done in no time. You can install and try this demo extension here.


The complete source code for the plugin can be found here.

6 thoughts on “Creating a React based Chrome extension

    1. Same question I have, George Pickett. I tried forever to make the content script into the traditional React entry file but always got unexpected token import error. I tried using Gulp but still to no avail.

Leave a Reply

Your email address will not be published. Required fields are marked *