MindMark AI

"Save now, think later". A smart bookmark tool that saves webpages with AI-generated summaries using Chrome's built-in Gemini Nano.

Comment

Inspiration

MindMarkAI: Rethinking Bookmarks with On-Device AI We've all been there: saving dozens of articles, posts, and screenshots with the best intentions to read them later, only to forget what they were about or why they mattered. Traditional bookmarks are just URLs with titles. There is no context, no search, no intelligence.

With Google's Gemini Nano for Chrome, we saw an opportunity to solve this problem and provide an experience that is quick, free and private for any individual. What if every bookmark came with an AI-generated summary? What if you could search your saved content using natural language? What if all of this happened entirely on your device, with zero cloud dependency and zero usage limits?

That's how MindMarkAI was born. A smart bookmarking assistant that makes "save now, think later" actually work.

What it does

MindMarkAI is an intelligent Chrome extension that transforms bookmarking from simple URL saving into a smart, searchable knowledge base - all powered by on-device AI.

Core Features

1. AI-Powered Summaries Every page you save gets automatically summarized by Gemini Nano into 6-7 concise lines. No more guessing what that article from last month was about - the AI reads it for you and extracts the key points.

2. Natural Language Search Search your bookmarks like talking to a human: "find the article about Epic Systems I saved last month" or "show me posts about machine learning." The AI understands context, synonyms, and temporal references - no keyword matching required.

3. Intelligent Screenshots Capture any portion of your screen, and the AI analyzes it using multimodal understanding. It can read text from images, understand charts and diagrams, and generate meaningful summaries. OCR extraction is built-in as a fallback. And even the OCR + text Gemini AI fallback works amazingly well.

4. LinkedIn Integration Save LinkedIn posts directly from your feed with one click. The extension automatically extracts the author, content, and constructs proper post URLs. This is perfect for saving career advice, industry insights, or inspiring stories.

5. Smart Tagging & Categorization Gemini Nano automatically detects content type (Article, Video, Documentation, LinkedIn Post, etc.) and generates 2-3 relevant topic tags for easy organization.

6. Weekly Digest Notifications Get customizable weekly summaries of your saved content with AI-generated highlights. Schedule it for your preferred day and time. This is perfect for weekend reading sessions.

7. Private & Offline Everything runs locally on your device. No cloud servers, no data transmission, no tracking. Your bookmarks, summaries, and searches never leave your browser. Works completely offline after the initial Gemini Nano download.

The MindMarkAI Workflow

  1. Save: Click the floating button or LinkedIn "Save to MindMark" button
  2. AI Processing: Gemini Nano analyzes content and generates summaries in the background
  3. Search: Use natural language to find exactly what you need
  4. Organize: Auto-tagged bookmarks with collections, read/unread status, and favorites
  5. Review: Weekly digest keeps you engaged with your saved knowledge

Bottom line: MindMarkAI makes "save now, think later" actually practical by ensuring you'll remember why you saved something and can find it instantly when you need it.

How we built it

Architecture Overview

MindMarkAI follows a Message-Passing Architecture with three main components:

┌─────────────────┐          ┌──────────────────┐          ┌───────────────┐
│      Content Script                │ ───>│     Background Worker          │───>│       Gemini Nano AI       │
│       (content.js)                      │           │      (background.js)                 │          │           (On-Device)          │
└─────────────────┘          └──────────────────┘          └───────────────┘
        │                                                                    │
        ├─> Extracts page text                              ├─> Queue Management
        ├─> Captures screenshots                        ├─> AI Summarization
        ├─> LinkedIn parsing                                 ├─> Analytics
        └─> Saves to Storage                                └─> Notifications

File Structure

MindMarkAI/
├── manifest.json          # Extension configuration
├── background.js          # Service worker (AI, queue, notifications)
├── content.js             # Content script (page interaction, extraction)
├── bookmarks.js           # Bookmarks page logic (UI, search, collections)
├── onboarding.js          # First-time setup flow
├── popup.js               # Toolbar popup (optional summarizer)
├── bookmarks.html         # Bookmarks management page
├── onboarding.html        # Onboarding/setup page
├── popup.html             # Extension popup UI
└── tesseract.min.js       # OCR library for screenshots

