Chrome extension
Select an element, style it, and download a PNG.
The extension is the visual DOMShot workflow. Use it when you can see the page and want to choose the exact card, chart, modal, button, or section yourself.
When to use the extension
Use the extension when the choice is visual: you want to hover over the page, click the right element, preview the finished image, and save it. It is the fastest path for manual docs screenshots, product updates, bug reports, and design review images.
The extension does not ask you for a CSS selector. You choose the element by clicking it on the page.
Basic workflow
- Open DOMShot. Click the extension button on the page you want to capture.
- Select. Move over the page and click the element you want.
- Adjust. Choose background, padding, radius, shadow, size, and scale.
- Preview. Check the final image before saving.
- Download. Save the PNG to your computer.
Expected result: a local PNG file that contains only the selected page element, with the styling you chose in the preview.
Output styles
The same element can be exported in different ways depending on where the image will be used.
Clean
Use when you only need the selected element with no extra styling, usually for documentation or bug reports.
Floating
Add spacing and a soft shadow so the element stands out in docs, release notes, or blog posts.
Studio
Add a background and larger canvas when the image should feel ready for a homepage or marketing section.
What the controls mean
Background
Transparent keeps only the element. Styled backgrounds make the capture feel more like a designed asset.
Padding and radius
Padding adds breathing room around the element. Radius rounds the final image or canvas corners.
Shadow and size
Shadow separates the element from the page. Size controls the final PNG dimensions for sharing or publishing.
When the extension cannot capture
Browser extension APIs can restrict special pages such as browser settings, extension galleries, local files, and some protected tabs. Open a normal website tab, refresh the page, and choose a visible page element.
If the page changes after selecting an element, refresh and select again. If the element is hidden behind a tab, modal, or scroll position, make it visible before opening DOMShot.
Use agents instead when
Use @domshot/agent when an automation tool needs to inspect a page, find candidates, create a shot pack, or capture many images without a person clicking around.
Agent mode is also better for repeated captures, logged-in workflows, or tasks like "create a screenshot pack for the feature cards on this page."