惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

腾讯CDC
Microsoft Azure Blog
Microsoft Azure Blog
L
LangChain Blog
Y
Y Combinator Blog
Microsoft Security Blog
Microsoft Security Blog
宝玉的分享
宝玉的分享
B
Blog RSS Feed
MongoDB | Blog
MongoDB | Blog
Jina AI
Jina AI
D
Docker
B
Blog
Engineering at Meta
Engineering at Meta
Last Week in AI
Last Week in AI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
I
InfoQ
G
Google Developers Blog
博客园 - Franky
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
The GitHub Blog
The GitHub Blog
T
The Blog of Author Tim Ferriss
大猫的无限游戏
大猫的无限游戏
阮一峰的网络日志
阮一峰的网络日志
U
Unit 42

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
I built a Chrome Extension that saves product images + co...
Trần Nguyên · 2026-05-23 · via DEV Community

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.