Skip to content

KostaD02/MirrorTab

Repository files navigation

MirrorTab

mirror-tab-logo
Mirror DOM interactions from a source tab to a target tab in real time.

Contributing Guidelines · Submit an Issue

CI

MirrorTab is a Chrome extension that captures user interactions on one browser tab (the source) and replays them live on another tab (the target). It supports clicks, keyboard input, form changes, scrolling, and mouse movement - with session recording and export built in.

Features

  • Live mirroring - clicks, inputs, keystrokes, scroll events, and mouse movement are forwarded from the source tab to the target tab in real time
  • Ghost cursor - a virtual cursor on the target tab shows exactly where the source user is pointing and clicking
  • Session control - start, pause, resume, and stop a mirroring session from the popup
  • Role badges - a floating badge on each tab shows whether it is SOURCE or TARGET
  • Session recording - all events replayed on the target tab are recorded with timestamps
  • Export - download the recorded session as JSON or plain text before or after stopping
  • Standalone Replay Engine - upload previously exported session files to an isolated Replay tab to automatically replay all recorded user actions with full playback controls (play, pause, stop, adjust speed)
  • Smart selector - elements with an id are resolved via #id; all others use a full structural CSS path, keeping replay accurate across DOM changes

The production bundle can be downloaded from releases.

Usage

  1. Click the MirrorTab icon in the Chrome toolbar to open the popup
  2. Enter a Source URL and a Target URL
  3. Click Start Session - two new tabs will open automatically
  4. Interact with the SOURCE tab; every action is mirrored to the TARGET tab in real time
  5. Use Pause / Resume to temporarily suspend mirroring without closing the session
  6. Use Download JSON or Download Text to export the full event log from the target tab at any time
  7. Click Stop to end the session - recorded events are cleared

Replaying a saved session

  1. Click the Replay Page button in the MirrorTab extension popup
  2. Upload your downloaded .json or .txt session log file
  3. Enter the URL of the environment you want to test the replay on
  4. Click Start to spawn the Replay tab and watch the automated execution

Recorded event format

Each entry in the exported session log contains:

Field Description
timestamp ISO 8601 timestamp of when the event was replayed
type Event type: click, input, change, keydown, keyup, scroll, mousemove
selector Compact element identifier: TAG#id#firstClass#attr=val
selectorStackTrace Full CSS structural path used for DOM resolution
content Event-specific payload (coordinates, value, key info, scroll position)

Permissions

Permission Reason
storage Persist the active session and recordings across service worker restarts

Contributing

Bug reports and feature requests are welcome via GitHub Issues.

Please refer to our Contributing Guidelines for details on our code of conduct, development setup, and the process for submitting pull requests to us.

Security

Please review our Security Policy for information on supported versions and details regarding how to responsibly report security vulnerabilities.

License

MIT © Konstantine Datunishvili

About

A chrome extension that allows you to mirror your tab actions

Topics

Resources

License

Contributing

Security policy

Stars

Watchers

Forks

Contributors