49 lines
3.0 KiB
Markdown
49 lines
3.0 KiB
Markdown
# Hodor Extension: Project Summary & Technical Snapshot
|
|
|
|
## 1. Core Purpose
|
|
|
|
Hodor is a sophisticated browser extension for blocking websites based on user-defined rules. It allows for simple site blocking, complex weekly schedules with multiple time windows, and daily maximum usage limits. The user interface is designed to be clean, minimalist, and highly interactive.
|
|
|
|
## 2. Key Architectural Decisions
|
|
|
|
- **TypeScript Foundation:** The project has been converted to TypeScript for improved type safety, code clarity, and maintainability. A `tsconfig.json` is configured to compile the `src` directory to a `dist` directory.
|
|
- **Dynamic Blocking Engine:** The extension intentionally moved away from the static `declarativeNetRequest` API. All blocking logic is now handled dynamically within the `blocking/service.ts` service worker, primarily using the `chrome.webNavigation.onBeforeNavigate` event. This allows for complex, real-time evaluation of rules based on time of day and usage.
|
|
- **Stateless Service Worker:** All critical state, especially the user's active web session for time tracking (`activeSession`), is persisted in `chrome.storage.local`. This makes the service worker resilient to termination by the browser, ensuring accurate time tracking.
|
|
- **Centralized State Management (`store.ts`):** All interactions with `chrome.storage.local` are abstracted into a single service module (`src/store/store.ts`). This file provides asynchronous functions for managing the application's data, ensuring a single source of truth.
|
|
- **Component-Based UI:** The UI is built with reusable components.
|
|
- `rule.ts`: A self-contained component that renders a single rule item.
|
|
- `schedule-modal.ts`: A fully-featured modal for handling complex scheduling logic.
|
|
- **Reactive UI:** The popup and options pages listen for `chrome.storage.onChanged` events to automatically re-render themselves when the underlying data changes.
|
|
|
|
## 3. Core File Structure
|
|
|
|
- `package.json`: Defines the project, its dependencies (`typescript`, `@types/chrome`), and a `build` script.
|
|
- `tsconfig.json`: Configures the TypeScript compiler to transpile the `src` directory into a `dist` directory.
|
|
- `src/`
|
|
- `manifest.json`: Defines the extension and its components.
|
|
- `blocking/`
|
|
- `service.ts`: The service worker.
|
|
- `blocked.html` / `blocked.ts`: The user-facing blocked page.
|
|
- `store/store.ts`: The central data store.
|
|
- `rule/`
|
|
- `rule.ts`: Renders a single rule item.
|
|
- `rule.css`: Core styling for rule items.
|
|
- `modal/`
|
|
- `schedule-modal.ts`: Manages the scheduling modal.
|
|
- `schedule-modal.css`: Styles the modal.
|
|
- `action/` & `options/`: The main UI entry points.
|
|
|
|
## 4. Data Models
|
|
|
|
(Data models remain unchanged from the previous summary)
|
|
|
|
## 5. Design Language
|
|
|
|
(Design language remains unchanged from the previous summary)
|
|
|
|
---
|
|
|
|
## 6. Collaboration Guide: Working with Dominik
|
|
|
|
(Collaboration guide remains unchanged from the previous summary)
|