Get the book's companion extension at buildingbrowserextensions.com
Web developers today have plenty of experience with building regular web page apps, but a lot of that knowledge doesn't transfer over when it comes to creating browser extensions. This book provides a complete reference for how to build modern browser extensions.
Creating and deploying a browser extension is more like building a mobile app than a website. When you start building an extension you'll often find there are a large number of new concepts and idiosyncrasies to wrangle with. This book reveals how to successfully navigate around these obstacles and how to take advantage of the limited resources available.
You'll see how a browser extensions work, their component pieces, and how to build and deploy them. Additionally, you'll review all the tricky bits of extension development that most developers have to learn through trial and error. The current transition from manifest v2 to v3 is of special interest, and an entire chapter will be dedicated to this subject. By the end of this book, you will have a rich understanding of what browser extensions are, how they work, all the pitfalls to avoid, and the most efficient ways of building them.
You will:
- Understand the best ways to build and deploy a modern browser extension
- Learn wow to build a browser extension using modern web development tools
- Fast-track your understanding of browser extensions
- Build browser extensions using modern tooling and frameworks like Webpack and React
- Understand the implications of the transition from manifest v2 to v3
- Complete reference of browser extension APIs and features
- Learn to build cross-browser extensions for Chrome, Firefox, Safari, and Edge
Who This Book Is For
This book is for web developers who want to learn how to develop and deploy a modern browser extension. Developers familiar with modern JavaScript frameworks will be able to directly apply their knowledge to building a browser extension with frameworks like React or Vue. This book is also for individuals who wish to quickly roll out a browser extension prototype or side project; it covers a broad range of tools and platforms that can manage all the boilerplate and underlying APIs automatically.
Author(s): Matt Frisbie
Edition: 1
Publisher: Apress
Year: 2022
Language: English
Commentary: Publisher PDF
Pages: 570
City: New York
Tags: Browser Extensions; Chrome; Safari; Firefox; Edge; Manifest v2/v3; Extension Permissions; (React/Vue/Angular/TypeScript) Chrome Extension; Build Ad Blocker
Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Foreword
Introduction
Chapter 1: What Are Browser Extensions?
History of Browser Extensions
Customizing Software with Plugins
History of Web Browsers
Native Browser Plugins
From Browser Add-ons to Extensions
The Browser Extension Landscape
Comparing Mobile Apps and Browser Extensions
Browser Extension Stores
Types of Browser Extensions
Ad and Tracking Blockers
Password Managers
Smart Writing Management Tools
Accessibility Tools
Content and Link Aggregators
Tab Management Tools
Screen Recording Tools
Integrations for Software Platforms
Digital Currency Wallets
Developer Tools
Summary
Credits
Chapter 2: Fundamental Elements of Browser Extensions
The Browser Model
Browser Tabs
Same-Origin Policy
The Browser Extension Model
Independent JavaScript Pages and Runtimes
Native APIs and User Interfaces
Tab and Domain Access
Observing and Intercepting Network Requests
Elements of Browser Extensions
Extension Manifest
Manifest v2 and v3
Background Scripts
The Popup Page
The Options Page
Content Scripts
Devtools Panels and Sidebars
Extension Elements in Action
Honey
LastPass
Grammarly
React Developer Tools
Summary
Chapter 3: Browser Extension Crash Course
Creating the Manifest
Minimum Viable Extension
Installing Your Extension
Reloading Your Extension
Adding a Background Script
Adding a Popup Page
Adding an Options Page
Adding a Content Script
Working with Multiple Tabs
Adding a Devtools Panel
Summary
Chapter 4: Browser Extension Architecture
Architecture Overview
Plurality, Lifecycles, and Updates
Background Service Worker
Popup and Options Pages
Devtools Pages
Content Scripts
Browser Extension File Server
Sandboxed Pages
Summary
Chapter 5: The Extension Manifest
The Manifest File
Supporting Different Locales
Match Patterns and Globs
File Path Match Patterns
URL Match Patterns
URL Globs
Manifest Properties
action
default_icon
default_popup
default_title
browser_style
theme_icons
author
automation
background
Manifest v2 background scripts
Manifest v2 background page
Manifest v2 persistent pages and event pages
Manifest v3 service worker
browser_action
browser_specific_settings
chrome_settings_overrides
Custom Homepage
Custom Search Engine
Custom Startup Page
chrome_url_overrides
commands
Command Syntax
Defining Key Shortcuts
Multi-browser Support
Reserved Commands
Custom Commands
Global Commands
content_capabilities
content_scripts
content_security_policy
Manifest v2 content security policy
Manifest v3 content security policy
converted_from_user_script
cross_origin_embedder_policy
cross_origin_opener_policy
declarative_net_request
default_locale
description
developer
devtools_page
differential_fingerprint
event_rules
externally_connectable
file_browser_handlers
file_system_provider_capabilities
homepage_url
host_permissions
icons
incognito
key
manifest_version
minimum_chrome_version
nacl_modules
name
oauth2
offline_enabled
omnibox
optional_host_permissions
optional_permissions
options_page
options_ui
browser_style
open_in_tab
page_action
permissions
platforms
replacement_web_app
requirements
sandbox
short_name
storage
system_indicator
tts_engine
update_url
version
version_name
web_accessible_resources
Manifest v2
Manifest v3
Summary
Chapter 6: Understanding the Implications of Manifest V3
Motivation for Manifest V3
Security
Performance
Migration to DeclarativeNetRequest
Migration to Service Workers
Privacy and Transparency
Revenue
Implications of Background Service Workers
DOM
XMLHttpRequest
Timer API
Event Handlers
Service Worker Persistence
Global State and Storage
Audio and Video
Implications of Content Security Policy Restrictions
Implications of DeclarativeNetRequest
Summary
Chapter 7: Background Scripts
Web Page Service Workers vs. Extension Service Workers
Similarities
Single Occupancy
Installation and Lifecycle
Top-Level Event Handling
Async Messaging
Differences
Registration
Purpose
Manifest v2 vs. Manifest v3
Scripts vs. Service Workers
JavaScript Imports
No Access to DOM and Limited Global APIs
Nonpersistent
No Shutdown Event
No Programmatic Background Access
Working with Background Scripts
Inspecting Background Service Workers
Service Worker Errors
Service Worker Termination
Common Patterns
Event Handler
Secret Management and Authentication
Message Hub
Storage Manager
Injecting Scripts
Sniffing Web Traffic
Installed/Updated Events
Opening Tabs
Forcing Service Worker Persistence
Implementation
Drawbacks and Limitations
Summary
Chapter 8: Popup and Options Pages
Popup Pages
Popup Page Properties
Opening and Closing Popup Pages
Changing the Popup Page
Detecting Popup State
Suggested Use
Options Pages
Options Page Properties
Opening and Closing Options Pages
Detecting Options Pages
Suggested Use
Content Script Restrictions
Summary
Chapter 9: Content Scripts
Introduction to Content Scripts
Injecting CSS
Content Script Isolation
Page Automation
Logging and Errors
Extension API Access
Modules and Code Splitting
Bundling
Dynamic Imports
Dynamic Script Tags
Specialized Content Script Properties
Programmatic Injection
Summary
Chapter 10: Devtools Pages
Introduction to Devtools Pages
Creating a devtools Page
Adding panels and sidebars
Adding a Panel
Adding a Sidebar
The Devtools API
Sniffing network traffic
Inspecting the Page
Content Scripts and Devtools Messaging
Other Devtools API Features
Summary
Chapter 11: Extension and Browser APIs
Global API Namespace
Promises vs. Callbacks
Error Handling
Context-restricted APIs
Events API
Format
Event Filtering
WebExtensions API Quick Reference
Permissions
Messaging
One-off Messages
Opening Message Ports
Messaging Native Applications
Messaging Other Extensions
Storage
Authentication
Network Requests
Internationalization
Browser and System Control
Power
Omnibox
Action
Notifications
Context Menu
Page and Screen Capture
Proxy
Browser State Management
Font Settings
Content Settings
Cookies
Bookmarks
History
Downloads
Top Sites
Browsing Data
Sessions
Tabs and Windows
Debugger
Search
Alarms
Scripting
DOM
Text to Speech
Privacy
Idle
Devtools
Extension Introspection
Extension Management
System State
Enterprise Only
Firefox Only
Chrome OS Only
Deprecated
Summary
Chapter 12: Permissions
Permissions Basics
Checking Permissions
Using Optional Permissions
Granting Permissions Declaratively vs. Imperatively
Permission Request Idempotence
Host Permissions
Permissions Lifetime
Permissions Warnings
Testing Permissions Warnings
Considerations for Published Extensions
Triggering the Slow Review Queue
Auto-Disable Updates
Permissions List
activeTab
alarms
background
bookmarks
browserSettings
browsingData
captivePortal
certificateProvider
clipboardRead
clipboardWrite
contentSettings
contextMenus
contextualIdentities
cookies
debugger
declarativeContent
declarativeNetRequest
declarativeNetRequestFeedback
declarativeWebRequest
desktopCapture
Devtools page
dns
documentScan
downloads
downloads.open
enterprise.deviceAttributes
enterprise.hardwarePlatform
enterprise.networkingAttributes
enterprise.platformKeys
experimental
fileBrowserHandler
fileSystemProvider
find
fontSettings
gcm
geolocation
history
Host Permissions
Global Host Permission
Partial Host Permission
identity
idle
loginState
management
menus
menus.overrideContext
nativeMessaging
notifications
pageCapture
pkcs11
platformKeys
power
printerProvider
printing
printingMetrics
privacy
processes
proxy
scripting
search
sessions
signedInDevices
storage
system.cpu
system.display
system.memory
system.storage
tabCapture
tabGroups
tabHide
tabs
theme
topSites
tts
ttsEngine
unlimitedStorage
vpnProvider
wallpaper
webNavigation
webRequest
webRequestBlocking
Summary
Chapter 13: Networking
Comparing Websites and Extensions
Networking Architecture
Options Pages
Popup and Devtools Pages
Content Scripts
Background Scripts
Pinning an Extension ID
Authentication Styles
No Authentication
Content Script Spoofing
Cookie Authentication
Json Web Token Authentication
OAuth and OpenID
OAuth, OpenID, and the Identity API
OAuth API Methods
OAuth Redirect URLs
Configuring the Authorization Platform
Additional Help
OAuth and OpenID Examples
Google OAuth with getAuthToken()
Google OpenID with launchWebAuthFlow( )
Manual Github OAuth with launchWebAuthFlow()
Networking APIs
The webNavigation API
The webRequest API
Modifying Requests
Fragmentation
The declarativeNetRequest API
Permissions
Rule and Ruleset Structure
Static Rulesets
Dynamic Rules
Summary
Chapter 14: Extension Development and Deployment
Local Development
Inspecting Your Extension
Inspecting an Extension View
Inspecting a Background Service Worker
Inspecting a Content Script
File Changes
Error Monitoring
Extension Reloads
Automated Extension Tests
Unit Tests
Integration Tests
Additional Reading
Publishing Extensions
Store Listing
Privacy Practices
Review Process
Updating Extensions
Update Considerations
Update Delays
Auto-Disabling
Cancelling Updates
Automated Update Publishing
Tracking User Activity
Dashboard Metrics
Analytics Libraries
Setting Up Google Analytics
Set Up ga.js
Install and Uninstall Events
Summary
Chapter 15: Cross-Browser Extensions
Introduction to Cross-Browser Support
Browser Coverage Tradeoffs
Browser Share
Chromium Browser Extension Sharing
Adapting Your Codebase
API Probing
Differential Manifests
Manifest v2/v3
Extension Marketplaces
Marketplace Similarities
Marketplace Differences
Chrome Web Store
Add-ons for Firefox
Microsoft Edge Add-ons
Safari Extensions App Store
Opera Addons
Mobile Extensions
Mobile Extension User Interfaces
Kiwi Browser
Firefox Mobile
iOS Safari
Automated Deployment
WebExtensions API Support
Safari Extension Development
Prerequisites
Architecture
Creating an Extension Project
Writing the App
Testing on macOS
Testing on iOS
Deploying to the App Store
Converting an Existing Extension
Firefox Idiosyncrasies
Manifest Versions
Sidebars
API Additions
Summary
Chapter 16: Tooling and Frameworks
Building Extensions with React
Single Entrypoint React Extensions
Multiple Entrypoint React Extensions
Reactive State Management
Routing
Extension Views and HashRouter
Content Scripts and MemoryRouter
Mozilla Tools
web-ext
webextension-polyfill
Bundlers and CLI Tools
Parcel
Webpack
Plasmo
High-level Overview
JavaScript Frameworks
Documentation and Examples
Differential Build Outputs
Automatic Manifest Generation
Icon Generation
Bundling Remote Code
Environment Variables
Content Script Mounting
Extension-friendly Hot Module Replacement
Automated Deployment with Browser Platform Publish
Useful Sites
Summary
Index
