Chrome Extension

Visualize Your Browsing Paths

Journey Tracker captures your research sessions as interactive branching trees. See how tabs spawn new tabs, tag important findings with colors, add notes, extract page data, and export everything as a shareable HTML file.

Install from Chrome Web Store Learn More
Chrome Extension Manifest V3 Stimulus Tailwind CSS

Tree visualization screenshot coming soon

Everything You Need to Track Research

Tree Visualization

See your browsing journey as an interactive branching tree. Main paths flow vertically while new tabs branch horizontally, showing exactly how your research evolved.

Color Tagging

Mark important steps with 6 colors: red, orange, yellow, green, blue, or purple. Tagged steps stand out in the tree and carry their colors into exports.

Notes & Markdown

Add rich notes to any step using Markdown. Support for bold, italic, code, links, lists, and blockquotes. Notes appear inline and export with your journey.

Time Tracking

Every step records its timestamp. See total journey duration, pause tracking during breaks, and resume when you're ready. Multi-day journeys supported.

Content Extraction

Automatically extract structured data from pages using CSS selectors. Configure custom extractors for Jira tickets, GitHub issues, or any site you research.

HTML Export

Export your entire journey as a standalone HTML file. Includes the full tree, all notes, colors, extracted data, and clickable links. No dependencies required.

Getting Started

1

Install the Extension

Visit the Chrome Web Store and click "Add to Chrome". The Journey Tracker icon will appear in your toolbar.

2

Start Browsing

Journey Tracker automatically records your navigation. Open links in new tabs (Ctrl+Click or right-click) to create branches in your journey tree.

3

View Your Journey

Click the toolbar icon for a quick popup view, or right-click and select "Open in side panel" for a persistent view while you browse.

4

Tag, Note, and Export

Hover over any step to add color tags or notes. When you're done, click Export to save your journey as a standalone HTML file.

User Manual

Deep dive into every feature of Journey Tracker.

Tree Navigation

Your journey displays as a branching tree where each step represents a page visit. The main path flows vertically, and new tabs branch horizontally to the right.

Viewing Modes

  • Popup: Click the toolbar icon for a quick, compact view of your journey.
  • Side Panel: Right-click the icon and choose "Open in side panel" for a persistent view that stays open while you browse.

Click Behaviors

  • Click a step: Switch to that tab. If the tab was closed, it reopens in a new tab.
  • Ctrl/Cmd+Click: Always open the step in a new tab, even if it's already open.

Tab Rehydration

After restarting your browser, Journey Tracker remembers your journey. When you click a step, it searches your open tabs by URL and reconnects automatically. If the tab isn't open, it opens fresh.

Tree navigation screenshot

Color Tagging

Mark important steps with colors to highlight key findings, categorize pages, or create visual landmarks in your journey.

Available Colors

Red Orange Yellow Green Blue Purple

How to Tag

  1. Hover over any step in the tree
  2. Click the tag icon that appears
  3. Select a color from the picker
  4. Click the same color again to remove it

Tags persist across sessions and are included when you export your journey.

Color tagging screenshot

Notes & Markdown

Add rich notes to any step using Markdown formatting. Notes appear inline in the tree and are included in exports.

How to Add Notes

  1. Hover over any step in the tree
  2. Click the pencil icon that appears
  3. Type your note using Markdown
  4. Press Ctrl+Enter or click outside to save

Supported Markdown

**bold** → bold

*italic* → italic

`code` → code

[link](url) → clickable link

- item → bullet list

1. item → numbered list

> quote → blockquote

Notes editor screenshot

Search & Filtering

Use the search box at the top of the popup or side panel to filter your journey in real-time.

What Gets Searched

  • Page URLs: The full URL of each visited page
  • Page titles: The title shown in the browser tab
  • Extracted data: Any data pulled by content extractors

Search is case-insensitive. Only matching steps are shown, but the tree structure is preserved to maintain context.

Time & Duration Tracking

Every step records its timestamp. The stats bar shows your total journey duration, which updates in real-time.

Timestamps

  • Short format shows time only (e.g., "2:34 PM")
  • Hover over the timestamp for the full date and time
  • Useful for multi-day research sessions

Pause & Resume

Click the pause button in the bottom bar to stop tracking. The timer freezes and unrelated browsing won't be recorded. Click again to resume from where you left off.

Stats Bar

The stats bar displays step count, unique domain count, and total duration. Toggle visibility in the side panel settings if you prefer a cleaner view.

Removing Steps

Made a wrong turn? Remove unwanted steps from your journey to keep it clean and focused.

How to Remove

  1. Hover over the step you want to remove
  2. Click the X icon on the far right
  3. The step is immediately removed and stats update

