Capturing exact DOM elements in a Chrome MV3 extension: DPR, sticky elements, and redaction before pixels exist

Screenshot extensions often capture a viewport rectangle containing the desired element, rather than the exact element itself. This is due to the t.captureVisibleTab() method, which generates a bitmap of the viewport with a device pixel ratio (DPR) encoded. To overcome this, Snaptura, a Chrome MV3 extension, captures exact DOM elements and creates polished exports. The key to this process involves four main issues.

First, capturing at the device's resolution ensures the exported image is 1:1 sharp. The captureVisibleTab() method returns a bitmap of the viewport, but this bitmap uses the device pixel ratio (DPR). When an 400×300px card is captured on a laptop with DPR: 2, the bitmap becomes 800×600, and the browser encodes the DPR into the PNG. To address this, every capture includes its DPR, and crop rectangles are multiplied before slicing. This can be done with the following code:

const dpr = window.devicePixelRatio;

const rect = element.getBoundingClientRect();

const slice = {

x: Math.round(rect.x * dpr),

y: Math.round(rect.y * dpr),

width: Math.round(rect.width * dpr),

height: Math.round(rect.height * dpr),

};

Second, hover-select poses a hit-testing problem due to overlays, shadow DOM, and iframes. A common approach is document.elementFromPoint, but this doesn't work well in real-world scenarios. A better solution is to walk up from the hovered node and consider meaningful ancestors, rather than just the immediate one. Candidates should be scored by visible area and semantic weight.

For example, a button inside a div should be selectable as either, with a keyboard shortcut to navigate up the chain. The selection overlay should be painted in a page-level layer that ignores pointer events, preventing changes to the captured page. This heuristic typically identifies the nearest ancestor with a different background, which users can learn to use in just ten seconds.

Third, full-page captures and sticky-element ghosts can cause issues when scroll-and-stitching full-page captures. Sticky elements can inadvertently overlap every fold. To tackle this, detect position: sticky/fixed elements before scrolling and either hide them or pin their correct-at-this-scroll-offset version per fold. This ensures the header appears in its expected position in the final fold.

Additionally, scrolling isn't pixel-exact due to factors like page zoom, fractional scroll positions, and scroll-behavior: smooth. To minimize seam artifacts, force scrollTo({ top: y, behavior: 'instant' }) and wait for both the scroll event and a rAF after it.

Finally, pixel-level redaction can leave sensitive information in the file. Traditional redaction (drawing a black box over the region) leaves the secret in the file, and screenshot tools that blur and undo are well-known tricks. Instead, replace the text node with a placeholder element of identical box metrics, capture, and then restore the original node.

This ensures the sensitive string is never rasterized, preventing it from leaking in the PNG, undo stack, or anywhere else. The only downside is that redaction must be declared before capture, which becomes a straightforward UX: you mark regions once, and every future capture of that page respects those markings.

Snaptura is a free extension with a watermark-free Pro tier and lifetime option. These four patterns—capturing at the device's resolution, addressing hover-select issues, handling sticky elements, and redacting before pixel existence—are valuable for any captureVisibleTab-based development.