jobspeed/DEVELOPMENT.md

Development Guide

Quick Start

1. Install dependencies:

   pnpm install
   

2. Start development mode:

   pnpm dev
   

   This watches for file changes and rebuilds automatically.

3. Load in Firefox:

   • Open about:debugging#/runtime/this-firefox
   • Click "Load Temporary Add-on"
   • Select dist/manifest.json

4. After making changes:

   • The extension rebuilds automatically in dev mode
   • Click "Reload" in the Firefox debugging page

Development Workflow

Making Changes

1. Edit source files in src/
2. Run pnpm build or use pnpm dev (watch mode)
3. Reload the extension in Firefox
4. Test your changes

Adding New Features

1. Create new service files in src/services/
2. Add type definitions in src/types/
3. Write tests in src/tests/
4. Run pnpm test to verify
5. Run pnpm lint to check code quality

Testing

# Run tests once
pnpm test --run

# Run tests in watch mode
pnpm test

# Run tests with UI
pnpm test:ui

Code Quality

# Check linting
pnpm lint

# Auto-fix linting issues
pnpm lint:fix

# Format code
pnpm format

# Check formatting
pnpm format:check

Debugging

Console Logs

• Background Script: Check Browser Console (Ctrl+Shift+J)
• Content Script: Check Web Console on the page (F12)
• Popup: Right-click popup → Inspect

Common Issues

1. Extension not loading: Check console for errors in manifest.json
2. Content script not running: Check host_permissions in manifest
3. Storage not working: Check permissions in manifest

Browser API Reference

• Firefox WebExtensions API
• storage.local
• tabs
• scripting

Project Files

Core Files

• src/background.ts - Handles storage and message passing
• src/content.ts - Injects into web pages, handles form detection
• src/popup.ts - Popup UI logic
• src/manifest.json - Extension configuration

Services

• src/services/formDetector.ts - Detects form fields
• src/services/fieldMatcher.ts - Matches fields to resume data

Configuration

• tsconfig.json - TypeScript configuration (strict mode)
• vite.config.ts - Build configuration
• .eslintrc.json - Linting rules
• .prettierrc - Formatting rules

Tips

• Use TypeScript's strict mode features
• Write tests for new business logic
• Keep UI and business logic separate
• Use the native browser API (no polyfills needed)
• Follow the existing code style

Packaging for Distribution

When ready to publish:

1. Update version in package.json and src/manifest.json
2. Run pnpm build
3. Test the dist/ folder thoroughly
4. Create a zip of the dist/ folder
5. Submit to Firefox Add-ons

Resources

• MDN WebExtensions
• Firefox Extension Workshop
• TypeScript Handbook
• Vite Guide
• Vitest Documentation