Boilerplate code for a Chrome extension using TypeScript, React, and Webpack.
At Duo Labs, we found ourselves creating Chrome extensions with this stack frequently enough that we thought it would be nice to have a consistent starting point. Getting all the individual pieces configured from scratch can be a pain.
Clone this repository, and then, in this directory:
Your unpacked Chrome extension will be compiled into
dist/. You can load it into Chrome by enabling developer mode on the "Extensions" page, hitting "Load unpacked", and selecting the
dist/folder. You can pack the extension into a
.crxby using the "Pack extension" button on the same page.
npx webpackto recompile after editing.
The default source layout looks like this:
src ├── app │ ├── background.ts │ └── content.ts ├── styles │ └── popup.css └── ui └── popup.tsx
background.tswill get loaded as the extension background script, and will run persistently in the background
content.tswill be injected into the URLs matched by
matchesentry (see Match Patterns documentation)
popup.tsxwill become the extension's "browser action" popup
dist/js/popup.js. It is loaded into
dist/popup.htmlby an explicit tag on that page.
dist/popup.htmlis static and is not automatically generated by the build process.
popup.csscontains styles for the popup. These styles are loaded with
importline at the top of
dist ├── _locales │ └── en │ └── messages.json ├── icons │ ├── icon128.png │ ├── icon16.png │ ├── icon19.png │ └── icon48.png ├── js │ ├── background.js │ ├── content.js │ └── popup.js ├── manifest.json └── popup.html
distcontains the Chrome extension. You can delete
js/*, as its contents will be regenerated by
webpack, but the rest of the contents of
We wanted a boilerplate from which we could be productive immediately, without including components we wouldn't immediately need.
This work is inspired by Extensionizr, and the icons in
dist/iconsremain under the Extensionizr license.