T3rnel Browser

Copy CSS as real components, capture full pages, inspect React, and let your AI drive the browser you are already signed into.

102 DEVELOPER TOOLS IN ONE PANEL — AND AN AI THAT CAN USE THEM ON THE BROWSER YOU ARE ALREADY SIGNED INTO. Hover an element and copy its CSS as a styled-components block, an Emotion block, a CSS Modules class, SCSS, Less, Tailwind classes, or a JSX style object — with the units the author actually wrote, not pixels the Computed pane flattened them into. Capture a whole page in one image with sticky headers pinned once and cookie banners dismissed. Read a .md file as a typeset document. Walk a React component tree and see its props and hooks. Sample any pixel on screen and get back a ready --custom-property. Then hand the same 102 tools to your AI assistant over the Model Context Protocol. Not a fresh headless browser with no cookies — the one you are signed into right now, with your session, your extensions and your real fingerprint. Your agent can read a page behind a login, fill a form with values you specify, and audit a route that only exists after authentication, without a single cookie leaving your machine. A model given a browser is a model given your logged-in life, so there is a valve on it: high-risk actions stop and ask, passwords never reach the model, page text is marked as untrusted data, and every tool call is written to a local audit log you own. The section on agent control below says exactly how. No account. No cloud. No telemetry. Your pages, your styles, your screenshots and your sessions never leave your device. The CSS inspector, full-page capture, the Markdown viewer, network and console capture, the accessibility audit and the base MCP tool set are free and stay free — not a trial, no expiry, no account. Pro is $29.99 once for three machines: the annotation suite, every export format, test-code export, the React inspector, the encrypted vault, DOM compression and the agent firewall. Full split at the end. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ INSTANT CSS INSPECTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Stop digging through the Styles pane. Hover any element and see its real, clean CSS immediately, then click once to copy the whole rule set. • Captures pseudo-classes and pseudo-elements, media queries, @keyframes and custom properties, so what you paste still behaves • Copies child elements too, so you can lift a whole component • Preserves authored units — %, em, rem and vh stay as written instead of being flattened to pixels • Shorthand-optimised, with overridden and duplicate declarations stripped • Arrow keys walk the DOM to parents, siblings and children; Space pins the panel so you can edit a value and watch the page update • Reports honestly when a cross-origin stylesheet cannot be read, instead of returning partial CSS as though it were complete COPY AS WHATEVER YOU ACTUALLY WRITE IN Every format below carries the same declarations, so none can disagree with the CSS: • Plain CSS • Tailwind utility classes • styled-components — a template literal for the tag the element really is, so styled.button on a button, never styled.div • Emotion — a css block named after the element • CSS Modules — a local class, with the .module.css filename it belongs in • SCSS and Less — the selector with its declarations nested • React JSX — a style object with the camelCase property names React expects • Full HTML plus CSS as a self-contained component UNUSED CSS Find selectors on the page that match nothing, with a clear count of what could not be examined because the browser does not permit reading a cross-origin stylesheet. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FULL-PAGE SCREENSHOTS THAT ACTUALLY WORK ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ One click captures the entire page, top to bottom, stitched into a single seamless image. The engine handles the real web, not the ideal one: fixed and sticky headers are pinned so they appear once rather than repeating down the image, lazy-loaded and infinite-scroll content is triggered first, animations and transitions are frozen, cookie banners and overlay modals are dismissed with an undo if it hid something you wanted, scrollbars are hidden, and the capture is at native Retina resolution. Your scroll position is restored afterwards, including when a capture fails. ANNOTATE WITHOUT LEAVING THE BROWSER • Freehand drawing • Text callouts and labels • Rectangles and ellipses • Arrows • Blur tool for redacting emails, names and tokens before you share • Customisable colours and stroke widths • Full undo and redo EXPORT • PNG for lossless documentation and design handoff • JPG with adjustable quality • WebP for modern compression • PDF, automatically paginating very tall captures Filenames are generated from the site and timestamp. CAPTURE HISTORY Every screenshot is saved locally with page title, domain, dimensions and capture time, searchable, re-exportable in any format, with configurable retention. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MARKDOWN VIEWER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Open any .md file and read it as a typeset document instead of a wall of asterisks. • GitHub Flavored Markdown: tables, task lists, footnotes, strikethrough • Syntax highlighting with one-click copy on every code block • Mermaid diagrams rendered inline • Math rendering for inline and block LaTeX • Auto-generated, sticky table of contents • Light, dark and sepia themes that follow your system preference • Reading-width and type-size controls • Export the rendered document to PDF or HTML • Side-by-side diff between two Markdown files • Render Markdown straight from your clipboard — ideal for reading AI assistant output • Strict sanitisation. Markdown is untrusted input, and a viewer with a scripting hole inside an extension is a serious problem, so scripts, event handlers and javascript: URLs are removed rather than escaped and hoped over. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DEBUGGING AND PAGE ANALYSIS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ NETWORK AND CONSOLE • Capture every request with headers, timing, status and payload size • Filter by URL pattern, method, status class or resource type • Console capture across log, warn, error and info levels with stack traces PAGE AUDITOR • Accessibility review — missing alt text, heading hierarchy, unlabelled form controls, ARIA misuse • Link checking that distinguishes three real outcomes: reachable, verifiably broken, and answered-but-unreadable. A browser cannot read the status of a cross-origin response, and reporting a guess as a fact would make the whole report untrustworthy. • Spell checking • Page metrics and performance timing where the browser exposes it VISUAL REGRESSION TESTING • Capture screenshot baselines per page and viewport • Pixel comparison with configurable threshold • Changed regions highlighted on the image LIVE SHADOW TESTING • Clone a DOM subtree into an isolated overlay and compare variants side by side on the live page, non-destructively ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RECORD, REPLAY AND EXPORT REAL TEST CODE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Click through a flow once. Get a maintainable test out the other end. • Records clicks, scrolls, keystrokes, form fills and navigation • Generates multiple candidate selectors per element and ranks them by fragility, preferring data-testid and ARIA roles over brittle nth-child chains • Warns inline when a step depends on a fragile selector • Replay with adjustable speed • Export to Playwright, Puppeteer, Cypress or Selenium • Generated code waits on conditions rather than sleeping for a guessed number of milliseconds • The exported code runs standalone. It has no dependency on this extension, so you pay once for the recorder and run the tests in your own CI forever. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ AI AGENT CONTROL, WITH A HUMAN AT THE WHEEL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ T3rnel exposes 102 tools over the Model Context Protocol. Connect any MCP-compatible client and let it drive the browser you are already signed into — your real profile, your real sessions, no separate automation browser and no re-authenticating. WHAT MAKES THIS SAFE ENOUGH TO ACTUALLY USE • Approval gate — high-risk actions stop and ask. The agent receives a refusal naming the exact action it wanted to take, and nothing happens until you approve it. An approval covers one action, not every future one. • Sensitive value redaction — password fields and token-like values are removed before any snapshot, page read or DOM dump reaches the model. The length is still reported, so an agent can confirm a field was filled without ever seeing what is in it. • Prompt-injection flagging — page text is scanned for instruction-override patterns and marked as untrusted data. This raises the bar; it does not settle the problem, and the extension reports how much text it actually examined so a clean result is never confused with an unexamined one. • Origin allowlists and blocklists, and destructive-pattern blocking • Local audit log of every tool call TOKEN ECONOMICS Agent runs get expensive because page snapshots are enormous: • Semantic compression turns the DOM into a clean tree, dropping tracking scripts, hidden nodes and redundant wrappers • Delta snapshots send only what changed since the previous tool call • Live token estimate and per-run cost meter • Snapshots are bounded, so one enormous page cannot exhaust a context window by itself TIME-TRAVEL DEBUGGING When an agent run goes wrong at step 42, scrub back to step 41. The timeline holds a structural snapshot of every step: DOM state, console output, network activity, the exact tool arguments the model sent and what came back. Export the whole run as a single shareable bundle for a bug report. ENCRYPTED IDENTITY VAULT Store per-site credentials encrypted on your device with AES-256-GCM and a key derived from your master passphrase. The plaintext is never written to storage, and a wrong passphrase fails cleanly rather than returning garbage. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ REACT INSPECTOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Detects React from the renderer's own markers, and says no on a page without React instead of fabricating a tree • Walks the real component tree with names, keys and dot-separated paths • Reads a component's own props and hook state, at the depth you ask for, including class state • Surfaces the source position and the DOM element the component rendered • Highlights that element on the page, sized from its real box, then removes the overlay • Works alongside the CSS inspector: select a component, then inspect its styles without losing your place ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FORM FILLER THAT TAKES YOUR VALUES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Most form fillers only produce nonsense. This one does both. • Name a field by its name, its id, or a CSS selector, and it enters exactly the value you gave. That is what lets an agent sign in, run a search, or complete a checkout — not just make a form look populated for a screenshot • Selects match on the option's value or its visible text. Checkboxes can be cleared as well as ticked. A radio group picks the option you named • Everything you do not name gets plausible seeded data that matches the field type, and the same seed refills a form identically — so a test is repeatable • Tells you which of your values matched no field, instead of reporting a filled form that is quietly missing the one value that mattered • Writes through the native setter with real input events, so React, Vue and Svelte controlled components keep what was typed • Leaves an existing value alone unless you named that field or asked for overwrite ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ COLOUR PICKER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Sample the rendered pixel at any coordinate — the colour a person actually sees, through overlays, gradients and images • Copy it as hex, rgb(), hsl(), or a ready --custom-property declaration you can paste straight into :root • Build a palette from every colour on the page, with a selector for one element that uses each • Keeps a history across sessions so a palette stays to hand • Refuses when the tab capture returns no image, rather than inventing a colour ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CACHE AND SITE DATA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Hard-reload with the cache bypassed, without opening DevTools • Clear cache, cookies, localStorage, IndexedDB, service workers and cache storage — for this origin or browser-wide • For when a stale asset, a sticky service worker or a cached 301 is making the page behave differently from reality • Fails loudly if the browser refuses the optional permission, rather than reporting a clear that never happened ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PAYMENT AND MCP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Pro is $29.99 once, for three machines. Paid through PayNow: Visa, Mastercard, ZimSwitch, EcoCash, OneMoney, Telecash, InnBucks or O'mari. Verified offline after activation, so it keeps working with no connection. • The MCP Session Bridge is free and open source: npm install -g @t3ratech/mcp-session-bridge, then mcp-session-bridge --install. Any client that speaks the Model Context Protocol connects. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRIVACY: NOT A FEATURE, AN ARCHITECTURE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • The inspection and automation features transmit nothing to T3rnel servers • No analytics, no telemetry, no tracking, no fingerprinting • No account and no sign-in to use the free tier • Screenshots, baselines, recordings, vault entries and settings are stored locally in your browser • All image processing and analysis happens on your device • Works fully offline • The only outbound calls are: an LLM or transcription endpoint you configure with your own key, link checking when you run it, and a one-time licence activation if you buy Pro PERMISSIONS T3rnel requests the minimum at install. Everything else is requested the moment you first use the feature that needs it, with an explanation of why, and you can decline and keep using everything else. Requested at install: activeTab, alarms, debugger, downloads, nativeMessaging, scripting, sidePanel, storage, tabs Requested on first use only: site access, browsingData, history, bookmarks ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WORKS WHERE YOU WORK ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Chrome, Brave and Chromium install from this listing. Edge, Opera, Firefox and Safari have their own builds from the same source. Where a browser lacks an API the listing says so rather than letting you find out: Firefox has no debugger API, so network capture, console capture and PDF export are unavailable there, and Opera has no side-panel API, so the popup is the surface it reaches. The interface is available in 24 languages. Free is not a trial and does not expire: hover CSS inspection and copy, full-page capture with PNG export, the Markdown viewer, network and console capture, the accessibility audit, link and spell checking, cache tools, and the base MCP tool set with credential redaction. Pro adds the annotation and crop suite, every export format, test-code export, the React inspector, the form filler, the colour tools, the encrypted vault, DOM compression and delta snapshots, the security firewall, live shadow testing and time-travel debugging. Documentation, changelog and support: https://t3ratech.github.io/t3rnel-browser-plugin/