domtronn / project-owl

Chrome extension for leaving commentings on pages
BSD 3-Clause "New" or "Revised" License
0 stars 0 forks source link

TypeScript / React / Webpack / Chrome Extension Boilerplate

You can use this boilerplate code to start developing a Chrome extension using TypeScript/JS, React for the frontend, and Webpack as the build system.

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.

Get started

Clone this repository, and then, in this directory:

  1. npm install
  2. npx webpack

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 .crx by using the "Pack extension" button on the same page.

Use npx webpack to recompile after editing.

Source layout

The default source layout looks like this:

src
├── app
│   ├── background.ts
│   └── content.ts
├── styles
│   └── popup.css
└── ui
    └── popup.tsx

Dist layout

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

dist contains the Chrome extension. You can delete js/*, as its contents will be regenerated by webpack, but the rest of the contents of dist will not.

Why these choices?

We wanted a boilerplate from which we could be productive immediately, without including components we wouldn't immediately need.

Acknowledgments

This work is inspired by Extensionizr, and the icons in dist/icons remain under the Extensionizr license.