Skip to content

mwelche/agentation-extension

 
 

Repository files navigation

Agentation Extension

Agentation Extension is a Chrome extension that lets you annotate any web page and copy structured feedback for AI coding agents. Click elements, add notes, and get markdown with selectors, positions, and context — so agents can grep for the exact code you're referring to.

This project is a fork of the original agentation npm package by Benji Taylor, refactored from a React component into a standalone Chrome extension by Mathieu Welche.

Install

  1. Clone the repo and install dependencies:
git clone https://github.com/mwelche/agentation-extension.git
cd agentation-extension
pnpm install
pnpm build
  1. Open chrome://extensions in Chrome
  2. Enable Developer mode (top-right toggle)
  3. Click Load unpacked and select the dist/ folder

Features

  • Click to annotate — Click any element with automatic selector identification
  • Text selection — Select text to annotate specific content
  • Multi-select — Cmd+Shift+click to select multiple elements
  • Structured output — Copy markdown with selectors, positions, and context
  • Dark/light mode — Matches your preference or set manually
  • Shadow DOM isolation — Toolbar styles never leak into or from host pages
  • Works on any page — No code changes required, runs as a Chrome extension
  • Keyboard shortcutCmd+Shift+. to toggle the toolbar

How it works

The extension injects a floating toolbar into every page via a closed Shadow DOM root. When you click an element, it captures class names, selectors, bounding boxes, and nearby context. The output is structured markdown that AI coding agents can use to locate the exact code you're referring to.

Development

pnpm install      # Install dependencies
pnpm build        # Build extension to dist/
pnpm typecheck    # Run TypeScript checks

After building, reload the extension in chrome://extensions to pick up changes.

Architecture

Entry point Description Output
Content script Injects toolbar via closed Shadow DOM dist/content.js + dist/content.css
Background worker Badge updates, keyboard shortcuts dist/background.js
Popup Extension icon click UI dist/popup/

Built with Preact and Vite.

Requirements

  • Chrome or Chromium-based browser
  • Desktop only (mobile not supported)

Credits

Created by Mathieu Welche, forked from agentation by Benji Taylor.

License

© 2026 Benji Taylor

Licensed under PolyForm Shield 1.0.0

About

The visual feedback tool for agents.

Resources

License

Stars

2 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 83.2%
  • SCSS 11.7%
  • CSS 2.5%
  • HTML 2.4%
  • Other 0.2%