book

Building Browser Extensions: Create Modern Extensions for Chrome, Safari, Firefox, and Edge

Name: Building Browser Extensions: Create Modern Extensions for Chrome, Safari, Firefox, and Edge
Author: Matt Frisbie
ISBN: 9798868815942

by Matt Frisbie

August 2025

Intermediate to advanced

634 pages

8h 24m

English

Apress

Read now

Unlock full access

Building Browser Extensions
Foreword
Introduction
Acknowledgments
Table of Contents
About the Author
About the Technical Reviewer
1. What Are Browser Extensions?
History of Browser ExtensionsCustomizing Software with Plug-insHistory of Web BrowsersNative Browser Plug-insOrigins of Browser CustomizationEmergence of Modern ExtensionsThe Browser Extension LandscapeComparing Mobile Apps and Browser ExtensionsBrowser Extension MarketplacesTypes of Browser ExtensionsAd and Tracking BlockersPassword ManagersSmart Writing Management ToolsAccessibility ToolsContent and Link AggregatorsTab Management ToolsScreen Recording ToolsIntegrations for Software PlatformsAI AssistantsDigital Currency WalletsDeveloper ToolsSummary
2. Fundamental Elements of Browser Extensions
The Browser ModelBrowser TabsSame-Origin PolicyThe Browser Extension ModelIndependent JavaScript Pages and RuntimesNative APIs and User InterfacesTab and Domain AccessObserving and Intercepting Network RequestsElements of Browser ExtensionsExtension ManifestManifest V2 and V3Background ScriptsExtension UI PagesThe Popup PageThe Options PageThe Side PanelContent ScriptsDevtools Panels and SidebarsExtension Elements in ActionBitwardenGrammarlyReact Developer ToolsSider.aiSummary
3. Browser Extension Crash Course
Creating the ManifestMinimum Viable ExtensionInstalling Your ExtensionReloading Your ExtensionBuilding the Extension SkeletonAdding a Background ScriptAdding a Popup PageAdding an Options PageAdding a Side PanelAdding a Content ScriptTying Everything TogetherProgrammatically Opening Options and Side PanelAdding a Welcome MessageTriggering a Content Script RenderSummary

