Avery Hellen
ReactNode.jsSocket.io

Gmail Inbox Project Tracker

A Chrome extension that consolidates project information from multiple sources (Supabase database, Google Calendar, Google Drive) directly into the Gmail interface, eliminating context switching and streamlining workflow for project managers.

Features

  • Project Dashboard: View all your projects in a collapsible table above your Gmail inbox with priority-based sorting
  • Editable Project Notes: Double-click to edit project notes with real-time saving to Supabase database
  • Meeting Management: View meeting status and create meeting recaps directly from Gmail
  • Priority Scoring: Visual priority bars with color-coded indicators based on calculated scores
  • Quick Access: Instantly access Salesforce records, Google Docs, and Drive folders
  • Auto-Refresh: Keeps your data fresh with configurable 15-minute refresh intervals
  • Resizable Interface: Adjust dashboard height with persistent preferences

Installation

Developer Mode Installation

  1. Clone this repository to your local machine:

    git clone https://github.com/rznhellen/gmail-project-tracker.git

  2. Open Chrome and navigate to chrome://extensions/

  3. Enable "Developer mode" in the top-right corner

  4. Click "Load unpacked" and select the directory containing the extension files

  5. The extension should now be installed and active in your browser

Chrome Web Store Installation (Coming Soon)

  1. Navigate to the Chrome Web Store
  2. Search for "Gmail Project Tracker"
  3. Click "Add to Chrome"

Usage

  1. Access Gmail: The project dashboard will automatically appear above your inbox
  2. View Projects: All your projects from Supabase will be displayed in the dashboard, sorted by priority
  3. Edit Project Notes: Double-click on any project's notes cell to edit and save notes
  4. Create Meeting Recaps: Click the recap button for past meetings to generate a pre-populated email
  5. Schedule Follow-ups: Click the calendar icon to set up your next meeting
  6. View Documents: Access project notes documents and Drive folders directly from the dashboard
  7. Configure Settings: Click the extension icon in your browser toolbar to access settings

Configuration

The following settings can be configured by clicking the extension icon:

  • Auto-collapse: Choose whether the dashboard automatically collapses when Gmail loads
  • Auto-refresh: Enable/disable automatic data refresh (occurs every 15 minutes by default)
  • Salesforce Connection: Connect or disconnect your Salesforce account (simulated)

Database Integration

The extension integrates with Supabase for data storage and retrieval:

  • Project Data: Fetched from the projectdata table in Supabase
  • Notes Storage: Project notes are stored and updated in real-time
  • Fallback Handling: Graceful error handling with empty state when data is unavailable

Development

Project Structure

/
├── manifest.json          # Extension configuration (Manifest V3)
├── background.js          # Background service worker with Supabase integration
├── contentScript.js       # Main tracker component injection and management
├── popup.html            # Extension popup UI
├── popup.js              # Popup functionality and settings
├── popup.css             # Popup styles
├── styles.css            # Main tracker styles with Material Design
├── onboarding.html       # First-time user onboarding page
└── images/               # Extension icons

Key Features Implementation

  • Material Design UI: Clean, modern interface following Google's design principles
  • Supabase Integration: Direct REST API calls for data management
  • Real-time Notes Editing: Double-click to edit with auto-save and character limits
  • Priority Visualization: Color-coded priority bars with dynamic positioning
  • Responsive Grid: Scrollable table with custom scrollbar and column management
  • Gmail Integration: Seamless injection above inbox with collapse/expand functionality

Building From Source

  1. Make your changes to the source code
  2. Test the extension in Developer mode as described in the Installation section
  3. For production, you can zip the files for submission to the Chrome Web Store

Data Schema

Project Data Structure

{
  projectId: string,
  projectName: string,
  accountId: string,
  accountName: string,
  salesforceProjectUrl: string,
  salesforceAccountUrl: string,
  notesLink: string,        // Google Docs URL
  folderLink: string,       // Google Drive folder URL
  customerTimezone: string,
  timezoneOffset: number,
  projectNotes: string,     // Editable notes stored in Supabase
  nextTaskName: string,
  nextTaskDueDate: date,
  priorityScore: number,    // 0-1 range for priority calculation
  colorCode: string,        // Project color for visual identification
  meetingDate: date,
  recapSent: boolean
}

Permissions Required

This extension requires the following permissions:

  • storage - To save your preferences and settings
  • identity - For future OAuth authentication
  • activeTab - To inject the dashboard into Gmail
  • https://mail.google.com/* - To access and modify Gmail interface
  • https://mwvyntzogaxegoypbxfd.supabase.co/* - To access Supabase database

Privacy

This extension:

  • Stores project data in Supabase with secure API access
  • Does not collect or share any personal data beyond project information
  • Stores preferences only on your local machine
  • Makes direct API calls to Supabase using authenticated endpoints
  • Does not use any third-party analytics or tracking

Technical Implementation

  • Framework: Vanilla JavaScript for optimal performance
  • Database: Supabase with REST API integration
  • UI: Material Design principles with CSS Grid layout
  • State Management: Module pattern with local state persistence
  • Error Handling: Comprehensive error states with user feedback

Support

If you encounter any issues or have suggestions for improvement, please:

  1. Check the issue tracker for known issues
  2. Create a new issue if yours isn't already reported
  3. For urgent support, contact support@example.com

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

  • Icons provided by Heroicons
  • UI components styled with Material Design principles
  • Database services provided by Supabase

Roadmap

Future features planned:

  • Enhanced Salesforce OAuth integration
  • Advanced filtering and sorting options
  • Bulk operations for project management
  • Enhanced meeting management with Google Calendar API
  • Email auto-tagging functionality
  • Mobile responsive design improvements