Step-by-step guide
SagaSteps
Capture a repeatable guide on an authorised site and export it. Capture a sequence on an authorised website, review and redact screenshots, edit the descriptions, and export a guide as HTML or ZIP.
You explain the same web task to several people or clients (for example how to reserve, submit or change something) and want a clean step-by-step guide with screenshots, with private areas masked, that you can re-export when the site changes.
The guide and practice files are free to read and download. The complete program is in the paid download; the free practice pack does not include it.
See it in use
Record a masked one-step instruction
A screenshot walkthrough with fictional practice data. Select a step to explore.
1. Start with
Record a masked one-step instruction
The fictional Lindgren site has a reservation form and confirmation page.
Sample files and contents
examples/sagasteps/practice-site/: a fictional two-page Lindgren Tool Library site with a Reserve form and confirmation. Serve it only on localhost and use made-up details: submitting the form puts those details into the local page URL.
Practice files and guides are free. The complete app is included only where the product page says so.
2. In the app
Try it in three steps
- Serve the site and start a guide for Lindgren Tool Library.
- Record a made-up reservation, then mask its card field.
- Preview the package and review every export surface before sharing.
Show every click and setting
- In a terminal, serve the practice site: python3 -m http.server 8098 --bind 127.0.0.1 --directory examples/sagasteps/practice-site (on Windows use py instead of python3), then open http://127.0.0.1:8098/ in Chrome.
- Click the SagaSteps icon, create a guide titled Reserve a tool for the client Lindgren Tool Library, then click Allow recording on this site and click Allow in Chrome's prompt.
- Click Start recording, type any made-up card number such as 0000-TEST, pick a Tool and a Pick-up day, click Reserve, then click Stop.
- Click Open editor, mask the card-number field on its screenshot, and click Export ZIP package.
3. The result
Inspect the result
The in-app preview shows one step and a masked screenshot. Previewing has not downloaded or recorded an exported version.
What to check in the practice result
The exported guide shows the captured fictional tool-reservation steps with selected masks burned into the exported screenshots. The recorder does not read typed form values directly as event text. The original local screenshot and captured page URL can still contain them. URL queries are excluded from exports by default; enabling query export can include them. Adding a mask does not erase the original image or redact stored URLs. Burn masks into the stored image when appropriate, and review guide links and every exported image before sharing.
This is the guide’s Lindgren scenario and a preview of its assembled package, before export.
See the workflow at a glance
Choose a short explanation, then follow the worked example below. Check the requirements and compatibility before using your own files.
Explain the reservation once, then share the steps.
A repeatable browser task deserves a guide people can follow. SagaSteps records an authorised site's visible tab and lets you edit the captured steps before exporting HTML or a ZIP. Follow the fictional Lindgren Tool Library reservation, using made-up details throughout. Inspect every screenshot before sharing. The extension requires manual installation through Chrome Developer mode; there is no Web Store listing. Recording and screenshot export were checked on Linux, while masking and Windows/macOS remain unverified. Start with the practice site in the guide.
View the illustrated card
Before you start
- Desktop Google Chrome with Developer mode for a manual unpacked install. SagaSteps 1.0.1 passed an ordinary Chrome 152.0.7977.82/Linux UI check on synthetic localhost content; Windows/macOS remain unverified.
- A website you are authorised to record, opened over http:// or https:// (not a local file).
- The purchased sagasteps-0.1.2-guide-bundle.zip download. It contains program/sagasteps-extension-1.0.1.zip and retains the earlier public preview ZIP unchanged.
Your first result
Download and extract your bundle
Buy the SagaSteps guide bundle at /store/sagasteps/ and extract sagasteps-0.1.2-guide-bundle.zip. Then extract program/sagasteps-extension-1.0.1.zip into a stable folder. Choose the extracted folder containing manifest.json at Load unpacked. The outer GUIDE.html and examples/ contain the illustrated manual and fictional practice material; the retained older preview keeps its original permissions.
Load it in Chrome
Open chrome://extensions, switch on Developer mode (top right), click Load unpacked and select the extension folder from the package (the one containing manifest.json). SagaSteps opens its editor in a new tab. Pin SagaSteps from Chrome's puzzle-piece Extensions menu (pin icon) so its toolbar icon stays visible.
Create a guide
Click the SagaSteps icon. Under Guide use Create a new guide: type a New guide title and a Client, then click Create. You can also create guides in the editor (Open editor).
Allow the site
Open the site in a tab, click the SagaSteps toolbar icon and click Allow recording on this site. Chrome shows its own prompt, “SagaSteps” has requested additional permissions: Read and change your data on <site>. Click Allow (Deny is highlighted by default, so do not just press Enter). The popup then says Access granted; if the prompt closed it, click the icon again. Access covers that one site only, and Remove access withdraws it at any time.
Record
Check that Record into shows your guide and click Start recording; the popup says Recording on <site> for <client>. Each click, form submit or field change adds a step with a screenshot of the visible part of the tab, and the popup counts them (for example 2 step(s) captured, 0 skipped). Capture now or Alt+Shift+S adds one without a page action. Typed field values are never stored, only that a field was filled. Click Stop when done.
Edit and mask
Click Open editor. Steps get a plain default heading such as Fill in the field: rewrite the heading and text, reorder or delete steps, and drag on a screenshot (or type coordinates and click Add mask) to cover anything private. Masks are burned into exported images; Burn masks into the stored image also overwrites the stored screenshot and cannot be undone. Replace screenshot re-captures one stale step and keeps your text.
Export
Fill in Package details (Guide title, Client, optional Summary). Select Preview package and inspect the assembled guide and masked screenshots; close the preview to return to the editor. Preview does not download or increment the export version. Then select Export ZIP package or Download HTML only. The ZIP contains index.html, guide.json, README.txt and one image per step. Export requires at least one step; an export after changes receives the next version.
Where your data is
Guides, screenshots and masks are stored only in this Chrome profile and survive restarts; exports go to your Downloads folder. There is no account, cloud or sync. Copy this guide for that client makes an independent copy for another client; Delete guide removes a guide and its screenshots. Removing the extension deletes all its stored guides, so export first.
A worked example
Record how to reserve a tool
Input: examples/sagasteps/practice-site/: a fictional two-page Lindgren Tool Library site with a Reserve form and confirmation. Serve it only on localhost and use made-up details: submitting the form puts those details into the local page URL.
- In a terminal, serve the practice site: python3 -m http.server 8098 --bind 127.0.0.1 --directory examples/sagasteps/practice-site (on Windows use py instead of python3), then open http://127.0.0.1:8098/ in Chrome.
- Click the SagaSteps icon, create a guide titled Reserve a tool for the client Lindgren Tool Library, then click Allow recording on this site and click Allow in Chrome's prompt.
- Click Start recording, type any made-up card number such as 0000-TEST, pick a Tool and a Pick-up day, click Reserve, then click Stop.
- Click Open editor, mask the card-number field on its screenshot, and click Export ZIP package.
Expected result: The exported guide shows the captured fictional tool-reservation steps with selected masks burned into the exported screenshots. The recorder does not read typed form values directly as event text. The original local screenshot and captured page URL can still contain them. URL queries are excluded from exports by default; enabling query export can include them. Adding a mask does not erase the original image or redact stored URLs. Burn masks into the stored image when appropriate, and review guide links and every exported image before sharing.
Troubleshooting
The popup says “This page cannot be recorded”.
Recording works only on http(s) pages. Open the site over http:// or https://, for example through the local server in the example, not as a file.
Chrome refused a screenshot, or recording seems paused.
Chrome ties screenshot access to the tab where you invoked SagaSteps and to that one site. Stay on the site, reopen the popup on that tab or press Alt+Shift+S to re-grant, then continue.
Some fast clicks were reported as skipped.
Chrome allows two screenshots per second. Work a little slower; skipped actions are reported, never faked.
Export ZIP package is greyed out.
The guide has no steps yet. Record at least one step, then export.
Compatibility & limits
- Visible part of the tab only (no full-page screenshots), rectangular masks, one browser profile, English interface.
- Manual unpacked install in desktop Chrome. It is not in the Chrome Web Store and does not update automatically; to update, replace the folder and click the reload icon on the extension's card in chrome://extensions.
- Review every screenshot and mask before sharing a guide. Record only sites you are authorised to record.
- The original program keeps its included preview permissions: you may use it, including for real work, but not sell or redistribute it (see PREVIEW-PERMISSION.md).
- An ordinary Chrome 152.0.7977.82/Linux Developer-mode install, actual site permission, one-click capture, editor mask, preview and ZIP export passed under Xvfb UI automation with fictional localhost content. A separate Chrome for Testing 151/Linux run passed. Multi-step client workflows, Windows/macOS, repeated use, clean reinstall, interruption and full-v1/commercial-key checks remain unverified. No Web Store listing or activation key.
Need a hand?
Tell us the product, host application and version, what you tried, and the exact error. Contact support with a fictional example; keep private customer files and passwords out of your message.