Skip to content

Latest commit

 

History

History
83 lines (62 loc) · 1.95 KB

QUICKSTART.md

File metadata and controls

83 lines (62 loc) · 1.95 KB

Quick Start Guide

🚀 Get Started in 3 Steps

1. Install Dependencies

npm install

2. Build the Extension

npm run build

3. Load in Chrome

  1. Open Chrome and go to chrome://extensions/
  2. Enable "Developer mode" (toggle in top right)
  3. Click "Load unpacked"
  4. Select the dist folder
  5. Done! Click the extension icon to test it

🔧 Development Mode

For active development with auto-rebuild:

npm run dev

After making changes, click the refresh icon on your extension in chrome://extensions/

📋 Available Commands

  • npm run dev - Watch mode (rebuilds on changes)
  • npm run build - Production build
  • npm run lint - Check code quality
  • npm run lint:fix - Auto-fix linting issues
  • npm run format - Format code with Prettier

🧪 Testing the Extension

  1. Click the extension icon in Chrome
  2. Enter a URL in the input field
  3. Click "Submit"
  4. Check the console logs:
    • Right-click popup → "Inspect" (popup logs)
    • Click "service worker" in extension details (background logs)

📁 Key Files

  • Popup: src/popup/ - UI components
  • Background: src/background/index.ts - Service worker
  • Content: src/content/index.ts - Page scripts
  • API Client: src/shared/api.ts - Backend utilities (stubs)
  • Types: src/shared/types.ts - TypeScript definitions
  • Manifest: public/manifest.json - Extension config

🐛 Debugging

Popup

  • Right-click popup → "Inspect"
  • Console will show popup script logs

Background Worker

  • Go to chrome://extensions/
  • Find your extension
  • Click "service worker" link
  • Console will show background script logs

Content Script

  • Open DevTools on any webpage (F12)
  • Console will show "Content script loaded" message

📝 Next Steps

See SETUP.md for detailed documentation on:

  • Project structure
  • Customization options
  • API client implementation
  • Advanced configuration

Happy coding! 🎉