Tools: I built a Chrome Extension that saves product images + context directly to Google Drive & Sheets (2026)

Tools: I built a Chrome Extension that saves product images + context directly to Google Drive & Sheets (2026)

I built a Chrome Extension that saves product images + context directly to Google Drive & Sheets

❌ Pain #1: Manual saving is a productivity black hole

❌ Pain #2: Scrapers are unstable and give you garbage

❌ Pain #3: Images without context become unsearchable

❌ Pain #4: Your workflow breaks the moment you switch devices

The technical side (for the devs)

Try it Most product research workflows are secretly broken. You just don't notice until you're drowning in 400 unnamed screenshots and a half-filled spreadsheet at 11pm. Four problems. One tool. ❌ Manual saving steals hours you don't have ❌ Scrapers are unstable and dump garbage images with zero context ❌ Images without context become completely unsearchable over time ❌ Your workflow breaks the moment you switch devices Here's how ImageSnap solves each one. The typical workflow: You're not doing research. You're doing data entry. ✅ How ImageSnap fixes it: One click opens a side panel. The product name, price, and URL are already filled in — scraped automatically from the page. Hit Snap and the image goes to Google Drive, the row goes to Google Sheets. The whole thing takes 5 seconds. Automated scrapers sound great in theory. In practice: ✅ How ImageSnap fixes it: You stay in control. You browse naturally, and when you find something worth saving, you capture it intentionally. No garbage images. No broken selectors. No maintenance. You decide what gets saved and why. This is the silent killer. You save 300 product images over two weeks. Then you need to find "that ceramic supplier from last Tuesday with the MOQ under 500." A folder of IMG_20260521_143022.jpg files tells you nothing. Even if you renamed them, you've lost the price, the URL, the supplier name, the category — everything that made that image worth saving in the first place. ✅ How ImageSnap fixes it: Every image is captured with structured metadata — price, URL, title, custom fields you define per category. It all lives in Google Sheets, which means you can filter, sort, and search across everything instantly. The image and its context are permanently linked by ID. You'll find that ceramic supplier in 10 seconds. You save images on your laptop. You spot products on your phone during lunch. You reference your research on a tablet in a meeting. Three devices, three separate systems, constant friction. ✅ How ImageSnap fixes it: Everything syncs to your Google Drive and Google Sheets in real time. Open your sheet on any device — phone, tablet, laptop — and your entire research library is there, with images and context intact. The extension works on desktop. The web dashboard works everywhere. One workflow, every device, any time. The project is a monorepo with two independent build targets: Both share a src/shared/ layer — same auth logic, type definitions, and Google API helpers across both contexts. One thing that caught me off guard: extension popups are completely stateless. Every time the popup closes, the JS context is destroyed — including any in-memory auth tokens. My first instinct was to use an httpOnly session cookie via the API. It silently broke because cookies with sameSite: lax don't get sent in cross-origin fetch calls from the chrome-extension:// protocol. The fix was chrome.storage.local: On the data side, ImageSnap stores nothing on its own servers except subscription status. Your images live in your Google Drive. Your metadata lives in your Google Sheets. You own everything. ImageSnap is live on the Chrome Web Store with a free tier (30 captures/month). If you're doing ecommerce research, sourcing, competitor tracking, or content creation — give it a try and let me know what you think in the comments. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to ? It will become hidden in your post, but will still be visible via the comment's permalink. as well , this person and/or

Code Block

Copy

src/ ├── shared/ ← shared between web + extension │ ├── lib/ ← google-auth, sheets, drive helpers │ └── hooks/ ← useAppData, etc. ├── web/ ← React app (popup + web dashboard) └── extension/ ← manifest, content_script app/ ← Next.js routes + API CODE_BLOCK: src/ ├── shared/ ← shared between web + extension │ ├── lib/ ← google-auth, sheets, drive helpers │ └── hooks/ ← useAppData, etc. ├── web/ ← React app (popup + web dashboard) └── extension/ ← manifest, content_script app/ ← Next.js routes + API CODE_BLOCK: src/ ├── shared/ ← shared between web + extension │ ├── lib/ ← google-auth, sheets, drive helpers │ └── hooks/ ← useAppData, etc. ├── web/ ← React app (popup + web dashboard) └── extension/ ← manifest, content_script app/ ← Next.js routes + API CODE_BLOCK: // After successful login saveTokenToExtStorage(token, profile.email); // On every popup reopen — no server roundtrip needed const stored = await loadTokenFromExtStorage(); if (stored?.token) { const profile = await getUserInfo(stored.token); if (profile) { /* restore state instantly */ } } CODE_BLOCK: // After successful login saveTokenToExtStorage(token, profile.email); // On every popup reopen — no server roundtrip needed const stored = await loadTokenFromExtStorage(); if (stored?.token) { const profile = await getUserInfo(stored.token); if (profile) { /* restore state instantly */ } } CODE_BLOCK: // After successful login saveTokenToExtStorage(token, profile.email); // On every popup reopen — no server roundtrip needed const stored = await loadTokenFromExtStorage(); if (stored?.token) { const profile = await getUserInfo(stored.token); if (profile) { /* restore state instantly */ } } - Find a product image you want - Right-click → Save As - Rename the file so it makes sense later - Navigate to the right folder - Open your spreadsheet - Manually type in the product name, price, URL, supplier, notes... - Repeat. 50 times. Every session. - They break every time the site updates its HTML - They pull hundreds of irrelevant images — icons, banners, ads, lazy-loaded placeholders - You get a dump of raw data with no context about why you saved anything - Running them requires technical setup most researchers don't want to deal with - Web dashboard → Next.js 15 + React 19 + Tailwind CSS 4 - Chrome extension → Vite + TypeScript, Manifest V3