Architecture

PageSieve is designed to be local-first, ergonomic, and reusable. This page provides a high-level overview of the project’s architecture and its core components.

Tech Stack

The extension is built using:

• TypeScript: Ensuring type safety across the codebase.
• Svelte: Used for the sidebar and full-page dashboards.
• Vite: The build tool and development server.
• Shadcn UI: For building consistent and accessible UI components.
• Zod: Defining and validating scrape configurations and other schemas.

Core Components

• Sidebar UI (src/sidebar/): The main interface for defining scrape configurations.
• Content Script (src/content.ts): Injected into the webpage to interact with the DOM.
• Background Script (src/background.ts): Manages messaging between different parts of the extension.
• DOM Inspector (src/dominspector.mts): Handles the click-based selection of elements.
• Selector Engine (src/selectorgadget.ts): Implements the CSS selector guessing algorithm.
• Data Types (src/types.ts): Central location for Zod schemas defining the scrape configuration.