📅 Planify - Smart Event Calendar Extension

Transform any webpage into calendar events with AI - no tab switching required

Planify instantly extracts event information from any webpage and shows you if you're available at that time slot - all without leaving your current page.

🎯 The Problem It Solves

Without Planify: You receive event invitations via email/websites and need to:

1. Open each email/website
2. Manually note event details
3. Switch to Google Calendar
4. Check availability
5. Create new events if attending

With Planify: Simply:

1. Click the extension icon on any page with event information
2. Instantly see your availability and conflicts
3. Click "Add" to save events you want to attend
4. Continue browsing - no tab switching needed!

✨ Key Features

• 🤖 AI-Powered Extraction: Automatically identifies events from any webpage
• ⚡ Instant Availability Check: Shows conflicts and nearby events immediately
• 🎯 One-Click Adding: Add events to your calendar without leaving the page
• ✏️ Smart Editing: Modify event details before adding
• 🔄 Conflict Detection: Red warnings for conflicts, yellow for nearby events
• 📧 Email Integration: Works perfectly with Gmail and other email clients
• 👤 Multi-Account Support: Switch between different Google accounts easily

🎬 Video Demo

Coming soon - we'll add a demo video showing Planify in action!

🛠️ Setup Instructions

Prerequisites

• Google Cloud Platform account
• Anthropic account

Step 1: Google Cloud Setup

1. Create a Google Cloud Project:

   • Go to Google Cloud Console
   • Create a new project named "Planify Extension"

2. Enable Google Calendar API:

   • Go to "APIs & Services" > "Library"
   • Search for "Google Calendar API" and enable it

3. Create OAuth2 Credentials:

   • Go to "APIs & Services" > "Credentials"
   • Click "Create Credentials" > "OAuth 2.0 Client IDs"
   • Choose "Web application"
   • Add authorized redirect URI: http://localhost:8080/auth/google/callback
   • Download the credentials JSON file

4. Configure OAuth Consent Screen:

   • Go to "APIs & Services" > "OAuth consent screen"
   • Choose "External" user type
   • Fill in required fields (app name: "Planify", user support email, etc.)
   • Add scopes: https://www.googleapis.com/auth/calendar and https://www.googleapis.com/auth/userinfo.email

Step 2: Anthropic API Setup

1. Create Anthropic Account:

   • Go to Anthropic Console
   • Sign up or log in

2. Generate API Key:

   • Navigate to "API Keys" section
   • Click "Create Key" and copy the generated key

Step 3: Local Development Setup

1. Install and Configure:

   git clone <your-repo-url>
   cd planify-calendar-extension
   npm install
   

2. Set up Environment:

   • Copy .env.example to .env
   • Fill in your API keys:

   ANTHROPIC_API_KEY=your_anthropic_key_here
   GOOGLE_CLIENT_ID=your_google_client_id_here
   GOOGLE_CLIENT_SECRET=your_google_client_secret_here
   GOOGLE_REDIRECT_URI=http://localhost:8080/auth/google/callback
   PORT=8080
   

3. Start the Server:

   docker build -t planify-server .
   

   docker run -p 8080:8080 planify-server
   

4. Load Extension in Chrome:

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" (toggle in top right)
   • Click "Load unpacked" and select the extension folder

Step 4: First-Time Authentication

1. Connect Google Calendar:

   • Click the Planify extension icon
   • Click the user icon (👤) in the top right
   • Click "Use another account"
   • Complete Google OAuth flow in the popup window

2. Test the Extension:

   • Visit any webpage with event information (try a Gmail invitation)
   • Click the Planify extension icon
   • Click "Extract Events from Page"
   • You should see extracted events with availability information

📦 Chrome Web Store Submission

Preparing for Submission

1. Create Extension Package:

   • Ensure all files are in the extension folder
   • Remove any development files (.env, node_modules, etc.)

2. Create Store Assets:

   • Icons: 16x16, 48x48, 128x128 PNG files (already included)
   • Screenshots: 1280x800 or 640x400 PNG files
   • Promotional Images: 440x280 PNG for featured placement

Submission Process

1. Developer Account:

   • Go to Chrome Web Store Developer Dashboard
   • Pay the one-time $5 registration fee

2. Upload Extension:

   • Click "Add new item"
   • Upload your extension ZIP file
   • Fill in store listing details
   • Submit for review

3. Review Process:

   • Google typically reviews within 1-3 business days
   • Address any feedback or policy violations
   • Once approved, your extension goes live!

🔧 Technical Details

Architecture

• Frontend: Chrome Extension (HTML/CSS/JavaScript)
• Backend: Node.js/Express server
• AI: Anthropic Claude for event extraction
• Calendar: Google Calendar API for scheduling

Security

• All API calls go through your secure local backend
• Google OAuth2 handles authentication securely
• No sensitive data stored locally in the extension

🐛 Troubleshooting

Events not extracting:

• Make sure the backend server is running (npm start)
• Check that the server is accessible at http://localhost:8080

Can't add to calendar:

• Ensure Google Calendar is connected (click the user icon)
• Verify your Google OAuth2 credentials are correct

Extension not loading:

• Make sure all files are in the same folder
• Check Chrome's extension error messages

📄 License

MIT License - feel free to use, modify, and distribute!

---

Ready to never miss another event? Install Planify and transform how you manage your calendar! 🚀