What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To screenshot one element from a Chrome extension, measure its bounding box in the page, capture the visible tab with chrome.tabs.captureVisibleTab(), and crop the returned image using a scale calculated from the screenshot’s actual pixel dimensions. Do not assume browser zoom alone tells you the crop scale: CSS pixels, device-pixel ratio, and the captured bitmap’s dimensions all matter. For elements taller than the viewport, capture and stitch visible slices.
How the capture-and-crop method works
Chrome’s captureVisibleTab() captures the visible area of the active tab, not an individual DOM node. The extension therefore has to combine two operations: ask code running in the page for the element’s CSS-pixel rectangle, then crop those coordinates out of a screenshot image returned by the extension API.
The reliable order is: identify the element, bring it into view if necessary, measure it, capture the tab, calculate scale from the screenshot and viewport dimensions, clamp the crop to the bitmap bounds, and export the crop. The scale calculation is what makes the method work across zoom levels and high-DPI displays.
Set up the extension permissions and files
For a user-triggered capture, declare activeTab and scripting in a Manifest V3 extension. The capture API also requires activeTab or suitable host permissions such as all_urls. Use the narrow user-invoked permission where it fits your extension; do not request broad access without a product need.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
{
"manifest_version": 3,
"name": "Element Screenshot",
"version": "1.0.0",
"permissions": ["activeTab", "scripting"],
"action": { "default_title": "Capture an element" },
"background": { "service_worker": "background.js" }
}This compact example uses a CSS selector, #target. Replace it with the selector your extension obtains from a picker or its own UI. The content-script function is injected into the active tab, returns geometry and viewport data, and the service worker captures and crops the visible tab.
Runnable example: measure, capture, and crop an element
Save this as background.js. It uses OffscreenCanvas and createImageBitmap() to crop the image without adding an HTML page to the extension.
chrome.action.onClicked.addListener(async (tab) => {
if (!tab.id || !tab.windowId) return;
try {
const [{ result: rect }] = await chrome.scripting.executeScript({
target: { tabId: tab.id },
func: async (selector) => {
const element = document.querySelector(selector);
if (!element) throw new Error(`No element matches ${selector}`);
element.scrollIntoView({ block: "center", inline: "nearest" });
await document.fonts.ready;
await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
const r = element.getBoundingClientRect();
return {
left: r.left,
top: r.top,
width: r.width,
height: r.height,
scrollX: window.scrollX,
scrollY: window.scrollY,
innerWidth: window.innerWidth,
innerHeight: window.innerHeight,
devicePixelRatio: window.devicePixelRatio
};
},
args: ["#target"]
});
const dataUrl = await chrome.tabs.captureVisibleTab(tab.windowId, { format: "png" });
const bitmap = await createImageBitmap(await (await fetch(dataUrl)).blob());
const scaleX = bitmap.width / rect.innerWidth;
const scaleY = bitmap.height / rect.innerHeight;
let x1 = Math.round(rect.left * scaleX);
let y1 = Math.round(rect.top * scaleY);
let x2 = Math.round((rect.left + rect.width) * scaleX);
let y2 = Math.round((rect.top + rect.height) * scaleY);
x1 = Math.max(0, Math.min(bitmap.width, x1));
y1 = Math.max(0, Math.min(bitmap.height, y1));
x2 = Math.max(x1, Math.min(bitmap.width, x2));
y2 = Math.max(y1, Math.min(bitmap.height, y2));
const width = x2 - x1;
const height = y2 - y1;
if (!width || !height) throw new Error("Element is outside the captured viewport");
const canvas = new OffscreenCanvas(width, height);
const context = canvas.getContext("2d");
context.drawImage(bitmap, x1, y1, width, height, 0, 0, width, height);
const png = await canvas.convertToBlob({ type: "image/png" });
const outputUrl = URL.createObjectURL(png);
// Replace this with your extension's download, storage, or UI flow.
console.log("Cropped image ready:", outputUrl, {
cssRect: rect,
bitmapRect: { x: x1, y: y1, width, height },
scaleX,
scaleY
});
} catch (error) {
console.error("Element screenshot failed:", error);
}
});The image URL in this example is created in the service worker and is intended to demonstrate that the crop succeeded. To let a user save it, implement an extension download or display flow appropriate to your interface; do not assume a service-worker object URL is a durable file. If you use chrome.downloads, declare that permission and pass a supported data URL or otherwise make the image available to the download context.
Why the crop scale must be measured
getBoundingClientRect() reports coordinates and dimensions in CSS pixels relative to the viewport. The captured PNG has bitmap pixels. Those coordinate systems can differ at browser zoom levels such as 125%, 150%, or 200%, and on high-DPI displays.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Use scaleX = image.width / innerWidth and scaleY = image.height / innerHeight, then map the rectangle edges into bitmap coordinates. Measuring both axes independently avoids assuming a square or fixed scale. The reported devicePixelRatio is useful diagnostic context, but the bitmap-to-viewport ratio is the value to use for this crop.
Chrome also exposes a tab zoom factor through chrome.tabs.getZoom(). That value describes tab zoom; it is not a substitute for checking the bitmap dimensions. Device-pixel ratio describes physical pixels relative to CSS pixels, while tab zoom changes page scaling. If zoom changes between measurement and capture, the rectangle and scale may no longer correspond to the same layout. Re-measure immediately before the screenshot, and account for zoom-change events if your flow remains open while the user can change zoom.
Elements outside the viewport and full-page-height elements
Element partly or wholly outside the viewport
Call scrollIntoView({block: 'center', inline: 'nearest'}) before measuring. Then wait for rendering to settle and measure again: scrolling can change sticky positioning, lazy-loaded content can alter layout, and fonts can finish loading after the initial render. The example waits for document fonts and two animation frames, but a page with asynchronous content may need a page-specific readiness condition.
A single visible-tab screenshot cannot include pixels outside the viewport. If an element remains clipped by the viewport after scrolling, crop only its visible part or use the multi-slice approach below. The example clamps crop coordinates to the bitmap, so a partially visible element produces a partial crop rather than out-of-bounds canvas coordinates.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Element taller than the viewport
For a tall element, preserve its document-space top and total height, then capture a sequence of viewport slices. For each slice, scroll to the corresponding document position, wait for the page to settle, re-read the element rectangle, capture the visible tab, crop the visible portion of the element, and append that slice in document order.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
- Measure the element’s document top as
rect.top + window.scrollYand record its full height. - Choose a scroll position that exposes the next part of the element. Avoid moving so far that gaps appear between slices.
- After scrolling, wait for layout and lazy-loaded images, then re-read the rectangle and viewport dimensions.
- Capture the tab and crop only the intersection of the element with the viewport.
- Place each cropped slice at the corresponding vertical offset in a destination canvas.
- Check the final stitched height against the element’s measured height and inspect seams before saving.
Sticky and fixed headers can appear in every slice or cover part of the element. Hide them for the capture if that is safe, or account for their overlap when positioning and stitching. Lazy images may change the element height after the first measurement; wait for them to load or remeasure as the page progresses. A stitched capture is application logic, not a feature of captureVisibleTab().
Picking the element and waiting for stable layout
A selector is convenient when the target is known, but selectors can be brittle across sites or dynamic layouts. An element-picker flow can ask the user to click a target and then return a stable identifier or the selected element’s geometry. Whichever approach you use, measure in the page context and return numbers rather than trying to inspect a page DOM directly from the extension service worker.
Wait only for conditions that matter to your target. document.fonts.ready covers font loading, while two animation frames allow a basic layout/render cycle. For an image-heavy target, check relevant image completion or wait for a target-specific selector/state. A fixed sleep may be simple but cannot guarantee that a slow network or script-driven layout has finished.
Permissions, limits, and pages the extension cannot capture
- Permission: User-triggered capture can use
activeTab; the Tabs API also documents suitable host permissions such asall_urls. The page script injection needs permission to run on that tab. - Capture rate: Chrome documents a maximum of two
captureVisibleTab()calls per second and warns that the operation is expensive. Queue slices rather than firing a tight loop. The stated limit is from Chrome’s API documentation for Chrome 92 and later. - Restricted surfaces: Browser-internal pages and some pages that restrict extension access cannot be treated like ordinary web pages. Cross-origin frames may also prevent your content script from inspecting the target DOM. Capture only what your permission and execution context allow.
- Active tab and window: The API captures the visible area of the active tab in the specified window. Keep the intended tab active for the capture flow, and use its actual window ID rather than assuming a default window.
Common problems and fixes
The crop is shifted or scaled incorrectly
Check that the rectangle was measured after the last scroll and immediately before capture. Compare the bitmap dimensions with innerWidth and innerHeight; calculate separate horizontal and vertical scale values rather than multiplying by a guessed zoom factor. Also verify that the screenshot was taken from the same tab and window used for measurement.
The crop is empty or clipped
The element may be outside the viewport, have zero size, or have moved between measurement and capture. Log the CSS rectangle and viewport, scroll the target into view, wait for layout, then measure again. Clamping prevents invalid bitmap coordinates but cannot recover pixels that were not visible.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
The returned rectangle is missing
Check whether the selector matches an element in the document where the script ran. If the target is inside an iframe, injection into the top-level frame will not find it; the extension needs an allowed frame execution strategy, and cross-origin restrictions can still prevent access. Handle the no-match case rather than treating a missing result as valid geometry.
Capture fails on a particular page
Verify the extension has the required capture permission and that the tab is a page where extension capture is allowed. Browser UI and restricted pages are not ordinary web content. Test with a normal webpage first, then isolate whether the failure is permission-related, a restricted surface, or an inactive/wrong window.
Recommended Free Tools
A tall-page loop runs slowly or hits limits
Reduce capture frequency and queue operations to stay within Chrome’s documented two-calls-per-second maximum. Capture only the necessary slices and avoid recapturing unchanged regions. Because the API operation is expensive, increasing parallelism is not a reliable shortcut.
Stitched output repeats or skips content
Fixed and sticky elements can overlay every slice, and scroll positions can overlap or leave gaps. Calculate slice placement from the element’s document coordinates, account for viewport intersections, and inspect the final image. If image loading changes page geometry, remeasure before producing subsequent slices.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.DevTools for a one-off check
For a manual result, Chrome DevTools offers screenshot actions for the current viewport and a full-size page. DevTools Protocol Monitor can also issue Chrome DevTools Protocol commands such as Page.captureScreenshot. These approaches are useful for checking pixel scale or comparing a result, but they do not replace the extension’s element selection, geometry collection, and crop/stitch logic when you need a repeatable user workflow.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Or skip the browser setup
If you need a website screenshot rather than an extension-only capture flow, ScreenshotNeo can return an image or PDF from one GET request. Its API supports element capture by CSS selector as well as many other capture options. See the ScreenshotNeo API documentation.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorscurl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies page verdict and billing status in headers. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up free for 1,000 screenshots a month—no card required.
Frequently Asked Questions
Can an extension capture an element inside a cross-origin iframe?
Only if the extension can execute in that frame under its permissions and Chrome’s restrictions. A top-level content script cannot simply inspect a cross-origin frame’s DOM.
Does the crop preserve transparent pixels around the element?
The crop contains the rendered screenshot pixels. The tab screenshot itself is an image of the rendered page, so it does not provide transparency for content behind the page.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
