Visualize Your Browsing Paths

Each step in your journey displays the site's favicon next to the page title. These visual markers help you quickly scan your journey and identify familiar domains at a glance.

How It Works

• Favicons are fetched automatically when a page is recorded
• If a site doesn't have a favicon, a default icon is shown
• Favicons appear in both the popup and side panel views
• Exported journeys include favicons for offline viewing

Keep your research sessions organized by creating separate journeys. Each journey maintains its own tree, notes, and tags.

Managing Journeys

• Create: Click the dropdown at the top and select "New Journey" to start fresh
• Switch: Use the dropdown to switch between existing journeys
• Rename: Click the pencil icon next to the journey name to give it a descriptive title
• Delete: Remove a journey entirely (with confirmation to prevent accidents)

Journeys are named automatically by date and time. Rename them to something meaningful like "API Documentation Research" or "Bug Investigation #1234".

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

Available Colors

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.

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

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.

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.

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.

Rearrange steps in your journey by dragging them to new positions. Perfect for organizing your research into a logical flow.

How to Reorder

1. Click and hold the node dot (the circle on the left side of any step)
2. Drag the step to your desired position
3. Release to drop it in place

Reordering Rules

• Same depth only: Steps can only be reordered among siblings at the same depth level
• Automatic numbering: Position numbers recalculate automatically after reordering
• Preserves hierarchy: Child branches move with their parent step

This is useful when you want to present your research in a different order than you actually browsed, or when organizing steps for export.

Control how Journey Tracker captures your browsing with three tracking modes, accessible from the side panel settings.

Manual Page Addition

Regardless of your tracking mode, click the + button in the bottom bar to manually add the current page to your journey. This works even while tracking is paused, giving you full control over what gets recorded.

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

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

How It Works

• Extracted fields appear below the step title in your journey tree
• Click the chevron to expand or collapse extracted data
• Collapsed state persists across sessions—your preferences are remembered
• Data is searchable—find steps by extracted field values

Re-extract Data

When viewing a step whose tab is still open, a refresh icon appears. Click it to re-extract the page data—useful when the page content has changed (e.g., a Jira ticket status was updated). The new data replaces the old.

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

Wildcard Patterns

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

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.

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.

Journey Tracker stores all data locally in your browser. Nothing is sent to external servers—your browsing history stays completely private.

Read our full Privacy Policy for complete details.