Writing Chrome Extensions in React

Hi everyone, my name is Riaz Varani and today we're going to talk about how to make Chrome extensions in React. I work for a company that I own called EQseminalytics, if you want to learn more about it, if you like any part of this talk, there's some information there in the URL below, and there's also some other talks that I've given at riazv.me.

So let's get right into it. What is a Chrome extension? Right? How does it even come about? Well, you probably already have some of them. They're the little icons that you see in the top right of your browser window if you're happening to use Chrome, but they're in a similar place if you use some of the other browsers. And in fact, they're not only just in Chrome. Some people who've only used Chrome for a long time kind of think of them inherently as Chrome, but you can actually take some of the things we're learning in this presentation to all the other browsers. And they're actually nowadays standardizing even on a common web extension specification so that all the browsers are starting to agree on obviously one way to do things. Obviously IE is not there. In fact, IE was the first to do them, so some people think that Chrome is the first to have extensions, but actually every browser vendor has its own variation extension for a long time.

Well, how do you make one? That's really the most important thing that you probably care about. It turns out you already know how. You would think, considering it's native to the browser, that it'd be something based in C or some other complicated language, but actually all of the vendors nowadays just use plain HTML, CSS and JS to let you write your extensions, so you probably already know how to write one, but there is a specific format and a specific way to package them in terms of the functionality of how web extensions work to get it to work the way that you really intended to.

The next thing I immediately think about when I hear that, can you use HTML, CSS and JS, is what can I use all the tooling that I'm used to on the web? Yes, you can. While the end result has to be HTML, CSS, and JS, you can use React, Webpack, ES6 and all of that to help you build your extension, as long as the end result is something that looks like what the web extension specification expects. There aren't great tools like Create React App or Next that sort of do all this in a package way. You kind of have to find a boilerplate or rig it yourself, but there are quite a few decent boilerplates that I would recommend that you can use. This is actually a boilerplate I recommend that I've used for a couple of extensions that just does a great job of bringing in the most common things that you'll need, so I put a QR code up there as well as the URL, and if you miss it right now and you don't want to grab it, I will have another QR code at the very end that has a link to the slides where you can grab this other QR code or grab this URL.

So we're going to quickly do a show and tell. I know it's a bit dangerous to do things live in a talk, but that's, I like to look dangerous that I can say. We're just going to look at a fork of that boilerplate, pop it up, put it into the browser and you can see how easy this is to get live. So I've already cloned that particular project, forked it and cloned it down. This is essentially pretty much what you get from that boilerplate on its own. And we're just going to do NPM run. Actually they're using yarn here. So we'll do yarn dev. That's just running this script that essentially will take all of this stuff that you see, and it's going to pump it into this disk directory in a format that is expected by a browser. So if I jump over to Chrome, I've just created a new profile in Chrome and gone to Chrome colon slash slash extensions, which is how you manage your extensions. And then you have to turn on developer mode if you've never been in here before, which enables a couple of new options. Then you click on load unpacked.

And I'm already pre-navigated to the repo that I cloned and then the disk directory, which is the output of that build process. If I select that, it's grabbing the information from what she called a manifest.json, which you can go dig into later, but it's grabbing actually what is the contents of this Chrome extension? Now there's a file in there that says pop up, which is what shows up when you click on the extension. So if I come here just to be able to see it, I'll pin it. This is our extension that we're playing with. When I click on it, you can see that it has a pop up and it has some content in there. And that is just a React component right here. So if I change this part that says learn React to learn React now, you'll see when I come over it does essentially a hot reload and that says learn React now. So essentially you've gone from what looks like I've got standard React into a pop up in my browser window.