Building Browser Extensions by Matt Frisbie
☆☆☆☆☆

The ultimate
Chrome extension tutorial

Building Browser Extensions shows you how to build modern Chrome extensions in 2023 with in-depth examples and detailed tutorials.
GET IT NOW
"Massively useful for bootstrapping my knowledge.
Thank you for the great book!"
James Tamplin, CEO and Co-Founder of Firebase

Chrome extensions are everywhere.

  • On average, 40% of internet users in the United States use an adblocker on any device; overwhelmingly, these adblockers take the form of browser extensions.
  • The tech company Honey, whose primary product is a browser extension, was acquired by PayPal in 2020 for $4 billion.
  • As of 2021, there were 1.8 million apps in Apple's App Store; the Chrome Web Store has 180,000 extensions.

Table of Contents

Chapter 1: What Are Browser Extensions? covers the history of software extensions and plugins, starting with the UNIVAC Series 90 mainframe.
Chapter 2: Fundamental Elements of Browser Extensions is an introductory chapter that outlines the core pieces of browser extensions and how they work together.
Chapter 3: Browser Extension Crash Course walks you through a quick and dirty tutorial of how to build and run a browser extension.
Chapter 4: Browser Extension Architecture covers in a more detailed way how an extension is actually built with manifest files, HTML, JS, and CSS.
Chapter 5: The Extension Manifest cover in detail the manifest.json file, which is the primary file that describes the extensions' file layout, defines its permissions and behavior, and describes how it should appear in the browser.
Chapter 6: Understanding the Implications of Manifest v3 covers the ongoing transition from manifest v2 to manifest v3. This chapter is of critical importance in the next 18 months as browser vendors decide how to handle adblockers.
Chapter 7: Background Scripts covers in detail the background script, which is the most important piece of the browser extension. It describes what they are capable of doing, as well as all the different ways they can be used for different types of browser extensions.
Chapter 8: Popup and Options Pages covers the basic UI elements of browser extensions, the popup and options pages.
Chapter 9: Content Scripts describes how extensions can insert code and styling into the actual page. It covers the myriad of ways in which this can be leveraged to completely customize any web browsing experience, as well as all the tricky pitfalls that users should be aware of.
Chapter 10: Devtools Pages covers how you can use the Devtools API to add a custom user interface into your browser's developer tools window.
Chapter 11: Extension and Browser APIs is a reference chapter that goes through all the different APIs that browser extensions can use to change how the browser behaves.
Chapter 12: Permissions is a reference chapter that goes through all the different permissions that a browser extension can request. This is a sister chapter to Extension and Browser APIs, since using many APIs requires permissions for that API.
Chapter 13: Networking covers all the different aspects of how chrome extensions can use and modify the browser's network capabilities. This chapter also covers OAuth implementations, as well as the important differences between webRequest and declarativeNetRequest.
Chapter 14: Extension Development and Deployment covers how to take code files and use them in the browser, both locally and in production. It also covers how release cycles and updates work in app stores.
Chapter 15: Cross-Browser Extensions covers the various idiosyncrasies between different browsers, as well as ways to have a single codebase be shared between multiple browsers. It also covers Safari extension development for macOS and iOS.
Chapter 16: Tooling and Frameworks covers all the ways that programmers can avoid developing browser extensions from scratch. This includes how it folds into existing frameworks, and also various open source tools that are useful for building browser extensions.

Example Chrome Extension

INSTALL
Open source browser extension with dozens of browsable demos. Zero NPM packages, one click install, 100% HTML/JS/CSS.
Plasmo

The easiest way to Build, Test, and Ship
browser extensions