How to Add a Backend to Your Chrome Extension

Chrome's built-in storage (chrome.storage.local and chrome.storage.sync) is limited: 5MB local, 100KB sync, no user accounts. If your extension needs user accounts, cloud sync beyond 100KB, premium features, analytics, or file storage — you need a backend.

The challenge: Chrome extensions run in a browser context with strict content security policies. You need a backend accessible via simple HTTP requests from a content script or popup.

Chrome extensions authenticate users in two ways:

Popup-based login form: Build a login form in your extension's popup HTML. On submit, call ShipStack's auth API. Store the returned token in chrome.storage.local for persistence.

Chrome Identity API (OAuth): For social login, use chrome.identity.launchWebAuthFlow() to handle the OAuth redirect. Exchange the auth code for a session token through your backend.

The popup approach is simpler for email/password. The Identity API is necessary for OAuth providers.

Replace chrome.storage.sync (100KB limit) with cloud storage through ShipStack:

Save settings: POST /api/db/user_settings with the extension config. Load settings: GET /api/db/user_settings?user_id=current-user on startup. Save data: POST /api/db/bookmarks, /api/db/highlights, /api/db/notes.

This gives you unlimited storage, cross-browser sync (works in Chrome, Firefox, Edge with the same API), and server-side backup. For offline support, keep a local copy in chrome.storage.local and sync when online.

Many successful extensions use freemium models. Implement it by tracking usage (POST /api/db/usage_events), checking limits before premium actions, enforcing tiers based on user plan metadata, and handling payments via Stripe Checkout (opens in a new tab from the extension).

ShipStack's rate limiting enforces tier limits at the API level, providing a server-side check that can't be bypassed by modifying the extension.

A production Chrome extension backend:

Extension popup/content script → HTTP requests → ShipStack API → Supabase/Firebase

Keep API calls in background.js (service worker) rather than content scripts to avoid CORS issues and keep your API key out of page contexts.

With this setup, you get full backend capabilities — user accounts, unlimited cloud sync, file storage, and premium features — without running a server.