Skip to content

Latest commit

 

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Contexxt

icon
Contexxt
In-browser media inspector, converter, and offline OCR.

Preview

Overview

Contexxt inspects images, video, audio, and computed styles directly on web pages through a right-click overlay. It also includes an offline workbench that converts image formats, transcodes video, trims audio clips, and runs OCR locally in your browser with WebAssembly.

Features

In-page inspector

  • Shows natural and rendered dimensions, MIME types, and download size estimates from HTTP headers before you save an asset.
  • Finds sources inside <picture> elements, srcset variants, video posters, and CSS background images.
  • Displays computed typography and styles, including font family, weight, rendered size, CSS classes, and color swatches that copy hex codes on click.
  • Downloads assets directly or opens source URLs in a new tab. Holding Ctrl (or Cmd) while clicking an element opens its source immediately.
  • Sends page assets directly into workbench tools.

Media workbench

  • Converts images between WebP, PNG, JPEG, and AVIF, compresses PNGs with OxiPNG, and rasterizes SVGs up to 4x. Crop, resize, rotate, flip, and matte background fills are supported.
  • Transcodes video and audio to MP4 or WebM with custom dimensions and cropping through MediaBunny. Includes timeline sliders to trim clips, strip audio, export sound to MP3, AAC, FLAC, or WAV, and save video frames as PNG or JPEG images.
  • Extracts text from images, cropped regions, and video frames using bundled Tesseract.js English models, with export to plain text or TSV tables.
  • Queues multiple images for batch conversion and resizing. The "Use as new input" button routes output from one tool into another, such as sending a captured video frame directly into OCR.

How to use

  1. Right-click an element on any web page and select "Inspect with Contexxt".
  2. Use the overlay to review dimensions and styles, download the asset, or send it to the workbench.
  3. To work with local files, open the workbench from the extension popup and drop files into the window.

Installation

  1. Clone this repository.
  2. Install dependencies: bun install.
  3. Run tests: bun test.
  4. Build the extension:
    • Chrome / Edge: bun run build
    • Firefox: bun run build:firefox
  5. Load the unpacked extension folder (.output/chrome-mv3 or .output/firefox-mv2) from your browser's extension management page with Developer Mode enabled.

Privacy and permissions

Contexxt runs media operations locally in the browser and does not collect telemetry or transmit file data.

  • activeTab and scripting: Displays the inspector overlay on the active tab when chosen from the context menu.
  • contextMenus: Adds the "Inspect with Contexxt" context menu item.
  • downloads: Saves converted media and exported text files to disk.
  • storage: Stores local preferences such as overlay settings and keyboard shortcuts.
  • optional_host_permissions: Requested only when importing a cross-origin asset that requires explicit host permission to fetch.

See PRIVACY.md and THIRD_PARTY_LICENSES.md for details.

License

This project is licensed under the GPLv3 License. See LICENSE.txt for details.

Copyright © 2026 Jonas Fröller

About

Get contexxt of media and HTML elements on the page.

Topics

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages