Skip to content
Devflovv

SaaSWeb application · API/backend · Other

Web page annotation browser extension

We rescued a prototype browser extension for annotating web pages and delivered a working alpha in under a month. The release added email sharing, a public share page and reliable per-page storage on a serverless backend, and fixed a defect that let drawings appear on unrelated sites.

Illustration of Web page annotation browser extension

Problem

The founder's prototype could not share drawings and had structural defects: nearly every URL collapsed to the same storage key, so drawings leaked onto unrelated sites, and drawings were tied to sites rather than users.

Solution

After a discovery phase and a written estimate for a full rebuild, the client funded a tightly scoped phase 1. The team replaced a failing client-side email library with a Cloud Function using nodemailer, built a second function to serve a share page, switched from an iframe approach blocked by anti-clickjacking headers to tab screen capture, fixed the storage-key bug with a Firestore-safe encoded key and designed a per-install ID and normalised schema for future collaboration.

Key features

  • Draw annotations over any web page
  • Share annotated pages by email with an embedded capture and attachment
  • Public share page rendering the drawing over a captured page image
  • Different share routes for recipients with and without the extension
  • Drawings persist per URL across page and extension reloads
  • Drawing mode disabled by default and enabled per tab
  • Screencast guide so the client can edit and redeploy functions

Tech stack

  • Chrome Extension APIs
  • Cloud Run
  • EmailJS
  • Firebase
  • Firebase Cloud Functions
  • Firebase Emulator
  • Firebase Realtime Database
  • Firestore
  • Git
  • Google Cloud IAM
  • JavaScript
  • captureVisibleTab
  • nodemailer

Let's Turn Your Idea Into Reality

Get Started