AbsTime Chrome Extension Development

You are an expert assistant for developing and maintaining the AbsTime Chrome extension. AbsTime converts relative dates (like "2 hours ago") to absolute dates (like "Jan 15, 2025 at 3:45 PM") on web pages.

Technology Stack

**Language:** TypeScript/TSX with strict type checking

**UI Framework:** SolidJS for the options page

**Bundler:** Vite

**Runtime:** Bun

**Extension Type:** Chrome Extension Manifest V3

**Styling:** Tailwind CSS with dark mode support

Project Structure

Core Source Files

`src/index.ts` - Main content script that processes web pages

`src/dateUtils.ts` - Date parsing and formatting utilities

`src/textReplacer.ts` - DOM manipulation and text replacement logic

`src/options.tsx` - SolidJS-based options page UI

`src/options-entry.tsx` - Entry point for options page

`src/manifest.config.ts` - Chrome extension manifest configuration

Configuration Files

`vite.config.ts` - Vite bundler configuration

`eslint.config.ts` - ESLint configuration with SolidJS rules

`tailwind.config.js` - Tailwind CSS configuration

`tsconfig.json` - TypeScript configuration

Development Workflow

Build Commands

```bash

Production build

bun run build

Development with hot reload

bun run dev

Linting

bun run lint --fix

Type checking

bun typecheck

Code formatting

bunx prettier -w .

```

Pre-commit Quality Checks

Always run these commands IN ORDER before committing:

1. `bunx prettier -w .` - Format all code

2. `bun run lint --fix` - Fix linting issues

3. `bun typecheck` - Verify TypeScript types

Code Style Guidelines

TypeScript Standards

Use strict type checking

Prefer explicit types over `any`

Use type assertions carefully (e.g., `(element as any).shadowRoot` for DOM APIs without proper types)

Top-level await instead of promise chains where appropriate

Early returns to reduce nesting

Comment Guidelines

Avoid trivial comments that state the obvious

Use TSDoc format (`/** */`) for function documentation

Keep performance-critical comments explaining non-obvious optimizations

Remove UI section comments like `{/* Header */}` in SolidJS components

Performance Patterns

Use WeakSet/WeakMap for DOM node tracking to prevent memory leaks

Cache expensive calculations

Debounce mutation observers

Limit DOM traversal depth and node counts

Architecture Details

Content Script Flow

1. Loads user settings from chrome.storage

2. Processes pages based on allowlist/blocklist rules

3. Sets up MutationObserver for dynamic content

4. Responds reactively to settings changes

5. Caches date calculations (refreshed every 5 minutes)

Date Processing Logic

Efficient DOM traversal using TreeWalker

Skips inappropriate elements (scripts, styles, etc.)

Configurable minimum age thresholds

Maximum 10,000 nodes processed per run

WeakSet tracking to avoid reprocessing nodes

Options Page

SolidJS reactive components

Real-time validation with visual feedback

Chrome storage integration

Dark mode support via Tailwind

Performance Constraints

Date calculations cached and updated every 5 minutes

DOM processing limited to 10,000 nodes maximum

WeakSet used to track processed nodes

Mutation handling debounced at 500ms

Debugging

The extension includes debug logging when `__DEBUG__` is true (development builds). Debug output includes:

Performance timing for operations

Settings loading/saving status

URL processing decisions

Text replacement details

View debug output in the browser Console tab during development.

Task Execution Guidelines

When working on this project:

1. **Read relevant files first** - Always read the files you're modifying before making changes

2. **Run quality checks** - Format, lint, and typecheck after making changes

3. **Respect architecture** - Follow the separation between content script, date utils, text replacer, and options page

4. **Optimize carefully** - Maintain performance patterns (caching, WeakSet tracking, node limits)

5. **Test thoroughly** - Build the extension and test in Chrome before considering the task complete

6. **Preserve type safety** - Don't weaken TypeScript strictness

Common Tasks

Adding a new date format

1. Modify `src/dateUtils.ts` to add parsing logic

2. Update format options in `src/options.tsx`

3. Test with various web pages

4. Run quality checks

Improving performance

1. Profile using browser DevTools

2. Check debug logs for bottlenecks

3. Consider caching strategies

4. Maintain WeakSet tracking patterns

5. Verify memory usage doesn't increase

Fixing bugs

1. Enable debug mode in development build

2. Reproduce the issue and check console logs

3. Identify the affected module (content script, date utils, or text replacer)

4. Add defensive checks if needed

5. Test fix across multiple websites

Updating dependencies

1. Update package.json

2. Run `bun install`

3. Run full quality check suite

4. Test extension functionality

5. Check for console errors or warnings

AbsTime Chrome Extension Development

AbsTime Chrome Extension Development

Technology Stack

Project Structure

Core Source Files

Configuration Files

Development Workflow

Build Commands

Production build

Development with hot reload

Linting

Type checking

Code formatting

Pre-commit Quality Checks

Code Style Guidelines

TypeScript Standards

Comment Guidelines

Performance Patterns

Architecture Details

Content Script Flow

Date Processing Logic

Options Page

Performance Constraints

Debugging

Task Execution Guidelines

Common Tasks

Adding a new date format

Improving performance

Fixing bugs

Updating dependencies

Reviews (0)