4. Browser Extension Architecture
Architecture OverviewPlurality, Lifecycles, and UpdatesBackground Service WorkerExtension UIsForm FactorLifecycleDevtools PagesContent ScriptsBrowser Extension File ServerSandboxed PagesSummary
5. The Extension Manifest
The Manifest FileSupporting Different LocalesMatch Patterns and GlobsFile Path Match PatternsURL Match PatternsURL GlobsManifest VersionManifest Propertiesactiondefault_icondefault_popupdefault_titlebrowser_styletheme_iconsauthorautomationbackgroundbrowser_actionbrowser_specific_settingschrome_settings_overridesCustom HomepageCustom Search EngineCustom Startup Pagechrome_url_overridescommandsCommand SyntaxDefining Key ShortcutsMulti-browser SupportReserved CommandsCustom CommandsGlobal Commandscontent_capabilitiescontent_scriptscontent_security_policyconverted_from_user_scriptcross_origin_embedder_policycross_origin_opener_policydeclarative_net_requestdefault_localedescriptiondeveloperdevtools_pagedifferential_fingerprintevent_rulesexternally_connectableexportfile_browser_handlersfile_system_provider_capabilitieshomepage_urlhost_permissionsiconsimportincognitokeymanifest_versionminimum_chrome_versionnacl_modulesnameoauth2offline_enabledomniboxoptional_host_permissionsoptional_permissionsoptions_pageoptions_uibrowser_styleopen_in_tabpage_actionpermissionsplatformsreplacement_web_apprequirementssandboxshort_nameside_panelstoragesystem_indicatortts_engineupdate_urlversionversion_nameweb_accessible_resourcesSummary
6. Background Scripts
Web Page Service Workers vs. Extension Service WorkersService Worker SimilaritiesSingle OccupancyInitialization and LifecycleTop-Level Event HandlingAsync MessagingService Worker DifferencesRegistrationPurposeManifest V2 vs. Manifest V3Scripts vs. Service WorkersJavaScript ImportsNo Access to DOM and Limited Global APIsNonpersistentNo Shutdown EventNo Programmatic Background AccessWorking with Background ScriptsInspecting Background Service WorkersService Worker ErrorsService Worker TerminationCommon PatternsEvent HandlerSecret Management and AuthenticationMessage HubStorage ManagerInjecting ScriptsSniffing Web TrafficInstalled/Updated EventsOpening TabsForcing Service Worker PersistenceSummary
7. Extension UIs
Introduction to Extension UIsManaged PagesNavigation RestrictionsPopup UIPopup UI PropertiesOpening and Closing Popup PagesChanging the Popup PageUsage StrategiesOptions UIOptions UI PropertiesOpening and Closing Options PagesUsage StrategiesSide Panel UISide Panel PropertiesOpening and Closing the Side PanelUsage StrategiesDevTools UIDevTools UI PropertiesCreating a DevTools PageAdding Panels and SidebarsAdding a PanelAdding a SidebarUsage StrategiesDetecting Extension UI StateSummary
8. Content Scripts
Introduction to Content ScriptsWebExtensions API AccessInjected JavaScript and CSS BehaviorCSS Injection SpecificityJavaScript Injection ContextStatic Asset URLsSpecialized Content Script PropertiesInjection TimingScript WorldsMatching RulesStale Content ScriptsSpoofed Network RequestsLogging and ErrorsPage AutomationCSS IsolationModules and Code SplittingBundlingDynamic ImportsDynamic Script TagsProgrammatic InjectionInjecting Inline Functions or StylesPassing ArgumentsInjecting FilesRegistration/UnregistrationSummary
9. Extension and Browser APIs
Standards and the Role of W3CGlobal API NamespacePromises vs. CallbacksError HandlingContext-Restricted APIsEvents APIFormatEvent FilteringWebExtensions API Quick ReferencePermissionsMessagingOne-off MessagesOpening Message PortsMessaging Native ApplicationsMessaging Other ExtensionsStorageAuthenticationNetwork RequestsInternationalizationAIBrowser and System ControlPowerOmniboxActionNotificationsContext MenuPage and Screen CaptureProxyBrowser State ManagementFont SettingsContent SettingsCookiesBookmarksReading ListHistoryDownloadsTop SitesBrowsing DataSessionsTabs and WindowsUser ScriptsDebuggerSearchAlarmsScriptingDOMOffscreenText to SpeechPrivacyIdleDevToolsExtension IntrospectionExtension ManagementSystem StateEnterprise OnlyFirefox OnlyChromeOS OnlyDeprecatedSummary
10. Permissions
Permissions BasicsChecking PermissionsUsing Optional PermissionsGranting Permissions Declaratively vs. ImperativelyPermission Request IdempotenceShared Permission GrantsHost PermissionsPermissions LifetimePermissions WarningsTesting Permissions WarningsManual CRX GenerationAutomated Warning TestingConsiderations for Published ExtensionsTriggering the Slow Review QueueAuto-disable UpdatesPermissions ListaccessibilityFeatures.modifyaccessibilityFeatures.readaiLanguageModelOriginTrialactiveTabalarmsbackgroundbrowserSettingsbrowsingDatacaptivePortalclipboardReadclipboardWritecontentSettingscontextMenuscontextualIdentitiescookiesdebuggerdeclarativeContentdeclarativeNetRequestdeclarativeNetRequestFeedbackdeclarativeNetRequestWithHostAccessdeclarativeWebRequestdesktopCaptureDevtools Pagednsdownloadsdownloads.opendownloads.uifaviconfindfontSettingsgcmgeolocationhistoryHost PermissionsGlobal Host PermissionPartial Host Permissionidentityidentity.emailidlemanagementmenusmenus.overrideContextnativeMessagingnotificationsoffscreenpageCapturepkcs11powerprivacyprocessesproxyreadingListruntimescriptingsearchsessionssidePanelstoragesystem.cpusystem.displaysystem.memorysystem.storagetabCapturetabGroupstabHidetabsthemetopSitesttsttsEngineunlimitedStorageuserScriptswebAuthenticationProxywebNavigationwebRequestwebRequestAuthProviderwebRequestBlockingwebRequestFilterResponsewebRequestFilterResponse.serviceWorkerScriptSummary
11. Networking and Authentication
Comparing Websites and ExtensionsNetworking ArchitectureExtension UIsContent ScriptsBackground ScriptsPinning an Extension IDAuthentication StylesNo AuthenticationSpoofed AuthenticationContent Script Cookie SpoofingExtension UI/Background Script Cookie SpoofingJWT SpoofingCookie AuthenticationJSON Web Token AuthenticationOAuth and OpenIDOAuth, OpenID, and the Identity APIOAuth API MethodsOAuth Redirect URLsConfiguring the Authorization PlatformAdditional HelpOAuth and OpenID ExamplesGoogle OAuth with getAuthToken()Google OpenID with launchWebAuthFlow( )Auth0 PKCE AuthenticationExtension Authentication with FirebaseNetworking APIsThe webNavigation APIThe webRequest APIModifying RequestsFragmentationThe declarativeNetRequest APIPermissionsRule and Ruleset StructureSafe/Unsafe RulesStatic RulesetsDynamic RulesSummary
12. Extension Tutorials
IntroductionNotepadOverviewDesignStorageContext MenusImplementationTestingTab ManagerOverviewDesignSide PanelTabsImplementationTestingScreenshot CaptureOverviewDesignKeyboard ShortcutScreenshot CaptureScreenshot ViewerImplementationTestingPassword ManagerOverviewDesignBackground ScriptPopupContent ScriptImplementationTestingAd BlockerOverviewDesignDNR RulesToggling RulesImplementationTestingLLM ChatbotOverviewDesignLLM APIsOptions PageConversation and Key StorageGoogle Gemini APISide PanelMarkdownImplementationTestingOn-device AI SummarizerOverviewDesignManaging the Model LifecycleInitializing the ModelUsing the AI APIsImplementationTestingUser ScriptsOverviewDesignExecution ContextPopup UIRegistration BehaviorImplementationTestingDevToolsOverviewDesignDevTools PanelInjected HighlighterImplementationTestingMonetized ExtensionOverviewDesignPayment ProcessingIdentityPaywallingImplementationTestingSummary
13. Developing, Publishing, and Managing Extensions
Local DevelopmentInspecting Your ExtensionInspecting an Extension ViewInspecting a Background Service WorkerInspecting a Content ScriptFile ChangesError MonitoringExtension ReloadsAutomated Extension TestsUnit TestsIntegration TestsE2E Puppeteer TestingAdditional ReadingPublishing ExtensionsStore ListingPrivacy PracticesReview ProcessBeta Testing with Trusted TestersUpdating ExtensionsUpdate ConsiderationsUpdate DelaysStaged RolloutsAuto-disablingCancelling UpdatesAutomated RollbackAutomated PublishingTracking User ActivityDashboard MetricsAnalytics LibrariesInstall and Uninstall EventsEnterprise Extension ManagementEnterprise Web StoreForce-Installing or Blocking Extensions with Enterprise PoliciesSummary
14. Cross-Browser Extensions
Introduction to Cross-Browser SupportBrowser Coverage TradeoffsBrowser ShareChromium Browser Extension SharingAdapting Your Code BaseAPI ProbingDifferential ManifestsExtension MarketplacesMarketplace SimilaritiesMarketplace DifferencesChrome Web StoreAdd-ons for FirefoxMicrosoft Edge Add-onsSafari Extensions App StoreOpera AddonsMobile ExtensionsMobile Extension User InterfacesMobile Chrome ExtensionsFirefox MobileiOS SafariAutomated DeploymentWebExtensions API SupportSafari Extension DevelopmentPrerequisitesArchitectureCreating an Extension ProjectWriting the AppTesting on macOSTesting on iOSDeploying to the App StoreConverting an Existing ExtensionFirefox IdiosyncrasiesManifest VersionsSidebarsAPI AdditionsSummary
15. Tooling and Frameworks
Building Extensions with ReactReactive State ManagementRoutingExtension Views and HashRouterContent Scripts and MemoryRouterMozilla Toolsweb-extwebextension-polyfillHot Module Replacement (HMR)BundlersViteParcelWebpackFrameworksWXTPlasmoExtension.jsUseful SitesSummary
Index

Content preview from Building Browser Extensions: Create Modern Extensions for Chrome, Safari, Firefox, and Edge

M. FrisbieBuilding Browser Extensionshttps://doi.org/10.1007/979-8-8688-1594-2_7

7. Extension UIs

Matt Frisbie¹

A browser extension typically needs a user interface (UI) to let users control its behavior. The most natural place for this is an extension UI, a special type of user interface served and managed by the extension. These UIs look and function like regular web pages but can display in different locations within the browser and have access to exclusive JavaScript APIs for interacting with the extension and the browser itself.

Note

The term extension UI can sometimes include content script UIs, or browser elements controlled via ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Building Browser Extensions: Create Modern Extensions for Chrome, Safari, Firefox, and Edge

Publisher Resources

ISBN: 9798868815942Purchase Link Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Building Browser Extensions: Create Modern Extensions for Chrome, Safari, Firefox, and Edge

by Matt Frisbie

7. Extension UIs

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.