ScreenGuide 📸✨

Create interactive step-by-step user guidelines and tutorials offline with screenshots, zoom loupes, highlights, and multi-format exports.

---

Features

• Automatic & Manual Recording: Captures clicks, inputs, links, and navigations with smart suggested descriptions and target bounding boxes.
• Cross-Page Pause & Resume: Persistent draggable floating toolbar follows your workflow across any page or domain navigation.
• Advanced Zoom & Highlight Studio:
  • Zoom Loupe (Magnifier): Zoom in on small buttons or fields (1.5x - 3.5x) with circular/rectangular callouts and guide lines.
  • Spotlight Focus: Dim the background and illuminate key UI areas.
  • Highlight Boxes: Customizable border styles (solid, dashed, glow) and colors.
  • Blur / Redact: Blur, pixelate, or blackout sensitive passwords and credentials.
  • Numbered Pins & Arrows: Add step badges (1), (2) and directional arrows.
• Interactive Presentation Player: Built-in walkthrough slideshow mode with progress bar and step checklist.
• 100% Offline & Private: Stored locally in IndexedDB with zero cloud transmission.
• Multi-Format Export:
  • Standalone Single-File Interactive HTML
  • PDF & Print-ready documentation
  • Markdown with embedded screenshots
  • Full JSON backup & restore
  • Complete ZIP archive

---

Development & Build

Prerequisites

• Bun (v1.2+)

Installation

bun install

Build Extensions (Chrome & Firefox)

bun run build

Running bun run build automatically creates:

• dist/ — Configured for Google Chrome / Chromium / Edge / Brave
• dist-firefox/ — Configured for Mozilla Firefox (with background.scripts & Gecko ID)

Alternatively, you can build specific targets:

bun run build:firefox   # Builds directly for Firefox in dist/
bun run build:chrome    # Builds directly for Chrome in dist/

---

How to Load in Browsers

Mozilla Firefox:

1. Open about:debugging#/runtime/this-firefox in Firefox.
2. Click Load Temporary Add-on...
3. Select dist-firefox/manifest.json (or dist/manifest.json after running bun run build:firefox).
4. Click the ScreenGuide extension icon in your toolbar!

Google Chrome / Chromium / Edge / Brave:

1. Open chrome://extensions in your browser.
2. Enable Developer mode (top right toggle).
3. Click Load unpacked.
4. Select the dist/ directory from this project folder.
5. Click the ScreenGuide extension icon in your toolbar!

---

Project Structure

screen-guide/
├── manifest.json            # Manifest V3 configuration
├── package.json             # Bun dependencies & build scripts
├── vite.config.ts           # Multi-entry build configuration & Firefox packager
├── CHROMEWEBSTORE.md        # Store listing & permissions justifications
├── scripts/
│   └── generate-icons.ts    # Script generating 16x16, 48x48, 128x128 PNG icons
├── popup/
│   └── index.html           # Action popup entry
├── app/
│   └── index.html           # Studio, Editor & Player entry
├── public/
│   ├── manifest.json
│   └── icons/               # Real PNG icons
└── src/
    ├── background/
    │   └── index.ts         # Background service worker (capture engine & session state)
    ├── content/
    │   ├── index.ts         # Content script orchestrator
    │   ├── floating-toolbar.ts # In-page draggable Shadow DOM floating bar
    │   └── inspector.ts     # Live element highlighter & action interceptor
    ├── popup/
    │   ├── popup.tsx        # React popup UI
    │   └── popup.css
    ├── app/
    │   ├── main.tsx         # React app bootstrap
    │   ├── App.tsx          # Dynamic hash router
    │   ├── components/      # Navbar, StepListSidebar, CanvasAnnotator, StepEditorPanel, ExportModal
    │   ├── pages/           # DashboardPage, EditorPage, PlayerPage
    │   └── styles/          # app.css design system
    └── lib/
        ├── types.ts         # TypeScript models
        ├── db.ts            # IndexedDB storage engine
        ├── storage.ts       # chrome.storage session manager
        ├── dom-utils.ts     # Smart action & selector generator
        ├── annotator.ts     # Canvas zoom loupe & highlight engine
        └── exporters/       # HTML, Markdown, JSON, ZIP exporters