Screenshots

This page covers taking screenshots with Screen Tools, annotating them in the editor, exporting them, and the limits on what Screen Tools can capture. For how capture and stitching work inside the extension, see Screenshot Pipeline.

Taking a screenshot

Click the Screen Tools toolbar icon on the tab you want to capture, then pick one of the actions under Screenshot:

Action	What it captures
Capture selected area	A rectangle you drag out on the page.
Capture visible area	What's on screen in the tab.
Capture full page	The whole page, from top to bottom, by scrolling and stitching.

Each screenshot opens in the editor in a new tab next to the page you captured.

Selected area dims the page and shows "Drag to select an area · Esc to cancel". The size of the selection shows in pixels as you drag. A click or a drag under 5 px starts over, and Escape cancels without taking a screenshot.

Full page scrolls the page one screen at a time and captures each step. The toolbar badge shows progress, such as 3/8. From the second step on, it hides fixed and sticky elements so headers don't repeat down the image. When it's done, it puts those elements back and scrolls the page to where you were. Chrome allows two captures a second, so a long page takes a while. Firefox has no such limit, but Screen Tools waits the same gap there. The code is captureFullPage in screenshot.ts.

Resolution

Screenshots keep every pixel the screen shows by default. On a high-density display, such as a Retina screen, that's twice the page's CSS size in each direction. To cap the width, set Quality under Screenshots in Settings:

• Native (full resolution), the default
• High, up to 2560 px wide
• Medium, up to 1920 px wide
• Small, up to 1280 px wide

Screen Tools scales a wider screenshot down to the cap, keeping its shape, when it takes the screenshot. Screen Tools leaves a narrower screenshot at its captured size.

Editor tools

The editor toolbar has eight tools:

Tool	Use
Rectangle	Drag to draw a box. The default tool.
Arrow	Drag from the tail to the head.
Ellipse	Drag to draw an ellipse.
Pen	Draw freehand.
Highlighter	Draw a translucent freehand stroke.
Text	Click where the text goes, type, and press Enter. Escape cancels.
Blur (pixelate)	Drag over an area to cover it with large blocks.
Crop	Drag out the area to keep.

Pick a colour from red, amber, green, blue, black and white, and a stroke size from thin, medium and thick. Text gets a contrasting outline so it reads on any background.

Pixelate replaces the area with blocks of the original pixels. Once you export, the hidden content can't be recovered from the image, which a soft blur doesn't guarantee.

Undo and redo cover every change, including crops. Use the toolbar buttons, ⌘Z or Ctrl+Z to undo, and ⇧⌘Z, Ctrl+Shift+Z or Ctrl+Y to redo. The editor is screenshot-editor.tsx.

Exporting

The editor exports in three ways:

• Download saves the image to your downloads folder in the format picked next to it, PNG or JPG. The name is screenshot-YYYY-MM-DD-HHMMSS.png (or .jpg) from when you took it. JPG uses 92% quality.
• Copy puts the image on the clipboard as a PNG, whatever format is picked. If the copy fails, download it instead.
• Upload sends the image to Google Drive, Dropbox or your own upload server, in the format picked, with the same name a download gets. It shows once you've connected one in Settings. Uploads of the screenshot are listed under Uploads below the image, with their links and status. See Uploading.

The thumbnails on the Screenshots page have Copy, Download, Upload and Delete buttons that show on hover. Upload shows only once something is connected.

The format you pick is remembered, and it's the same setting as Download format in Settings.

Downloading, copying or uploading stores the edited image in place of the screenshot and marks it saved. Screen Tools keeps the original capture, so Revert to original shows in the toolbar once a screenshot has been edited and saved. Revert discards every edit.

Screenshot history

The Screenshots page lists the 10 most recent screenshots, newest first, with the page title, date and size. Taking an 11th deletes the oldest, whether you saved it or not, so download the ones you want to keep. Deleting a screenshot removes it and its upload list from Screenshots. Copies in your downloads folder and files you uploaded stay. The limit is MAX_SCREENSHOTS in db.ts.

Limitations

• Blocked pages. Chrome doesn't let extensions capture its own pages (chrome:// pages, including the new tab page) or the Chrome Web Store. Firefox blocks its own pages (about: pages), addons.mozilla.org and reader view. Some other pages are blocked too. Screen Tools shows a "Can't capture this page" notification. Try another tab. See Firefox for the other differences there.
• Pages that scroll an inner panel. Full page scrolls the window. Pages that keep the window still and scroll a panel inside it, such as Gmail and many web apps, capture only what's visible.
• Very long pages. Full page stops after 100 screens, about a minute of scrolling. If the stitched image would be bigger than a canvas allows, about 32,767 px a side or 268 million pixels, Screen Tools shrinks the whole image to fit.
• Content that changes as you scroll. Full page captures each screen as it is at that moment. Lazy-loaded images, animations and elements that move on scroll can look different between steps.

Troubleshooting and FAQ covers what to do in each case.