Install · Capture · Annotate · Export

# Documentation

How to install and use OpenScreenShot, the open-source screenshot and annotation extension for Chrome.

## Start with your task

- [Capture a full webpage](https://openscreenshot.app/blog/full-page-screenshot-chrome/), [save a screenshot as PDF](https://openscreenshot.app/blog/save-screenshot-as-pdf/), or [redact private information](https://openscreenshot.app/blog/redact-screenshot/).
- [Use the screenshot CLI](https://openscreenshot.app/blog/screenshot-cli/), [connect an MCP client](https://openscreenshot.app/blog/screenshot-mcp-server/), or [capture CI review artifacts](https://openscreenshot.app/blog/screenshots-for-ci/).

The reference below covers the Chrome extension. The Firefox source build supports screenshots and export; tab recording is Chrome-only. See the [Firefox release guide](https://github.com/pghqdev/OpenScreenShot/tree/main/release/firefox) for installation and release status.

## On this page

- [Install](https://openscreenshot.app/docs/#install)
- [Capture a screenshot](https://openscreenshot.app/docs/#capture)
- [Capture modes](https://openscreenshot.app/docs/#modes)
- [After a capture](https://openscreenshot.app/docs/#after-capture)
- [Annotate](https://openscreenshot.app/docs/#annotate)
- [Frame](https://openscreenshot.app/docs/#beautify)
- [Annotate an image you already have](https://openscreenshot.app/docs/#import)
- [Export](https://openscreenshot.app/docs/#export)
- [Record a tab](https://openscreenshot.app/docs/#record)
- [Drafts](https://openscreenshot.app/docs/#drafts)
- [Keyboard shortcuts](https://openscreenshot.app/docs/#shortcuts)
- [Settings](https://openscreenshot.app/docs/#settings)
- [Agents & CLI](https://openscreenshot.app/docs/#agents-cli)
- [Privacy](https://openscreenshot.app/docs/#privacy)
- [Get help](https://openscreenshot.app/docs/#support)

## Install

OpenScreenShot is available on the Chrome Web Store.

1. Open the [OpenScreenShot listing](https://chromewebstore.google.com/detail/hdabbojjccojlapnfjpdppcpfcnhgmdp) in Chrome.
2. Click **Add to Chrome**.
3. Accept the permissions. The extension needs the active tab and permission to run its capture script there.
4. Pin the OpenScreenShot icon to your toolbar. By default, clicking it starts a full-page capture. Right-click the icon for other capture modes and Settings.

## Capture a screenshot

Click the OpenScreenShot icon in your toolbar and the full page capture starts — no menu in the way. Everything runs locally in your browser. There are four ways to start a capture:

- **The toolbar icon** — one click captures the full page. Turn **One-click Express mode** off in settings to get the mode picker popup back; right-click the icon for the other modes and settings.
- **A keyboard shortcut** — `Ctrl+Shift+S` for the full page, `Alt+Shift+V` for the visible area, `Ctrl+Shift+E` for a region. On macOS these are `⌘⇧S`, `⌥⇧V`, and `⌘⇧E`. Capture element has no default key. Set or change any of them at `chrome://extensions/shortcuts`.
- **The right-click menu** — the OpenScreenShot submenu on any page offers the same four modes and Settings.
- **Repeat region** — the popup footer and the right-click menu re-capture the last region rectangle. Both items appear once you have selected a region.

The **Delay** row in the popup holds a capture for 3, 5, or 10 seconds, and the toolbar badge counts down. Use it for hover states, dropdown menus, and tooltips that close the moment you click somewhere else.

## Capture modes

### Full Page

Captures the entire scrolling page and stitches it into one image. The extension scrolls the page viewport by viewport, captures each tile, and composites them together. Fixed headers are captured on the first tile and composited once at the top. Pages that scroll an inner element instead of the window work too. A page taller than one image (32,000 device pixels) is saved as up to six images: Download names each part, and Editor or Clipboard opens each part in its own editor tab.

### Visible Area

Captures the current viewport instantly. No scrolling. Use this for a quick screenshot of what is on screen right now.

### Selected Region

Click and drag to draw a rectangle. Resize handles appear on each edge and corner. Use the arrow keys to nudge the selection by one pixel at a time, or hold `Shift` to move it ten pixels at a time. Press `Enter` to confirm or `Esc` to cancel.

### Element

Hover over the page to select a card, chart, table, image, or other element, then click or press `Enter` to capture exactly its bounds. `↑` selects the parent element, `↓` the child, and `←`/`→` the neighbors. If the element is not fully visible, the picker offers a full-page capture instead.

## After a capture

The **After capture** row in the popup picks what a finished capture does. It applies to every entry point: the popup buttons, the keyboard shortcuts, and the right-click menu.

- **Editor** — open the annotation editor in a new tab. This is the default.
- **Clipboard** — copy the screenshot and skip the editor. Paste it straight into a chat, a document, or an issue.
- **Download** — save the screenshot to your downloads folder and skip the editor. Quick saves are written as PNG.

Clipboard and Download open no tab, so the toolbar badge is the confirmation. A failed capture flashes `!` on the badge. **Reopen last** in the popup footer opens the most recent capture in the editor at any time.

## Annotate

The editor opens in a full tab and loads the most recent capture from local storage. Each tool has a one-letter shortcut.

- **Select** `V` — move, resize, or delete any annotation. Double-click a text layer to re-edit it.
- **Shape** `R` — draw a rectangle, rounded rectangle, oval, or triangle. **Fill** sets none or a solid fill in the stroke color; hold `Shift` for equal sides, so an oval becomes a circle.
- **Arrow** `A` — draw a directional arrow with a filled, open, double, or dot tip. Drag the round middle handle to bend it into a curve.
- **Line** `L` — the arrow without a head.
- **Pen** `P` — freehand drawing.
- **Highlighter** `H` — a translucent freehand stroke.
- **Text** `T` — add a text box, sized by the font-size control.
- **Step number** `S` — numbered badges that count up on their own, and renumber when you delete one.
- **Blur** `B` — hide sensitive content as a soft blur, a coarse mosaic, or an opaque fill. The opaque fill survives recompression.
- **Spotlight** `O` — rectangle, rounded rectangle, or ellipse cut-outs that merge into one dim layer.
- **Eyedropper** `I` — take a color from the capture. It samples what you see, so a color inside a spotlight or on a beautify gradient picks as it looks. The swatch button on the color row opens Chrome’s screen-wide picker for anything outside the canvas.
- **Crop** `C` — trim the image to a selected area.
- **Cut** `X` — mark horizontal bands on a long capture and remove them, with a live preview.

Hold `Shift` while you draw for square shapes and 45° lines and arrows. The style bar carries an 8-color palette on `1`–`8`, a custom color, recent colors, four stroke widths that scale with the capture size, and a font-size control. Your choices are remembered across sessions. Drag tools on the rail to put your favorites first, or move the focused tool with `Alt+↑` / `Alt+↓`. Undo and redo are `Ctrl+Z` / `Ctrl+Shift+Z`, or `⌘Z` / `⌘⇧Z` on macOS.

## Frame

The **Frame** panel in the top bar frames the screenshot for sharing: a **Preset**, plus **Spacing**, **Corners**, and **Shadow** sliders and a **Background** of six gradients, a custom solid color, or transparency. The frame previews live and travels into every export, the clipboard, and PDF.

## Annotate an image you already have

Drop an image file onto the editor stage, or paste one with `Ctrl+V` / `⌘V` outside a text field. The import takes the same seat a capture takes, so every tool, the beautify frame, and every export path keep working, and the top bar reads **Imported**. Importing replaces the canvas, so the editor asks first when there are annotations to lose.

## Export

Click **Save image** in the top bar of the editor, or press `Ctrl+S` / `⌘S`, to open the **Export** dialog. Beside it, **Copy** puts a PNG on the clipboard and **PDF** saves a PDF in one click. In the dialog, choose a format:

- **PNG** — lossless, keeps transparency.
- **JPEG** — smaller files, adjustable quality.
- **WebP** — adjustable quality like JPEG, transparency like PNG.
- **PDF** — export as a single image page, fit to A4/Letter, or split across multiple pages with a 5mm overlap so content is not cut mid-line.

**Scale** exports at 25, 50, 100, or 200 %, or at an exact pixel width. It is hidden for PDF, which sizes to the page instead. A size past Chrome’s canvas limit is refused rather than written as an empty file.

`Ctrl+C` / `⌘C` copies the finished image straight to the clipboard. The export dialog can also save its current settings as your new defaults.

## Record a tab

Tab recording is supported in the Chrome build; the Firefox build currently supports screenshots only. Click **Record** in the popup to open the recording tab beside your page. Once a recording is running, press `Alt+Shift+X` to stop it from any tab. The first time you record, Chrome shows one permission prompt for tab capture.

### Start a recording

The recording tab shows a picture of your page and a live view of your camera. Turn on **Mic**, **Tab audio**, or **Webcam** there; your browser’s own permission prompt appears in that tab. Drag across the picture to record only part of the page, or keep **Whole tab**. Click **Start recording**, and OpenScreenShot switches to your page.

If a recording navigates to a different site, click tracking needs the optional “Record across sites” permission (see [Settings](https://openscreenshot.app/docs/#settings)) to follow it there. Without that permission the toolbar badge turns amber, and zoom and click effects stop for the rest of the video. The video itself keeps recording.

### The recording tab

While you record, the recording tab holds a timer and Pause/Resume, Stop, and Cancel buttons. Nothing is added to the page you record, so no controls appear in the video. Come back to the tab to stop, or press `Alt+Shift+X`. When you stop, the same tab opens the editor.

The webcam joins the export as a round bubble that you place in the editor, and the editor crops the video to the area you picked.

### The editor

Stop opens the recording editor on a timeline of your take. The editor adds a smooth 2x zoom at every click your cursor made — adjust or delete any of those, or add your own manual zoom blocks at 1.5x, 2x, or 3x. Trim the start or end of any segment by dragging its handles. Click ripples mark where you clicked, and the webcam bubble, Beautify frame, and mic/tab-audio volume sliders live in the side panel. Show cursor draws a smooth pointer that follows your recorded cursor path; turn it off in the settings rail.

### Export

Export re-renders the take through canvas, mixing in the tracks and effects you set, and downloads an MP4 file (H.264 and AAC) by default, or WebM from the picker beside the button. MP4 is limited to 4096×2304, so a larger tab is scaled down to fit. Browsers without MP4 recording export WebM only.

## Drafts

Your edits are saved locally as you work. If the editor tab closes or crashes, the next editor tab offers the draft back. Restoring is always a click, so a stale draft never replaces a capture you meant to start fresh. A cropped image gets its own draft, so annotations never restore against the wrong picture.

## Keyboard shortcuts

Press `?` in the editor for the full sheet. Beyond the tool letters above:

- `1`–`8` — set the annotation color.
- `Ctrl+C` / `⌘C` — copy to the clipboard.
- `Ctrl+S` / `⌘S` — export.
- `Backspace` — delete the selected annotation.
- `Esc` — deselect, or cancel a crop.
- `Ctrl` / `⌘` with `+`, `−`, or `0` — zoom in, zoom out, actual size. `F` fits to the screen.
- `Space` + drag — pan the canvas.

`Alt+Shift+X` stops the current recording from anywhere — it does not need the editor or the popup open.

## Settings

Open the gear icon in the popup to set:

- **Theme** — light, dark, or system.
- **Default format** — PNG, JPEG, WebP, or PDF.
- **Quality** — for JPEG, WebP, and PDF.
- **Filename template** — click a token chip to insert `{date}`, `{time}`, `{title}`, `{domain}`, `{w}`, or `{h}`. A live preview shows the result. Add `/` to save into a folder inside Downloads, for example `Screenshots/{title}`.

Settings live in local storage on this device. **Reset to defaults** at the bottom of the panel takes two clicks.

**Record across sites** — off by default. Turning it on requests the optional `<all_urls>` host permission, so click tracking can follow a tab that navigates to a new site mid-recording.

## Agents & CLI

`openscreenshot` is a separate, optional CLI and MCP server. It launches a fresh headless Chrome-compatible browser on your machine; it does not reuse your open tabs, cookies, or signed-in browser profile. Install Node.js, pnpm, and Chrome first. Set `CHROME_PATH` if the browser cannot be found automatically.

```
pnpm dlx openscreenshot shot https://example.com --out shot.png --full
```

As an MCP server, add this to your MCP client config:

```
{ "command": "pnpm", "args": ["dlx", "openscreenshot"] }
```

Then call `capture_screenshot` with `{ "url": "https://example.com" }`. Optional inputs are `fullPage` (default false), `width` (200–3840, default 1280), `height` (200–2160, default 800), and `redact`, which covers CSS `selectors`, text `patterns` (`email`, `phone`, `secret`), and pixel `rects` with black boxes before the screenshot. The tool returns PNG image content to your client. A client using a hosted model may send that image to its provider; use `redact` for data that must not leave the device, and review the client’s data settings.

## Privacy

OpenScreenShot processes everything locally in your browser. Captures are stored in Chrome local storage and are not uploaded to any server. Recordings, cursor logs, and mic/webcam streams stay in IndexedDB on your device until you delete them. The extension has no analytics, no telemetry, and no third-party services.

See the [Privacy Policy](https://openscreenshot.app/privacy/) for the full details.

## Get help

See the [Support & FAQ](https://openscreenshot.app/support/) page for common questions and known limitations. If you need more help, open an issue on [GitHub](https://github.com/pghqdev/OpenScreenShot/issues).

## Install OpenScreenShot

Free, open-source, and private. Available on the Chrome Web Store.

[Add to Chrome](https://chromewebstore.google.com/detail/hdabbojjccojlapnfjpdppcpfcnhgmdp) [Add to Firefox](https://addons.mozilla.org/firefox/addon/openscreenshot/)

---

Canonical page: https://openscreenshot.app/docs/