Featured image of post Build a production-ready Chrome extension

Build a production-ready Chrome extension

An overview of our series on building a Chrome extension

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.

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.

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.

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.

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.

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.

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.

Build a production-ready Chrome extension video playlist