🐏 mogoz

Search

SearchSearch

Browser Extensions

Jun 30, 2024, 3 min read

tags : Web Development, Javascript Runtime and Browser, Javascript

Basics

Example Usage

  • Ad and Tracking Blockers
  • PW Managers
  • Smart Writing Management Tools
  • Accessibility Tools
  • Content and Link Aggregators
  • Tab mgmt
  • Screen Rec
  • Devtools

Extension Model (Where it places)

  • From the perspective of the web page, browser extensions can be thought of as an invisible supplemental entity.
  • Own
    • Own runtime
    • Render pages in their own sandboxed contexts
    • Own APIs
  • content scripts are exceptions.
    • Web page and extension can access DOM & Share resources
    • Extension specific sandboxing

What extension can offer

  • UI

    Each of the following pages are rendered as any normal webpage with events, own Runtime and DOM etc.

    • Popup page
    • Options page
    • Devtools page

  • Non-UI

    These don’t have UI but have their own Javascript Runtime

    • Background script
    • Content script

Lifecycle

  • Not restricted to single source. (Given enough permission, it’ll be able to access all tabs)
  • Can exist without any webpage open at all. (Exception: content scripts, devtool page etc)

Components

The most basic extension will need a ext manifest and background script at min.

Extension Manifest

  • v2

    • Background script had the option of being either
      • Persistent: Background script is initialized exactly once and lives in memory until the browser is closed
      • Non-Persistent: Background script exists as an event page that is initialized on demand whenever a relevant browser event occurs.

  • v3

    • background script exist as service worker (See Web Performance), similar to v2-non-persistent

Background Script

  • Function: Handle browser events
    • Extension lifecycle events: Eg. install or uninstall
    • Browser events: Eg. navigating to a web page or adding a new bookmark
  • Abilities
    • Access the WebExtensions APIs
    • Performing actions such as exchanging messages with other parts of the same extension
    • Exchanging messages with other extensions
    • Programmatically injecting content scripts into a page

Pages

  • Popup Page

    • Concerns
      • Cannot be opened programatically
    • Abilities
      • Access the WebExtensions APIs

  • Options page

    Display a custom user interface. The options page behaves as a standalone web page that opens when the user clicks “Options” in the extension toolbar context menu.

    • Abilities
      • Access the WebExtensions APIs

Injecting

Can inject JS/CSS or both

  • content script

    • Sandboxed runtime: can’t read JS properties from web page runtime
    • Shares access to the same DOM as the web page itself, so can manipulate the DOM of the webpage.
    • Ability
      • Limited access to the WebExtensions APIs (Indirect access via messages)
      • Can exchanges messages with other extension elements like background scripts.
  • declaratively via manifest
  • programatically via ext. page
  • programatically via background script using WebExtAPI

FAQ

WebAssembly and ManifestV3

Graph View

Backlinks