How SiteAnnotation works

Capture

Click the SiteAnnotation icon in the Chrome toolbar. The side panel opens next to the page, and the extension gets access to this tab. Then choose one of five capture modes:

Three modes are also in the page context menu: right-click the page and choose Area or Block, or select text and choose Text. Four actions have default keyboard shortcuts, listed in the table below. More on the full page screenshot and element capture with HTML and CSS.

Evidence

Every capture becomes an item of the report. Next to the image or text, an item keeps:

• the page address and title;
• the time of the capture, the viewport size and the browser version;
• for a block: its CSS selector, XPath, HTML (up to 50 KB) and the CSS rules that apply to it, the same rules DevTools shows;
• your comment.

A developer who opens the report sees which page, which element and which rules you mean, without reproducing the problem first. How the CSS rules are collected.

Annotate

Open a screenshot in the editor to mark it up. The tools are:

• Arrow and Rectangle to point at the problem;
• Text for a short label on the image;
• Number for numbered badges when one screenshot has several issues;
• Blur to hide emails, names, prices or anything you do not want to share;
• Crop to keep only the part that matters.

Every mark is a separate layer: you can select it, move it or delete it later, and undo the last edit. More on screenshot annotation.

Report

Items go into the current report in the order you capture them and are numbered #1, #2, #3. In the side panel you can drag items to reorder them, edit comments, move an item to another report or delete it.

A report can also have an introduction, a conclusion, section headings and text blocks between items, so it reads as a document and not as a list of screenshots.

You can keep up to 3 reports at a time. To start a fourth, export or back up one you no longer need and delete it. A backup is a .zip file with everything inside the report; restore it later in the same or another browser, and it comes back as a new report.

Export

Export a report in the format the person on the other side already opens:

Items keep their numbers in every format, so "see #4" means the same thing in the PDF and in the Word file.

Access and privacy

SiteAnnotation does not read your pages in the background. It uses the Chrome activeTab permission: access to a tab appears when you click the extension icon or press one of its shortcuts on that tab, and ends when you leave the site.

If you work on one site every day, choose Always allow on that site in the side panel. Chrome asks you to confirm, and the site appears in the settings, where you can remove it at any time. Chrome still asks for a click on the icon before the first screenshot on a page.

Some pages cannot be captured at all, because Chrome does not let extensions in:

• chrome:// pages, settings, the new tab page and page source;
• Chrome Web Store pages;
• the built-in PDF viewer, error pages and pages blocked by an administrator policy.

Local files (file://) work after you turn on Allow access to file URLs on the extension details page in chrome://extensions.

Masking. Form values, tokens, keys, session ids and secret URL parameters in captured HTML, attributes and page addresses are replaced with •••. Masking is on by default and can be turned off in the settings. Screenshots are not masked: use Blur in the editor for what is visible on the image.

Reports stay in your browser. SiteAnnotation has no account and no server, and nothing is uploaded. The details are in the privacy policy.

Keyboard shortcuts

Chrome lets an extension set default keys for at most four commands, so Whole page and Page data have none. To assign or change any shortcut, open chrome://extensions/shortcuts in the address bar (type it, links to Chrome pages do not open from websites). On a Mac, Alt is the Option key.