ReplyMate - Local AI LinkedIn Reply Generator

A privacy-focused Chrome extension (Manifest V3) that provides AI-powered LinkedIn reply suggestions running entirely locally using WebLLM for AI inference without sending data to external servers.

Project Architecture

Core Components

**Background Service Worker (`src/background.ts`)**

**LinkedIn Content Script (`src/linkedin-content.ts`)**

**Popup Interface (`src/popup.ts`, `popup.html`)**

Technology Stack

Development Workflow

Initial Setup

```bash

Install dependencies

npm install

Start development server with hot reload

npm run dev

```

Essential Commands

**Development**

```bash

npm run dev # Start development with hot reload (Parcel)

npm run build # Production build with webextension config

npm run clean # Clean build artifacts

```

**Testing**

```bash

npm test # Run full test suite (132+ tests)

npm run test:watch # Run tests in watch mode

npm run test:coverage # Generate coverage report

Run a single test file

npm test -- path/to/test.spec.ts

Run tests matching a pattern

npm test -- --testNamePattern="pattern"

```

**Code Quality**

```bash

npm run lint # Check code with ESLint (must pass with 0 warnings)

npm run lint:fix # Auto-fix linting issues

npm run type-check # TypeScript type checking (strict mode)

npm run format # Format code with Prettier

```

**Building & Packaging**

```bash

npm run build:script # Full build pipeline with quality checks (./scripts/build.sh)

npm run package # Create distribution packages

npm run zip # Build and package in one command

npm run validate-manifest # Validate manifest.json structure

```

Build Process (`scripts/build.sh`)

The automated build script performs these steps in order:

1. Validates dependencies are installed

2. Runs TypeScript type checking (strict mode)

3. Executes ESLint checks (must have 0 warnings)

4. Runs full test suite (all tests must pass)

5. Compiles TypeScript to JavaScript

6. Copies static assets to `dist/`

7. Validates `manifest.json` structure

8. Reports build size

**All quality checks must pass before deployment.**

Code Quality Requirements

Before committing or deploying:

Working with LinkedIn Integration

DOM Targeting Strategy

The extension specifically targets LinkedIn's DOM structure:

Integration Guidelines

When modifying LinkedIn integration:

1. Test on different post types (articles, standard posts, comments, replies)

2. Handle dynamic content loading (LinkedIn uses infinite scroll)

3. Respect LinkedIn's rate limits and UI responsiveness

4. Test with various LinkedIn UI themes (light/dark mode)

5. Verify button injection doesn't break LinkedIn's native functionality

Chrome Extension Specifics

Required Permissions

Message Passing API

Communication between components uses Chrome runtime messaging:

**Message Types:**

**Example:**

```typescript

chrome.runtime.sendMessage({ type: 'generateReply', postContent, replyContext }, response => {

// Handle response

});

```

Storage Keys

Chrome storage API keys:

AI Model Configuration

Model Tiers

Smart Model Selection

The background service worker automatically selects models based on:

Privacy Guarantee

All AI inference happens on-device using WebLLM:

Testing Approach

Test Framework

Running Tests

```bash

Run all tests

npm test

Watch mode for development

npm run test:watch

Coverage report

npm run test:coverage

Run specific test suite

npm test -- tests/linkedin-content.spec.ts

```

Mocking Chrome APIs

The test setup (`tests/setup.ts`) provides mocks for:

Project Structure

```

ReplyMate/

├── src/ # Main source code (TypeScript)

│ ├── background.ts # Service worker (AI engine)

│ ├── linkedin-content.ts # Content script (UI injection)

│ ├── popup.ts # Extension popup logic

│ └── popup.html # Popup UI markup

├── tests/ # Test files with Chrome API mocks

│ ├── setup.ts # Jest configuration and mocks

│ └── *.spec.ts # Test suites

├── dist/ # Build output (git-ignored)

├── scripts/ # Build and packaging automation

│ └── build.sh # Full build pipeline

├── docs/ # Architecture and troubleshooting guides

├── icons/ # Extension icons (multiple sizes)

├── manifest.json # Chrome extension manifest

├── tsconfig.json # TypeScript configuration

└── package.json # Dependencies and scripts

```

Common Development Tasks

Adding a New AI Model

1. Update model tier configuration in `src/background.ts`

2. Add model ID to fallback hierarchy

3. Update popup UI model selector in `src/popup.ts`

4. Test model loading and inference performance

Modifying LinkedIn UI Injection

1. Inspect LinkedIn DOM structure (use DevTools)

2. Update selectors in `src/linkedin-content.ts`

3. Test on multiple post types and UI states

4. Verify no conflicts with LinkedIn's native UI

Debugging Extension

1. Load unpacked extension from `dist/` directory

2. Open DevTools on LinkedIn page (content script logs)

3. Open DevTools on extension popup (popup logs)

4. Inspect service worker in `chrome://extensions` (background logs)

Creating a Release Build

```bash

Full build with quality checks

npm run build:script

Create distribution package

npm run package

Or combine both

npm run zip

```

Troubleshooting

Common Issues

**Model loading fails:**

**LinkedIn buttons not appearing:**

**Tests failing:**

Constraints

Additional Resources