🚀 Browser Extension Task: Quick DumpIt Resource Capture

[Rayan9064]

🚀 Browser Extension Task: Quick DumpIt Resource Capture

📋 Issue Overview

Build a lightweight browser extension for DumpIt that enables one-click capturing of links, pages, and content directly from the browser—without needing to open the main web app.

---

🎯 Objectives

Enable users to quickly save resources to their DumpIt vault while browsing, with minimal friction and seamless authentication integration.

---

✨ Key Features to Implement

1. Authentication Integration

• Connect extension to user's DumpIt Supabase account
• Implement OAuth or session token flow for secure auth
• Store auth token securely in browser extension storage
• Handle token expiration and re-authentication prompts
• Display logged-in user info in popup (username/email)

2. Resource Capture Functionality

• Capture current page URL automatically
• Capture page title automatically
• Optional: Capture selected text as note
• Optional: Capture image URL if right-clicking on an image
• Context menu integration (right-click → "Save to DumpIt")

3. Quick Save Popup UI

• Clean, minimal popup interface (300-400px width)
• Pre-filled fields: Title (editable), Link (auto-captured)
• Input fields: Note (textarea), Tag (dropdown matching app tags)
• Privacy toggle: Public/Private (default from user preference)
• Save button with loading state
• Success/error notifications

4. Backend Integration

• POST request to Supabase resources table
• Include authenticated user's user_id
• Validate data before submission
• Handle network errors gracefully
• Show success confirmation with link to view in dashboard

5. Error Handling & UX

• Validate URL format before saving
• Show friendly error messages for failed saves
• Handle offline/network issues
• Logout functionality in popup
• Rate limiting feedback if applicable

6. Permissions & Security

• Request minimal permissions (activeTab, storage, identity)
• Secure token storage using chrome.storage.sync encrypted
• Clear security warnings in manifest
• Privacy-first approach (no data collection)

---

🛠️ Tech Stack

Required

• Manifest Version: V3 (Chrome/Edge/Brave compatible)
• API Integration: Supabase JS SDK or REST API
• Storage: chrome.storage.sync for auth tokens
• Build Tool: Vite or Webpack (optional, for React)

Recommended UI

• Option 1: React + TypeScript (reuse DumpIt components)
• Option 2: Vanilla JS + HTML/CSS (lightweight, faster load)
• Styling: Tailwind CSS (match main app design) or minimal inline CSS

Authentication

• Reuse existing Supabase Auth from main app
• Share session via magic link or popup OAuth flow

---

📦 Deliverables

1. Source Code

• Extension folder structure:

  browser-extension/
  ├── manifest.json          # Extension config (V3)
  ├── popup.html             # Main popup UI
  ├── popup.js               # Popup logic
  ├── background.js          # Background service worker
  ├── content.js             # Content script (optional)
  ├── styles.css             # Popup styling
  ├── icons/                 # Extension icons (16, 48, 128px)
  └── README.md              # Build & installation instructions
  

2. Documentation

• README.md with:
  • Local installation steps (load unpacked extension)
  • Build instructions (if using bundler)
  • Configuration (Supabase URL/keys)
  • Usage guide with screenshots
  • Known limitations

3. Working Demo

• Video or GIF showing:
  1. Installing extension
  2. Logging in
  3. Capturing a resource from any website
  4. Verifying it appears in DumpIt dashboard

---

🧩 Implementation Guide

Step 1: Manifest V3 Setup

Create manifest.json:

