Skip to content

tin-xai/pageguide

BranchesTags

Repository files navigation

PageGuide

🍊 PageGuide: Browser Extension to Assist Users in Navigating a Webpage and Locating Information

by Tin Nguyen*†1, Thang T. Truong*1, Runtao Zhou*2, Trung Bui, Chirag Agarwal2, Anh Totti Nguyen1

*Equal contribution Β Β  †Project lead
1Auburn University Β Β  2University of Virginia

Project Page Β  arXiv Β  Hugging Face Β  License


Support Chrome Chrome Β Β  Edge Edge

✨ Features

πŸ” Find Β  🎯 Guide Β  πŸ›‘οΈ Hide Β  πŸ’¬ Answer Β  πŸ–ΌοΈ Image Β  πŸ“„ PDF


πŸ” Find β€” Highlight the answer on the page

Have a question about something buried on a long page? PageGuide reads the page and highlights the exact text that answers your question β€” no manual scrolling needed.

How to use:

  1. Open any webpage and click the PageGuide icon in your toolbar to open the side panel.
  2. Make sure the Page toggle is On (the default).
  3. Type your question in plain English, e.g. "What is the return policy?" or "Where is the contact email?"
  4. PageGuide highlights the relevant section on the page and shows you the answer in the panel.

Find demo

🎯 Guide β€” Walk through any task step by step

Not sure how to complete a task on an unfamiliar site? PageGuide overlays live instructions directly on the page, highlighting the exact button or field to interact with at each step.

How to use:

  1. Navigate to the site where you want to complete a task.
  2. Open PageGuide from the toolbar.
  3. Ask a "how to" question, e.g. "How do I change my password?" or "How do I export this spreadsheet as a PDF?"
  4. PageGuide displays step-by-step instructions on the page. Each step highlights the exact element β€” click it, or let PageGuide auto-fill text fields and navigate for you.
  5. Confirm each step at your own pace; PageGuide waits for you and resumes on the next page if navigation is needed.

Guide demo

πŸ›‘οΈ Hide β€” Remove distracting content instantly

Cluttered with ads, cookie banners, or sidebars? Describe what you want gone and PageGuide removes it without refreshing the page.

How to use:

  1. Open any webpage with unwanted content.
  2. Open PageGuide from the toolbar.
  3. Type what you want to remove, e.g. "Hide all ads and the sidebar" or "Remove the cookie banner."
  4. PageGuide detects the matching elements and makes them disappear instantly.

Hide demo

πŸ’¬ Answer β€” Ask general knowledge questions

Need a quick fact that has nothing to do with the current page? Switch PageGuide into general-knowledge mode and ask anything.

How to use:

  1. Open PageGuide from the toolbar.
  2. Toggle Page to Off in the side panel (this tells PageGuide to ignore the current page).
  3. Type any question, e.g. "What is the capital of France?" or "Explain what a p-value means."
  4. PageGuide answers from its AI knowledge base directly in the panel.

πŸ–ΌοΈ Image Asking β€” Search the page with a picture

Have a screenshot or product image and want to find the matching item on the current page? Upload it and ask.

How to use:

  1. Navigate to the page you want to search visually.
  2. Open PageGuide from the toolbar.
  3. Click the πŸ“Ž attachment icon in the chat bar, or paste an image directly with Ctrl/Cmd+V.
  4. Type your question alongside the image, e.g. "Find this product on the page" or "Where is this button?"
  5. PageGuide compares your image against the page and highlights the matching element.

Image demo

πŸ“„ PDF Asking β€” Ask questions about any PDF

Reading a long PDF in the browser? Ask questions and PageGuide finds the relevant passage without you having to read the whole document.

How to use:

  1. Click the πŸ“„ PDF button in the toolbar.

  2. Add your PDF in one of three ways:

    • Drag and drop the PDF file.
    • Click the upload button and select a file.
    • Paste a PDF URL into the input field.

  3. Ask a question about the document, such as:

    • β€œWhat is the main finding?”
    • β€œSummarize Section 3.”

  4. PageGuide reads the PDF and answers your question with cited evidence.

  5. Click the citation to jump to the highlighted passage directly in the PDF viewer.

PDF demo

πŸš€ Quick Start β€” One Click Installation

Get PageGuide up and running in seconds. No configuration needed to start exploring!

