Everything you need to build browser extensions.

Dive right in with comprehensive examples, open source tools, modern frameworks, and cutting-edge platforms.

Building Browser Extensions by Matt Frisbie

Building Browser

Browser Extension

The complete reference for building modern browser extensions in Chrome, Firefox, Edge, and Safari.
Open source browser extension with dozens of browsable demos. Zero NPM packages, one click install, 100% HTML/JS/CSS.
  • 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.

Building Browser Extensions: Create Modern Extensions for Chrome, Safari, Firefox, and Edge covers all the knowledge you will need to write cross-browser extensions with modern tools. Browser extensions are given access to extremely powerful APIs. I believe most developers are blind to that power and are unaware of just how much it is within their reach. This book is designed to enlighten web developers and illuminate the true potential of the browser extension software platform.

The transition to manifest v3 is upon us, and already it is causing problems. If you are confused about what manifest v3 is, what are its implications, and how best to navigate the ongoing transition, this book is for you. I dedicated an entire chapter to the manifest v2/v3 transition.

The lingua franca of web development is React, and this book gives special attention to the best ways in which you can write a browser extension in React. It also covers all the supplemental tools you’ll need along the way, such as Webpack, Parcel, and Plasmo.

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.