Image may be NSFW.
Clik here to view.
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 Image may be NSFW.
Clik here to view.
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 package.json:
{
"manifest_version": 2,
"name": "Demo React-Chrome extension",
"description": "This extension shows how to run a React app as a Chrome extension",
"version": "1.0",
"browser_action": {
"default_icon": "logo_small.png",
"default_popup": "index.html"
}
}
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.
body {
margin: 0;
padding: 0;
font-family: sans-serif;
/* Added body dimensions */
height: 300px;
width: 250px;
}
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
How cool is that Image may be NSFW.
Clik here to view.
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.