Step 1: Install from Chrome Web Store

Click the button below to install PageGuide directly to your browser:

πŸ“₯ Add to Chrome

The extension will automatically download and install. You'll see a confirmation notification in your browser.

Step 2: Pin the Icon to Your Toolbar

Once installed, pin PageGuide to your toolbar for quick access:

Pin the PageGuide icon to your toolbar

How to pin:

  • Look for the puzzle piece icon Chrome in your browser's top-right corner
  • Click it to reveal all installed extensions
  • Find PageGuide and click the pin icon next to it
  • The PageGuide icon will now appear in your main toolbar for easy access

Step 3: Start Using PageGuide

Click the PageGuide icon in your toolbar to open the side panel and begin:

Click the PageGuide icon to start using the extension

You're ready to go! Try one of these:

  • πŸ” Ask a question about the current page, e.g., "What is the return policy?"
  • 🎯 Get step-by-step instructions, e.g., "How do I export this as a PDF?"
  • πŸ›‘οΈ Hide unwanted content, e.g., "Remove all ads and popups"
  • πŸ–ΌοΈ Upload an image to search visually
  • πŸ’¬ Toggle Page: Off to ask general knowledge questions

βš™οΈ First-Time Setup

Before you can start using PageGuide, configure your LLM provider:

  1. Open Settings: Click the βš™οΈ gear icon in the top-right corner of the side panel
  2. Choose a Provider: Select from:
    • Google Gemini (free tier available)
    • OpenAI (requires API key)
    • OpenRouter (aggregates multiple models)
  3. Enter Your API Key: Paste your API key into the field
  4. Test Connection: Click Test & Save Connection to verify your setup
  5. Done! Your configuration is saved and ready to use

πŸ‘‰ Need an API key? Check the provider's website for setup instructions.

πŸ’‘ Pro Tips

  • Pin to quick access: Keep the extension icon pinned in your toolbar (see Step 2)
  • Keyboard shortcut: You can set a custom keyboard shortcut in chrome://extensions/shortcuts
  • Privacy: Your API key is stored only in your browser and never shared with us

πŸ› οΈ Manual Installation

Developer Mode (for testing)

  1. Download
  1. Install
  • Open Chrome and go to chrome://extensions/
  • Enable Developer mode (toggle in top right)
  • Click Load unpacked

    Load unpacked

  • Select the pageguide folder from the downloaded and unpacked zip file

    Select the pageguide folder

  • Click Extension icon

    Click Extension icon

  • Pin the extension icon to your toolbar

    Pin the extension icon

  • Use the extension by clicking the icon in the toolbar

    Use the extension

  1. Upgrading
  • Download the latest zip file
  • Unzip and replace the existing pageguide folder.
  • Reload the extension in chrome://extensions/ by clicking the reload button on the extension card.

🌐 Browser Support

  • Chrome Chrome - Full support with all features
  • Edge Edge - Full support with all features

Not Supported:

  • Firefox, Safari.

βš™οΈ Configuration

  1. Click the extension icon to open the side panel
  2. Click the βš™οΈ Settings (gear icon) at the top right corner of the side panel
  3. Choose your LLM provider and enter your API key (support Gemini, OpenRouter, and OpenAI providers)
  4. Click Test & Save Connection to validate your key
  5. Optionally configure:
    • Vision (Screenshot) β€” enable/disable visual analysis (default: on)
    • Show Element Indices (SoM) β€” display numbered badges on page elements (default: off)

πŸ’‘ Use Case

Quick Reference

What you want What to type
Find info on page What is the return policy?
Step-by-step task How do I change my password?
Hide distractions Hide all ads and sidebars
General knowledge (toggle Page: Off) What is the capital of France?
Search by image (upload image via πŸ“Ž) Find this product on the page
Ask about a PDF (open PDF) Summarize section 3

πŸ“Š Research & Dataset

PageGuide was evaluated in a controlled within-subjects user study. All data and task stimuli are publicly available on HuggingFace.

User Study

Property Value
Design Counterbalanced within-subjects
Participants ~47
Conditions extension (PageGuide active) vs. control (no extension)
Task types find Β· guide Β· hide
Metrics Completion time, answer correctness, 7-point Likert survey

Each participant completed all three task types in both conditions. Condition order was counterbalanced to control for learning effects.

Results summary