Note: Removing a step doesn't affect its child branches. Children become orphaned and appear at the root level.

Domain Filtering

Control which sites Journey Tracker records with two tracking modes, accessible from the side panel settings.

Track All (Default)

Records every page you visit. Content extraction rules still apply to matching pages, but all navigation is tracked.

Allowlist Only

Only records pages matching your configured domain rules. Perfect for focused research sessions where you only care about specific sites.

Switch modes anytime from the settings panel. Your existing journey data is preserved when switching.

Settings panel screenshot

Content Extraction

Automatically extract structured data from pages using CSS selectors. Configure custom extractors for any site you research regularly.

JSON Configuration Schema

Extractors are defined as JSON objects. Access the editor from the side panel settings under "Domain Rules" → "Edit Rules JSON". 

{
  "id": "unique-identifier",
  "name": "Display Name",
  "domain": "*.example.com",
  "pathPattern": "/path/*",
  "extract": true,
  "fields": [
    { "label": "Field Name", "selector": "CSS selector" }
  ]
}

Schema Reference

Field Type Required Description
id string Yes Unique identifier for this extractor
name string Yes Display name shown in the extension settings
domain string Yes Domain pattern. Supports * wildcard (e.g., *.atlassian.net)
pathPattern string Yes URL path pattern. Supports * wildcard (e.g., /browse/*)
extract boolean No Enable/disable extraction. Defaults to true if fields are defined
fields array Yes Array of field definitions to extract
fields[].label string Yes Display label for the extracted field
fields[].selector string Yes CSS selector to target the element. Uses document.querySelector()

Wildcard Patterns

Both domain and pathPattern support the * wildcard, which matches any characters.

Domain Examples
  • *.atlassian.net matches mycompany.atlassian.net, test.atlassian.net
  • github.com matches exactly github.com
  • portal*.example.com matches portal-us.example.com, portal2.example.com
Path Examples
  • /browse/* matches /browse/TICKET-123, /browse/PROJ-456
  • /*/issues/* matches /owner/repo/issues/123
  • /* or * matches any path

Example Extractors

GitHub Issues

{
  "id": "github-issues",
  "name": "GitHub Issues",
  "domain": "github.com",
  "pathPattern": "/*/issues/*",
  "extract": true,
  "fields": [
    { "label": "Title", "selector": ".js-issue-title" },
    { "label": "Author", "selector": ".author" },
    { "label": "State", "selector": ".State" }
  ]
}

Jira Tickets

{
  "id": "jira-ticket",
  "name": "Jira Ticket",
  "domain": "*.atlassian.net",
  "pathPattern": "/browse/*",
  "extract": true,
  "fields": [
    { "label": "Status", "selector": "[data-testid='issue.views.issue-base.foundation.status.status-field-wrapper']" },
    { "label": "Assignee", "selector": "[data-testid='issue.views.field.user.assignee']" },
    { "label": "Priority", "selector": "[data-testid='issue.views.field.priority']" }
  ]
}

Amazon Products

{
  "id": "amazon-products",
  "name": "Amazon Products",
  "domain": "*.amazon.com",
  "pathPattern": "/*/dp/*",
  "extract": true,
  "fields": [
    { "label": "Product", "selector": "#productTitle" },
    { "label": "Price", "selector": ".a-price-whole" },
    { "label": "Rating", "selector": "#acrPopover" }
  ]
}

Finding CSS Selectors

  1. Open Chrome DevTools (F12 or right-click → Inspect)
  2. Use the element selector tool (cursor icon) to click on the data you want
  3. In the Elements panel, right-click the highlighted element
  4. Choose "Copy" → "Copy selector" for a CSS selector
  5. Alternatively, look for unique id, class, or data-* attributes

Tip: Prefer data-testid or id attributes over class names, as they're less likely to change.

Extracted data display screenshot

Export Your Journey

Export your entire journey as a standalone HTML file that opens in any browser. No external dependencies, no internet required.

What's Included

  • Complete tree visualization with all branches
  • All notes rendered with Markdown formatting
  • Color tags displayed on tagged steps
  • Extracted data from content extractors
  • Timestamps for every step
  • Journey duration and statistics
  • Clickable links to original pages (open in new tab)
  • Self-contained CSS styling

How to Export

  1. Open the popup or side panel
  2. Click the Export button in the bottom action bar
  3. Choose where to save the HTML file
  4. File is named journey-YYYY-MM-DD.html

Exports are perfect for sharing research with colleagues, archiving investigations, or reviewing your browsing patterns later.

Exported file screenshot

Ready to Track?

Start Mapping Your Research

Install Journey Tracker and never lose track of your browsing again. Free and open source.

Install from Chrome Web Store

Privacy Policy