TrailSteps is a Chrome Extension that captures every interaction you perform on a website, turns them into editable steps in a sidebar panel, and lets you export them as a structured PDF.
Think of it as a lightweight, open-source alternative to Tango.
- 📌 Tracks all clicks and interactions across any website
- 📝 Displays recorded steps in a clean sidebar UI (built with React + AntD)
- 🧹 Edit, delete, or reorder steps before export
- 📄 Submit to open a new PDF generation page
- 🖨️ Download your step-by-step guide as a PDF
- Creating tutorials and SOPs
- QA/testing documentation
- Internal process guides
- Bug reproduction steps
- Onboarding workflows
- React
- Vite
- TypeScript
- Tailwind CSS
- Ant Design
- Chrome Extension Manifest V3
- PDF Export using
html2canvas+jsPDForhtml2pdf.js
trailsteps/
├── public/
│ ├── pdf.html # HTML entry for PDF React page
│ └── icons/ # Extension icons
├── src/
│ ├── content/ # contentScript.ts - DOM tracking logic
│ ├── background/ # background.ts - event routing & tab handling
│ ├── sidepanel/ # React sidebar UI (Vite + AntD + Tailwind)
│ ├── pdfview/ # React PDF view page for export
│ └── manifest.json # Chrome extension configuration
├── vite.config.ts
└── README.md
- Click tracking starts when the user clicks Start in the side panel.
- Steps are stored in local extension state (Zustand, chrome.storage.local).
- On submission, a new tab (pdf.html) opens and renders the tracked steps.
- PDF can be generated using html2canvas + jsPDF or html2pdf.js.
- Run yarn build
- Go to chrome://extensions
- Enable Developer Mode
- Click Load Unpacked
- Select the dist/ folder
git clone https://github.com/vikhyatsingh123/TrailSteps.git
cd trailstepsyarn installyarn devyarn build