Record your screen. Every click captured. Export as a professional SOP — instantly.
ProcessFlow is a Chrome Extension that turns your screen activity into a polished, shareable Standard Operating Procedure (SOP). Simply start recording, click through your workflow, and get a fully structured PDF document — with annotated screenshots for every step.
- Click "Start Recording" from the extension popup — a floating recording bar appears on the page.
- Perform your workflow — every mouse click triggers an automatic screenshot with a visual glow highlight at the click location.
- Stop the recording — your captured steps are loaded into the SOP Builder.
- Edit your SOP — add titles and descriptions to each step, reorder via drag-and-drop, or delete unwanted steps.
- Export — download a professional PDF or save as a draft to resume later.
- Automatic Screenshot Capture —
chrome.tabs.captureVisibleTabfires on every click, with a 150ms delay so the glow effect is visible in the screenshot. - Visual Click Highlighting — animated pulse rings and a glow dot mark exactly where you clicked.
- Floating Recording Bar — a persistent on-page indicator shows elapsed time, step count, and Pause/Stop controls without interfering with page styles.
- Pause & Resume — pause recording at any point; clicks are ignored while paused.
- SOP Builder — a dedicated full-page editor (
builder.html) with editable step cards. - Drag-and-Drop Reordering — rearrange steps freely using the HTML5 drag-and-drop API.
- PDF Export — generates a structured PDF via jsPDF with title, author, date, and all annotated screenshots.
- Draft Saving — SOPs persist in
chrome.storage.localso you can close and reopen without losing work. - Multi-tab Support — the service worker coordinates state across tabs; the content script guards against double-injection.
processflow-extension/
├── manifest.json # Manifest V3 config — permissions, service worker, popup
├── assets/
│ └── icons/ # Extension icons (16px, 48px, 128px)
├── background/
│ └── service-worker.js # Coordinates recording state, screenshot capture, SOP storage
├── content/
│ └── content.js # Injected into pages — click tracking, glow effect, recording bar
├── popup/
│ ├── popup.html # Extension popup UI
│ ├── popup.css # Popup styles
│ └── popup.js # Popup logic — start/stop recording, list saved SOPs
├── recorder/
│ ├── recorder.html # Recorder UI (if standalone recorder view is used)
│ ├── recorder.css
│ └── recorder.js
├── builder/
│ ├── builder.html # SOP Builder full-page editor
│ ├── builder.css # Builder styles
│ └── builder.js # Builder logic — step editing, drag-drop, save, PDF export
├── pdf/
│ └── (PDF export helper)
└── libs/
└── jspdf.umd.min.js # jsPDF library (bundled, no external CDN needed)
The extension is not yet on the Chrome Web Store. Load it manually in developer mode.
-
Clone the repository
git clone https://github.com/jnaneshshetty51/processflow-sop.git cd processflow-sop -
Open Chrome and navigate to
chrome://extensions/ -
Enable Developer Mode (toggle in the top-right corner)
-
Click "Load unpacked" and select the
processflow-extension/folder -
The ProcessFlow icon will appear in your Chrome toolbar — pin it for easy access.
- Navigate to the page you want to document.
- Click the ProcessFlow icon in the toolbar and press Start Recording.
- Perform the steps of your workflow — click buttons, fill forms, navigate pages.
- Use the Pause button on the recording bar if you need to take a break.
- Press Stop when done. The SOP Builder opens automatically.
- In the SOP Builder, fill in the Title, Author, and Date.
- Each captured click becomes a step card with its screenshot.
- Edit step titles and descriptions to explain what each action does.
- Drag cards to reorder steps, or use the ↑ ↓ buttons.
- Delete any unwanted steps with the ✕ button.
- Click Save Draft to store in browser storage, or Download PDF to export.
- Open the extension popup — saved SOPs are listed there.
- Click a saved SOP to reopen it in the Builder and continue editing.
| Layer | Technology |
|---|---|
| Extension Platform | Chrome Extensions — Manifest V3 |
| Background | Service Worker (background/service-worker.js) |
| Content Script | Vanilla JS injected at runtime (content/content.js) |
| UI | HTML + Vanilla CSS |
| PDF Generation | jsPDF (bundled) |
| Storage | chrome.storage.local |
| Screenshot API | chrome.tabs.captureVisibleTab |
| Permission | Why It's Needed |
|---|---|
storage |
Save and load SOP drafts |
tabs |
Capture visible tab screenshots |
activeTab |
Inject content script into the current page |
scripting |
Programmatically inject the content script |
<all_urls> |
Allow recording on any website |
- Service Worker acts as the central coordinator: it handles messages from the popup and content script, triggers screenshot captures, and manages SOP data in storage.
- Content Script is injected on demand (not on every page load) to minimise overhead. It uses a
window.__processflow_injectedguard to prevent double-injection when navigating between pages during a single recording session. - Builder is opened as a
chrome-extension://page (listed inweb_accessible_resources) and reads pending steps from storage on load. - All styles injected by the content script use
!importantto prevent page CSS from overriding the recording bar and glow effects.
Pull requests are welcome! For major changes, please open an issue first to discuss what you'd like to change.
MIT — see LICENSE for details.
Created with love by Antigravity.