Extension Popup & Options Interfaces

Relevant source files

The following files were used as context for generating this wiki page:

• extension/src/popup/index.html
• extension/manifest.config.ts
• extension/src/background/index.ts
• README.md
• CHANGELOG.md

The Extension Popup and Options interfaces provide the primary control layer for users to interact with the Oddity 1 annotation engine. These interfaces manage user authentication, personalization settings, real-time statistics, and document export triggers.

The popup serves as a portable dashboard accessible from the browser toolbar. The options page provides a full-tab environment for detailed account and preference management. Both interfaces communicate with the background service worker to persist data and trigger AI-driven features.

Sources: README.md:144-156, extension/manifest.config.ts:61-69

Interface Architecture

The extension uses a Model-View-Controller (MVC) pattern where the HTML files define the View, and the background script acts as the Controller.

UI Layout Structure

The popup interface is organized into functional sections:

1. Header: Contains the project logo and the global "Enabled" toggle.
2. Auth Layer: Displays either the sign-in/sign-up forms or the user dashboard based on the current session state.
3. Profile Section: Shows the user's selected persona avatar and the total count of created annotations.
4. Settings Section: Provides controls for annotation personality, font selection, and text size.
5. Actions: Houses the PDF export trigger and feedback links.

Sources: extension/src/popup/index.html:437-640, CHANGELOG.md:8-14

Component Visualization

This diagram illustrates the logical flow within the popup interface:

The diagram shows the conditional rendering of the UI based on the user's authentication status. Sources: extension/src/popup/index.html:437-600, extension/src/background/index.ts:318-335

Core Features and Controls

User Personalization

Users customize their experience through several style and behavioral controls. The interface updates the chrome.storage.local preferences, which the background script then broadcasts to all active tabs.

Control	Options	Description
Global Toggle	On / Off	Instantly enables or disables the extension globally.
Personality	Terry, Jerry, Sally	Sets the "depth" of AI annotations (Critical, Creative, or Guiding).
Font Style	System, Fraunces, Kalam, etc.	Changes the typography used in annotation margin notes.
Font Size	Small, Medium, Large	Adjusts the scale of the annotation text.
Tier Badge	FREE / PRO	Displays current subscription level and links to plans.

Sources: extension/src/popup/index.html:520-575, README.md:158-164, CHANGELOG.md:107-112

Authentication and Profile Management

The interface supports multiple authentication methods including Email/Password and Google OAuth. The background script manages the session and updates the UI state.

• Google OAuth: Uses chrome.identity to fetch tokens for seamless sign-in.
• Profile Popover: A clickable button at the bottom of the popup reveals the user's email and a sign-out action.
• Badge Indicators: The extension icon displays a red "!" badge when not signed in and a gray "OFF" badge when disabled.

Sources: extension/src/popup/index.html:587-608, extension/src/background/index.ts:365-420, CHANGELOG.md:15-18

Data Flow and Messaging

The popup interface interacts with the system through the chrome.runtime.sendMessage API.

This sequence shows the interaction between the UI and the background service worker for profile management. Sources: extension/src/background/index.ts:318-335, extension/src/background/index.ts:474-485

Configuration and Technical Metadata

The following configurations in manifest.config.ts define how the interfaces are registered within the Chrome environment:

export default defineManifest({
  permissions: [
    "activeTab",
    "storage",
    "contextMenus",
    "scripting",
    "alarms",
    "identity",
    "tabs"
  ],
  action: {
    default_popup: "src/popup/index.html",
  },
  options_ui: {
    page: "src/options/index.html",
    open_in_tab: true,
  }
});

Sources: extension/manifest.config.ts:1-70

The Popup and Options interfaces act as the primary configuration hub for Oddity 1. They ensure that user preferences for AI personality and typography are synchronized across the browsing session while providing a secure entry point for authentication and tier management.