Key Technical Decisions

  1. Why Sequential Queue Processing?
  2. Problem: Chrome has limited resources that it can provide to Gemini Nano. We saw the model not available error in case many tabs were available or too many requests were being proceed.
  3. Solution: Built a persistent queue with isProcessing flag

  4. Result: 100% success rate

  5. Why chrome.storage.local Instead of IndexedDB?

  6. Simpler API, no schema migrations

  7. Native to Manifest V3 service workers

  8. Perfect for our scale (thousands of bookmarks, ~10MB quota)

  9. Easy future migration to chrome.storage.sync for cross-device sync

  10. Why Shadow DOM for UI?

  11. Complete isolation from host page CSS

  12. No style conflicts on any website

  13. Floating button works consistently everywhere

  14. Why Delete Raw Content After Summarization?

  15. Raw page text can be 50-100KB per bookmark

  16. AI summary is only 500-1000 characters

  17. Allows users to save thousands of bookmarks without hitting quota

  18. Failed summaries keep raw content for retry capability

Implementation Highlights

Screenshot Feature: // 1. User selects area with crosshair cursor // 2. Capture BEFORE showing loading (prevents darkened screenshots) const dataUrl = await chrome.tabs.captureVisibleTab(); // 3. Crop to selected region using Canvas API const croppedImage = await cropImage(dataUrl, x, y, width, height); // 4. Try multimodal AI analysis, fallback to OCR + text summarization

LinkedIn Integration: // Dynamic button injection with URL-based selectors if (window.location.href.includes('/feed/')) { posts = document.querySelectorAll('.feed-shared-update-v2'); // Feed-specific } else { posts = document.querySelectorAll('[data-id*="urn:li:activity"]'); // Fallback } // Extract activity ID from multiple sources for proper post URLs

AI Search:

  • Sends user query + all bookmark metadata to Gemini Nano
  • AI understands synonyms, temporal reasoning ("last month"), semantic similarity
  • Returns ranked results based on relevance

Challenges we ran into

Challenge 1: Multimodal API Availability

Problem: Gemini Nano's multimodal capabilities (image analysis) aren't available on all devices. Most users have only text-based API access. Solution: Graceful degradation strategy

  • Primary: Try multimodal API to analyze screenshot directly
  • Fallback: Use Tesseract.js OCR to extract text from screenshot
  • Final step: Send OCR text to Gemini Nano for text-based summarization
  • Users get intelligent summaries regardless of device capabilities

Challenge 2: Service Worker Lifecycle

Problem: Chrome terminates service workers after 30 seconds of inactivity. Our queue processing took minutes. Solution:

  • Persist queue state in chrome.storage.local
  • Resume processing on service worker restart
  • Use keepalive messages during long AI operations

Challenge 3: Content Security Policy Violations

Problem: Chrome extensions have strict CSP—no inline scripts, no remote code execution. Solution:

  • Run Tesseract.js directly in content script (avoids CORS issues)
  • Use Google Analytics Measurement Protocol instead of gtag.js
  • Move all event handlers from HTML attributes to JavaScript addEventListener

Challenge 4: Storage Limitations

Problem: Screenshots as base64 consume 200-500KB each. Users hit 10MB quota quickly. Partial Solution:

  • Compress images before storage
  • Warn users about storage usage
  • Delete raw content after summarization to maximize space Future Plan: Migrate screenshots to IndexedDB (larger quota) while keeping metadata in chrome.storage

Challenge 5: Gemini Nano AI Model Availability and User Trust

Problem: Extension requires Gemini Nano to function, but model may not be downloaded or enabled on user's Chrome. Users may be concerned about downloading an AI model to their device without understanding what it is. Solution:

  • Built comprehensive onboarding flow that checks model status on first install
  • Clear, transparent messaging: "Google Gemini Nano model needs to be downloaded for AI features to work locally. It's a model owned by Google, made for Chrome."
  • Graceful download experience with progress bar showing real-time download status (~30 seconds)
  • Emphasized trust and safety: Model is from Google, runs locally, no data sent to cloud
  • Handle three states: unavailable (flags not enabled), downloadable (needs download), available (ready to use)
  • Fallback instructions for manual setup if flags aren't enabled
  • "You're All Set!" confirmation screen before users start using the extension

