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.