We are creating a series of articles on building a production-ready Chrome extension. In this series, we cover the basics of building a Chrome extension, how to set up industry leading development tooling, and how to test and deploy your extension. Our goal is to show you how to build a Chrome extension that is easy to maintain, test, and deploy for a software development team.
1. Create a Chrome extension from scratch
Create a basic Chrome extension without any development tools. We cover the basics such as the major parts of the
extension, manifest.json, and manually testing the extension in the Chrome browser.
2. Add webpack and TypeScript to a Chrome extension
We add support for TypeScript (which replaces JavaScript) and webpack (which bundles the extension) to our Chrome extension.
3. Message passing in a Chrome extension
We cover message passing communication between different parts of a Chrome extension. We dive into the code and show how to communicate between the service worker (background script), content scripts, and the popup.
4. Linting and formatting TypeScript in a Chrome extension
We set up ESLint and Prettier to lint and format our TypeScript code. This ensures our code is consistent and follows best practices.
5. Add options page to Chrome extension
We add an advanced options page to our Chrome extension. This page allows users to configure the extension’s behavior and settings.
6. Add CSS framework to Chrome extension
We improve the look and maintainability of our extension by adding a CSS framework. We use Tailwind CSS to quickly style our extension and make it look professional.
7. Add unit tests to Chrome extension
We write and run unit tests for our Chrome extension using the Jest testing framework. Unit tests help us catch bugs early, ensure our extension continues to work as expected, and make improve our code quality.