Task n Control (s) Extension (s) Ξ” (s) p (Wilcoxon)
find 86 81.1 70.8 βˆ’10.3 0.094
guide 85 76.2 109.3 +33.1 < 0.001 ✱
hide 82 80.3 45.2 βˆ’35.1 < 0.001 ✱

✱ Statistically significant at α = 0.05.

Post-study survey (7-point Likert, n β‰ˆ 47)

Task Difficulty without PageGuide Ease with PageGuide Accuracy with PageGuide
Find 4.4 / 7 5.7 / 7 6.0 / 7
Guide 4.8 / 7 5.6 / 7 5.5 / 7
Hide 5.5 / 7 5.9 / 7 β€”

Datasets

pageguide_userstudy

  • Purpose: Raw interaction logs from the user study β€” completion times, chat transcripts, correctness labels, paired statistical results, and post-study survey responses.
  • Used in: Section 5 (User Study / Evaluation)
  • Download: πŸ€— ttn0011/pageguide_userstudy
from datasets import load_dataset
tasks  = load_dataset("ttn0011/pageguide_userstudy", data_files="tasks.csv", split="train").to_pandas()
paired = load_dataset("ttn0011/pageguide_userstudy", data_files="paired_times.csv", split="train").to_pandas()

pageguide_find_data

  • Purpose: Task stimuli for the Find condition β€” 10 real webpages (NASA, Wikipedia, Cleveland Clinic, WWF, Britannica, JMLR) each annotated with up to 2 factual questions, ground-truth answers, and supporting evidence spans.
  • Used in: Section 5.1 (Find Task Setup)
  • Download: πŸ€— ttn0011/pageguide_find_data
find_tasks = load_dataset("ttn0011/pageguide_find_data", split="train").to_pandas()

pageguide_guide_data

  • Purpose: Task stimuli for the Guide condition β€” 7 procedural tasks across 6 platforms (Google Sheets, Google Docs, Google Slides, Coda, TradingView, Scratch), labelled Easy or Medium difficulty.
  • Used in: Section 5.2 (Guide Task Setup)
  • Download: πŸ€— ttn0011/pageguide_guide_data
guide_tasks = load_dataset("ttn0011/pageguide_guide_data", split="train").to_pandas()

pageguide_hide_data

  • Purpose: Task stimuli for the Hide condition β€” 37 annotated webpage snapshots (Amazon, Netflix, TechCrunch, Allrecipes, Spotify, Yelp, and more) with (user_goal, hide_query, difficulty, hidden_elements) annotations and ground-truth CSS selectors. HTML snapshots available on Google Drive.
  • Used in: Section 5.3 (Hide Task Setup)
  • Download: πŸ€— ttn0011/pageguide_hide_data
hide_tasks = load_dataset("ttn0011/pageguide_hide_data", split="train").to_pandas()

🀝 Contributing

Contributions are welcome! To get started:

  1. Fork the repository and create a feature branch (git checkout -b feat/your-feature)
  2. Make your changes β€” keep PRs small and focused on a single concern
  3. Ensure all tests pass: npm run ci
  4. Submit a pull request with a clear description of what and why

Please follow the rules in CLAUDE.md and open an issue first for larger changes so we can align on the approach.

πŸ§ͺ End-to-End Tests

We use Playwright to run end-to-end (E2E) tests, integrated with automated continuous integration (CI) via GitHub Actions. The CI pipeline runs whenever a commit is pushed to the main branch or a pull request targeting main is opened or updated, invoking npm run ci to execute the full test suite. The E2E tests verify that the extension loads correctly, its UI pages render and respond to user actions, content scripts behave on real-world pages, and common edge cases do not cause failures.

To run the tests locally, use the following command:

npm run ci

πŸ™ Acknowledgements

PageGuide is built on top of some great open-source tools and APIs:

⭐ Star this repo if you find PageGuide helpful!

If PageGuide saves you time or makes your browsing better, consider giving it a star β€” it helps others discover the project.

About

Explainable Web Agent - Safe, Fun, Efficient

Topics

safety grounding web-agent explainable-web-agent

Resources

Readme
Activity

Stars

11 stars

Watchers

3 watching

Forks

4 forks
Report repository

Releases 1

v1.0.0 Latest
May 18, 2026

Packages

 
 
 

Contributors

Languages