MindMap Extension

A browser extension that uses AI to extract concepts from web pages and organize them into interactive mindmaps.

Setup

1. Get a Gemini API Key

1. Go to Google AI Studio
2. Sign in with your Google account
3. Click "Create API Key"
4. Copy the generated key

2. Install the Extension

1. Build the extension:

   npm install
   npm run build

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

3. Enable "Developer mode" (toggle in top right)

4. Click "Load unpacked"

5. Select the dist folder from this project

3. Configure the Extension

1. Click the MindMap extension icon in your browser toolbar
2. Click "Settings"
3. Paste your Gemini API key and click "Validate & Save"

Usage

1. Extract concepts: Navigate to any webpage, click the floating MindMap button (bottom-right), then click "Extract from Page"

2. Review concepts: The widget shows extracted concepts. Accept or reject each one, or click "Accept All"

3. Choose mindmap: Use the dropdown to add concepts to an existing mindmap or create a new one

4. View mindmap: Click "View Mindmap" to open the interactive canvas where you can:

   • Pan and zoom the canvas
   • Drag nodes to reposition them
   • Click nodes to view their content
   • Switch between Map and Reading views

Development

npm run dev      # Start development server
npm run build    # Build for production

Tech Stack

• React + TypeScript
• Vite
• Zustand (state management)
• Google Gemini API (AI extraction)
• Chrome Extensions Manifest V3