Media
5 items
Description
Inspect CSS, capture full-page screenshots, read Markdown, and drive any page from your AI coding assistant. All local. EVERYTHING YOU NEED TO INSPECT, CAPTURE AND AUTOMATE A WEB PAGE — IN ONE EXTENSION, RUNNING ENTIRELY ON YOUR MACHINE. T3rnel Browser is a complete web development toolkit. Inspect and copy CSS from any element. Capture pixel-perfect full-page screenshots with built-in annotation. Read Markdown files as properly formatted documents. Watch network requests and console output. And when you want to hand the wheel to an AI coding assistant, expose the whole thing over the Model Context Protocol so your agent can drive the exact browser you are already signed into. No account. No cloud. No telemetry. Your pages, your styles, your screenshots and your sessions never leave your device. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ INSTANT CSS INSPECTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Stop digging through the Styles pane. Hover any element and see its real, clean CSS immediately. • Hover to inspect — the full rule set appears in a floating panel • One click copies the entire rule set to your clipboard • Captures pseudo-classes and pseudo-elements: :hover, :focus, :active, ::before, ::after, ::placeholder • Captures media queries so copied styles stay responsive • Captures @keyframes animations and CSS custom properties • 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 output with overridden and duplicate declarations stripped • Navigate the DOM tree with arrow keys to reach parents, siblings and children • Press Space to pin the panel, then edit any value and watch the page update live • Shift pauses scanning, Escape exits • 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 • Plain CSS • Tailwind utility classes • styled-components template literal • CSS Modules • Emotion, SCSS, Less • React JSX with inline styles • 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 capture engine handles the real web, not the ideal one: • Pins fixed and sticky headers so they appear once, not repeated down the image • Pre-scrolls to trigger lazy-loaded images and infinite-scroll content • Disables CSS animations and transitions during capture for clean, stable frames • Dismisses cookie banners and overlay modals, with an undo if it hid something you wanted • Hides scrollbars • Captures at native Retina and HiDPI resolution • Rate-limited viewport capture that stays inside Chrome's API limits • Restores your scroll position 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 CROP WITH PRECISION • Free-form drag selection • Preset ratios: 1:1, 4:3, 3:2, 16:9 • Rule-of-thirds overlay • Live pixel dimensions • Toggle between original and cropped at any time 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 in a browsable grid with page title, domain, dimensions and capture time. Add searchable notes. Re-export in any format. Bulk select and download. Configurable retention with automatic pruning. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 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-destructive, with instant teardown ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 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 85 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. T3rnel cuts that at the source: • 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. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VOICE CONTROL (OPTIONAL) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Hold a hotkey and speak. Voice commands map to the same inspection and automation tools available everywhere else. The microphone is off by default and push-to-talk unless you explicitly enable wake-word mode. Recognition runs on your device through the browser's own speech engine and transmits nothing. Audio only leaves your machine if you deliberately choose cloud transcription and supply your own key, and the extension refuses to enter that mode without one. Every voice command that would modify a page goes through the same approval gate as an agent action, so nothing destructive happens on a misheard word. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 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, scripting, sidePanel, storage, tabs Requested on first use only: debugger (network, console, PDF and trusted input), site access, history, bookmarks, downloads, microphone ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WORKS WHERE YOU WORK ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Chrome, Brave, Edge, Opera and Chromium from one codebase. Firefox available separately. Any MCP-compatible assistant can connect. Free includes the full inspection and automation core. Pro unlocks unlimited history, code export, the annotation suite, the encrypted vault, DOM compression, the security firewall, live shadow testing, time-travel debugging and voice control. One-time purchase, three activations, licensed forever. Documentation, changelog and support: https://t3ratech.github.io/t3rnel-browser-plugin/