Gmail to Xero Chrome Extension

A Chrome Extension that extracts billing information from Gmail emails using AI and exports it as Xero-compatible CSV files.

Features

• 🤖 AI-Powered Extraction: Uses OpenRouter, OpenAI, or Gemini to extract bill data from emails
• 📊 Export History: View and manage all extracted bills with TanStack Table
• 💾 Local Storage: All data stored securely in browser
• 📥 CSV Export: Generate Xero-compatible CSV files
• ⚙️ Configurable: Choose between OpenRouter (with multiple models), OpenAI, or Gemini LLM providers

Tech Stack

• Framework: React + TypeScript + Vite
• Styling: TailwindCSS
• State Management: TanStack Query
• Data Table: TanStack Table
• Extension: Manifest V3

Installation

1. Install dependencies:

   npm install

2. Build the extension:

   npm run build

3. Load in Chrome:

   • Open chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the dist folder

Usage

1. Configure LLM:

   • Click extension icon in Gmail
   • Open Settings
   • Select provider (OpenRouter/Gemini/OpenAI)
   • If using OpenRouter, select your preferred model
   • Enter API key
     • OpenRouter: Get from openrouter.ai/keys
     • OpenAI: Get from platform.openai.com
     • Gemini: Get from Google AI Studio

2. Extract Bills:

   • Open an invoice email in Gmail
   • Click extension icon
   • Click "Extract Bill from Current Email"
   • Review and edit extracted data
   • Add Account Code
   • Export CSV

3. View History:

   • Navigate to Dashboard page
   • View all extracted bills
   • Export or delete as needed

Development

npm run dev      # Development mode
npm run build    # Production build
npm run lint     # Lint check

Project Structure

src/
├── background/      # Service worker
├── content/         # Gmail content script
├── sidepanel/       # Main extraction UI
├── dashboard/       # History view
├── components/      # React components
└── lib/             # Core services
    ├── storage.ts   # Chrome storage wrapper
    ├── llm.ts       # LLM integration
    ├── csv.ts       # CSV export
    └── types.ts     # TypeScript types

License

MIT