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 EQ7 Analytics, if you want to learn more about it, if you like any part of this talk, there's 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 vendors had its own variation of extension for a long time. Well, how do you make one? That's really the most important thing that you probably care about. Well, 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. Now the next thing I immediately think about when I hear that, can you use html, css, and JS, is well, 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. Now there aren't great tools like Create react App or Next that sort of do all this in the 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. I put a QR code up there as well as the URL. 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. 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 live dangerously, 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.

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.

We're just going to do npm run, actually, we'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 dist 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://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've already pre navigated to the repo that I cloned and then the dist 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, this is learn react to learn react now, you'll see when I come over, it does essentially a hot reload and now 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.

There's a whole bunch of other things you can do with a Chrome extension that includes things like dev tools.

So if you open up the dev tools, but this doesn't always work right away.

There's actually some permissions required for this.

So it didn't work, but they're actually one of the things that's done in that boilerplate is to pop up an additional entity here.

Let's see.

Yep.

You can change the default homepage. So you can see this is actually part of that new tab element. It's not finding it, but this is actually a react component coming out of that particular part.

I'm kind of bouncing around that because I just want to show you there's a lot of power in Chrome extensions. There's a lot of stuff you can do and you can do it in plain react, just getting a right boilerplate to go and then being able to pop around and play with it. So if we jump back into our presentation, that is kind of the conclusion of the talk. It's just a quick little sampler of the really cool things you can do with both Chrome extensions and react. And as I promised, I am going to put up a QR code of a link to these slides. You can grab them as well as pick up the link to that boilerplate. And there's also, if you want to see, I have a different talk actually just on Chrome extensions, sorry, web extensions in general, not even specific to react. It is posted at that site on the left, reasv.me if you're interested in more. That's it. Thank you for joining.