Skip navigation

Duo Security is now a part of Cisco

About Cisco

Chrome Extension / TypeScript / React / Webpack Boilerplate

Nick Mooney April 15th, 2019 (Last Updated: April 15th, 2019)

01. A boilerplate for Chrome extensions

I’ve written several Chrome extensions in my tenure at Duo Labs. You can be pretty barebones with extensions if you wish: plain old JavaScript, HTML, and CSS. I found myself wanting to use a couple extra technologies (namely TypeScript and React) to improve the development process, and found it fairly painful to recreate all the boilerplate needed for a Chrome extension each time. I decided to package the boilerplate up and release it in case anyone else wanted to develop on a similar stack without having to go through the dance of configuring all the build steps.

02. Technology choices

TypeScript

I am a huge fan of TypeScript. Per the project’s website, TypeScript is “a typed superset of JavaScript that compiles to plain JavaScript.” Many of my hangups surrounding JavaScript development have been the lack of a type system: there’s no way to indicate the types of data flowing through your program, there’s no assurance that you’ve called a function with the correct number/order of arguments, etc. Every error in plain JavaScript occurs at runtime, and that can be painful to debug. Additionally, I’ve found IDE features such as function signature autocompletion incredibly handy in other languages, and I wanted the same in JavaScript.

TypeScript solves these problems without getting in your way. All valid JavaScript is valid TypeScript, and you can build on top of plain JS to get all the wonderful features offered by a statically typed language. I found that my JS productivity increased markedly while using TypeScript, and that getting up to speed with TypeScript-specific features required little time. If you’re interested, check out the TypeScript in 5 minutes tutorial.

React

React structures UI programming in a way that, to me, makes a lot of sense. It does away with having to worry about specific state transitions and provides a framework you to say “here’s how the UI should behave as a function of the state,” and then handles the rest. I’ve found it makes me significantly more productive when writing UI code.

Check out the React tutorial.

Webpack

I don’t have a lot of strong feelings about Webpack, except that it’s a reasonably simple way to apply transformations (TypeScript compilation, React magic) to your source code before outputting raw JS. It’s handy to be able to run the whole pipeline with npx webpack.

03. Putting together a boilerplate framework

I followed the Webpack getting started guide, then the TypeScript-specific instructions handily provided by the Webpack documentation. After that, I followed the Chrome extension get started tutorial to make the dist/ directory (the directory containing compiled output) match the expected directory structure of a Chrome extension.

I decided on these components: - A background script (i.e. long-running JS that acts as the extension “process”) - A content script (injected into each page the extension is active on) - A popup (allowing interactivity / configuration by clicking the extension icon)

You can add more components (like an options page) by following the Chrome documentation.

04. Get it on GitHub

You can find the boilerplate project here. The instructions in the README should help you set everything up, but the process is essentially two steps:

  1. npm install
  2. npx webpack

The structure of this project was inspired by Extensionizr, and I used their default icons. The icons in dist/icons remain under the Extensionizr license.