Challenge 6: LinkedIn Post URL Extraction

Problem: LinkedIn posts have multiple formats—feed posts use data-urn, profile posts use componentkey. Solution: Implemented 4 extraction strategies with fallbacks:

  1. Check post element itself for data-urn (feed posts)
  2. Check componentkey attribute (profile posts)
  3. Look for child elements with activity URNs
  4. Parse link hrefs for activity IDs

Accomplishments that we're proud of

  • 100% Privacy: Not a single byte of user data leaves their device
  • Zero Cost: Unlimited AI summaries with no API fees
  • Actually Works Offline: Save and browse bookmarks without internet
  • Graceful Degradation: Falls back intelligently when features are unavailable
  • Production-Ready UX: Thoughtful error handling, progress indicators, and edge cases covered
  • Impressive natural language search: Option to look for their saved content using natural language

What we learned

1. On-Device AI Has Real Constraints

Unlike cloud APIs that can handle parallel requests, Gemini Nano inside chrome seems to have chrome driven resource limits. We learned the hard way that:

  • Multiple simultaneous AI requests cause out-of-memory errors
  • The first AI session initialization can take 20-30 seconds
  • Solution: We built a sequential queue system that processes one bookmark at a time, survives service worker restarts, and gracefully handles failures

2. Gemini Nano's Multimodal Capabilities Are Powerful

Gemini Nano doesn't just read text—it can analyze images! It's actually quite impressive in action. As the feature is still experimental, we implemented a graceful degradation strategy:

  • Try multimodal analysis first (reads screenshots visually, understands charts/diagrams)
  • Fallback to Tesseract.js OCR + text summarization if multimodal is unavailable
  • This taught us to build resilient systems that adapt to device limitations

3. Privacy-First Design Requires Creative Architecture

Building a "zero cloud" extension meant rethinking common patterns:

  • Use chrome.storage.local instead of remote databases
  • Implement Google Analytics via Measurement Protocol (CSP blocks traditional gtag.js)
  • Store screenshots as base64-encoded images (no external image hosting)
  • All AI processing happens client-side with no data transmission

What's next for MindMark AI

What's Next

  • Larger Storage: Migrate to IndexedDB for screenshots
  • Export/Import: JSON/CSV backup for bookmark portability
  • Browser Sync: Cross-device sync while maintaining privacy
  • Chrome Web Store: Public release after final testing

MindMarkAI proves that powerful AI features don't require cloud infrastructure. With Chrome's built-in AI, we can build privacy-first, cost-free, intelligent applications that work anywhere—even at 30,000 feet.

Built With

  • alarms)-and-google-analytics-4-measurement-protocol-for-usage-analytics.-no-external-frameworks
  • analytics
  • and-chrome.storage.local-for-data-persistence.-the-extension-uses-chrome-extension-apis-(tabs
  • base64-encoding
  • build-tools
  • canvas-api
  • chrome
  • chrome's-gemini-nano-ai-(on-device)
  • chrome-alarms-api
  • chrome-apis
  • chrome-built-in-ai
  • chrome-extension-manifest-v3
  • chrome-notifications-api
  • chrome-session-storage
  • chrome-storage-api
  • chrome-tabs-api
  • content-scripts
  • gemini-nano
  • gemini-nano-multimodal-api
  • gemini-nano-prompt-api
  • google
  • google-analytics-4
  • javascript-(es6+)
  • manifest-v3
  • measurement
  • message-passing
  • mutationobserver
  • notifications
  • protocol
  • sequential-queue-processing
  • service-workers
  • shadow-dom
  • tesseract.js
  • tesseract.js-for-ocr
  • tesseract.js-ocr
Share this project:

Updates