{
  "manifest_version": 3,
  "name": "DumpIt Quick Capture",
  "version": "1.0.0",
  "description": "Save links and resources to your DumpIt vault with one click",
  "permissions": ["storage", "activeTab", "contextMenus"],
  "host_permissions": ["https://*.supabase.co/*"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Step 2: Authentication Flow

Option A: Magic Link (Simpler)

1. User enters email in popup
2. Send magic link via Supabase Auth
3. User clicks link → extension receives session token
4. Store token in chrome.storage.sync

Option B: OAuth Popup

1. Open Supabase Auth UI in new tab
2. On successful login, redirect to extension page with token
3. Extension captures token and closes tab

Step 3: Popup UI (React Example)

// popup.tsx
import { useState, useEffect } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
);

export default function Popup() {
  const [user, setUser] = useState(null);
  const [title, setTitle] = useState('');
  const [link, setLink] = useState('');
  const [note, setNote] = useState('');
  const [tag, setTag] = useState('Development');
  const [isPublic, setIsPublic] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // Get current tab info
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      setTitle(tabs[0].title);
      setLink(tabs[0].url);
    });

    // Check auth status
    chrome.storage.sync.get(['supabase_session'], (result) => {
      if (result.supabase_session) {
        supabase.auth.setSession(result.supabase_session);
        setUser(result.supabase_session.user);
      }
    });
  }, []);

  const handleSave = async () => {
    setLoading(true);
    try {
      const { error } = await supabase.from('resources').insert({
        user_id: user.id,
        title,
        link,
        note,
        tag,
        is_public: isPublic,
      });

      if (error) throw error;

      // Show success and close popup
      alert('Resource saved to DumpIt! ✅');
      window.close();
    } catch (err) {
      alert('Error saving resource: ' + err.message);
    } finally {
      setLoading(false);
    }
  };

  if (!user) {
    return <LoginForm onLogin={setUser} />;
  }

  return (
    <div className="p-4 w-96">
      <h2 className="text-lg font-bold mb-4">Quick Save to DumpIt</h2>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        className="w-full mb-2 p-2 border rounded"
      />
      <input
        type="url"
        value={link}
        onChange={(e) => setLink(e.target.value)}
        placeholder="Link"
        className="w-full mb-2 p-2 border rounded"
      />
      <textarea
        value={note}
        onChange={(e) => setNote(e.target.value)}
        placeholder="Note (optional)"
        className="w-full mb-2 p-2 border rounded"
        rows={3}
      />
      <select
        value={tag}
        onChange={(e) => setTag(e.target.value)}
        className="w-full mb-2 p-2 border rounded"
      >
        <option>Development</option>
        <option>Design</option>
        <option>Article</option>
        <option>Tool</option>
        <option>Other</option>
      </select>
      <label className="flex items-center mb-4">
        <input
          type="checkbox"
          checked={isPublic}
          onChange={(e) => setIsPublic(e.target.checked)}
          className="mr-2"
        />
        Make Public
      </label>
      <button
        onClick={handleSave}
        disabled={loading}
        className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
      >
        {loading ? 'Saving...' : 'Save to DumpIt'}
      </button>
    </div>
  );
}

Step 4: Background Service Worker

// background.js
chrome.runtime.onInstalled.addListener(() => {
  // Create context menu item
  chrome.contextMenus.create({
    id: 'saveToDumpIt',
    title: 'Save to DumpIt',
    contexts: ['page', 'selection', 'link', 'image'],
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'saveToDumpIt') {
    // Open popup with pre-filled data
    chrome.action.openPopup();
  }
});

---

🧪 Testing Checklist

• Extension installs without errors
• Login/logout flow works
• Current page URL and title are captured correctly
• Resource saves to Supabase and appears in dashboard
• Privacy toggle works (public/private)
• Error handling for invalid URLs or network issues
• Token persists across browser sessions
• Works on Chrome, Edge, and Brave

---

📅 Timeline

• Day 1-2: Set up manifest, basic popup UI, authentication
• Day 3: Implement resource capture and Supabase integration
• Day 4: Add context menu, error handling, polish UI
• Day 5: Testing, documentation, demo video

---

🔗 Resources

• Chrome Extension Docs (Manifest V3)
• Supabase JS Client Docs
• DumpIt Main Repo
• Supabase Auth in Extensions

---

🎯 Success Criteria

✅ Extension authenticates users via Supabase
✅ One-click capture of current page as resource
✅ Resources appear in main DumpIt dashboard
✅ Clean, polished UI matching DumpIt design
✅ Complete documentation and demo video

---

💬 Questions or Blockers?

If you encounter any issues:

1. Check main app's src/lib/supabase.ts for API patterns
2. Use GitHub Copilot with this prompt:

   "Generate a Chrome extension popup that saves the current tab URL to Supabase using the resources table schema"

3. Ping team lead for Supabase credentials or RLS policy questions

---

Assigned to: [Teammate Name]
Priority: High
Estimated Time: 3-5 days
Due Date: [Insert Hackathon Deadline]

---

Good luck! 🚀 Let's make DumpIt capture effortless!