Chrome Extension / TypeScript / React / Webpack BoilerplateNick Mooney April 15th, 2019 (Last Updated: April 15th, 2019)
01. A boilerplate for Chrome extensions
02. Technology choices
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.
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
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:
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.