DEV Community

Trần Nguyên Châu
Trần Nguyên Châu

Posted on

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

#webdev #productivity #opensource #showdev

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

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.

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

The typical workflow:

  1. Find a product image you want
  2. Right-click → Save As
  3. Rename the file so it makes sense later
  4. Navigate to the right folder
  5. Open your spreadsheet
  6. Manually type in the product name, price, URL, supplier, notes...
  7. Repeat. 50 times. Every session.

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.

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

Automated scrapers sound great in theory. In practice:

  • 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

✅ 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.

❌ Pain #3: Images without context become unsearchable

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."

Good luck.

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.

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

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 technical side (for the devs)

The project is a monorepo with two independent build targets:

  • Web dashboard → Next.js 15 + React 19 + Tailwind CSS 4
  • Chrome extension → Vite + TypeScript, Manifest V3

Both share a src/shared/ layer — same auth logic, type definitions, and Google API helpers across both contexts.

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
Enter fullscreen mode Exit fullscreen mode

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:

// 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 */ }
}
Enter fullscreen mode Exit fullscreen mode

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.

Try it

ImageSnap is live on the Chrome Web Store with a free tier (30 captures/month).

👉 imagesnap.cloud

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.

Top comments (0)