[BUG] Claude-in-Chrome extension screenshot issues in a chromium
Preflight Checklist
- [x] I have searched existing issues and this hasn't been reported yet
- [x] This is a single bug report (please file separate reports for different bugs)
- [x] I am using the latest version of Claude Code
What's Wrong?
The Claude-in-Chrome extension is having a problems with taking a screenshots on the page https://claude.ai/chrome/installed. The screenshots are often empty or have the wrong vertical position.
What Should Happen?
Claude should be able to take a screenshot at any position on a web page.
Error Messages/Logs
Steps to Reproduce
- Open chromium
- Install Claude in Chrome (Beta)
- Visit https://claude.ai/chrome/installed
- Open Claude in Chrome (Beta) in a sidebar
- Ask to complete a task that requires taking a screenshots
- See how it faces the challenge with the broken screenshots
Environment:
docker --version
Docker version 26.1.5+dfsg1, build a72d7cd
chromium --version
Chromium 146.0.7680.153 built on Debian GNU/Linux 13 (trixie)
Claude in Chrome (Beta)
1.0.66
Docker started as:
```/usr/bin/sudo docker run -it --name claude \
-e DISPLAY=$DISPLAY \
-v /tmp/.X11-unix:/tmp/.X11-unix:rw \
-v "$HOME/.Xauthority:/home/node/.Xauthority:ro" \
\
-v /run/user/$(id -u)/pulse/native:/run/pulse.socket:rw \
-e PULSE_SERVER=unix:/run/pulse.socket \
-v ~/.config/pulse/cookie:/run/pulse.cookie:ro \
-e PULSE_COOKIE=/run/pulse.cookie \
\
-e TERM=$TERM \
-v "$HOME/.claude:/home/node/.claude:rw" \
-v "$PWD:/workspace:rw" \
claude_img
Chromium started as:
```chromium --no-sandbox --enable-easy-off-store-extension-install```
### Claude Model
Sonnet (default)
### Is this a regression?
I don't know
### Last Working Version
_No response_
### Claude Code Version
2.1.92 (Claude Code)
### Platform
Anthropic API
### Operating System
Ubuntu/Debian Linux
### Terminal/Shell
Other
### Additional Information
I asked Claude to investigate, here is what it found:
## Root Cause Analysis & Fix
Here's a comprehensive write-up of what I found through extensive investigation.
---
### Root Cause
The bug is caused by **two interacting factors**:
**Factor 1 — `claude-agent-glow-border` animated overlay (primary cause)**
The extension injects an element into every page:
```html
<div id="claude-agent-glow-border" style="
position: fixed; inset: 0px; pointer-events: none;
z-index: 2147483646; opacity: 1;
animation: 2s ease-in-out 0s infinite normal none running claude-pulse;
box-shadow: rgba(217, 119, 87, 0.5) 0px 0px 10px inset, ...;
">This fullscreen animated element forces Chrome to promote the page onto a separate GPU compositor layer. When chrome.tabs.captureVisibleTab() is called, it only captures the background layer (the page's cream background color rgb(245,244,237)), not the composited content layers. The animation keeps invalidating the compositor frame, preventing a clean capture.
Factor 2 — CSS scroll-behavior: smooth on <html>
The claude.ai page has class="h-screen scroll-smooth" on <html>. The scroll-smooth Tailwind class sets scroll-behavior: smooth. When the extension scrolls via JS (scrollTop = or window.scrollTo()), the layout updates instantly (so getBoundingClientRect() is correct), but the visual compositor animates smoothly — meaning captureVisibleTab fires before the visual position has reached the target, capturing at or near scroll=0.
Combined effect: Screenshots always show a near-blank cream background — the compositor's base layer, at or near scroll=0.
---
Fixes & Workarounds
Fix 1 — For the extension team (code fix): Before calling captureVisibleTab, temporarily hide the glow border:
// In the screenshot code path:
const glow = document.getElementById('claude-agent-glow-border');
const prev = glow?.style.display;
if (glow) glow.style.display = 'none';
// ... take screenshot ...
if (glow) glow.style.display = prev ?? '';Fix 2 — For the extension team (better long-term fix): Replace captureVisibleTab with Page.captureScreenshot via Chrome DevTools Protocol. This CDP command renders directly from the layout engine and is not affected by compositor layer issues or focus state:
// From the extension service worker via debugger API:
chrome.debugger.sendCommand({tabId}, 'Page.captureScreenshot', {
format: 'jpeg', quality: 80, captureBeyondViewport: false
}, (result) => { /* result.data = base64 image */ });Fix 3 — CSS fix on claude.ai page: Remove scroll-smooth from the <html> element on pages where the extension operates, or the extension can inject this CSS before scrolling:
// Inject before scrolling, restore after screenshot:
document.documentElement.style.scrollBehavior = 'auto';Fix 4 — Pause the animation before screenshot:
document.getElementById('claude-agent-glow-border')?.style.setProperty('animation', 'none');
// take screenshot
document.getElementById('claude-agent-glow-border')?.style.removeProperty('animation');---
Workaround for Claude (as an AI agent) right now
Since I can't modify the extension code, the practical workaround I can use in my sessions is:
- Rely on
read_page/find/getBoundingClientRectfor element location — these are accurate even when scrolled. The DOM/layout values are correct; only the visual screenshot is wrong. - Avoid relying on screenshots to verify scroll-dependent content. Instead use
get_page_textorjavascript_toolto confirm what's on screen. - When a screenshot IS needed, first run this JS to temporarily disable the glow animation and disable smooth scroll:
document.getElementById('claude-agent-glow-border').style.animation = 'none';
document.documentElement.style.scrollBehavior = 'auto';Then take the screenshot. The scroll position will still need to be at 0 or the visible content may still appear light-colored, but at least injected content and the glow overlay won't interfere.
The most impactful code fix for the extension team is Fix 2 (use Page.captureScreenshot via CDP), which completely sidesteps the compositor layer issue.
This issue has 2 comments on GitHub. Read the full discussion on GitHub ↗