Feature/transparent browser background #547
Open
+433
−12
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Enable see-through backgrounds in the browser view, similar to terminal transparency. Changes: - Set WKWebView drawsBackground to false for transparent rendering - Make NSVisualEffectView background fully transparent (alphaValue = 0) - Set iTermBrowserView layer background to clear - Inject CSS with universal selector (*, *::before, *::after) to make all webpage backgrounds transparent - Preserve visibility for images, videos, thumbnails, avatars, icons - Add subtle translucent background for buttons 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Enable browser-only development mode with full transparency for all web content. Changes: 1. Browser-only auto-launch: - Use openSingleUserBrowserWindowWithURL API to create browser sessions - Disable window restoration to prevent terminal windows - Disable untitled window state machine - Auto-launch YouTube on startup for development 2. Complete UI transparency: - Set URL bar visualEffectView alphaValue to 0.0 - Remove URL bar border - Make toolbar and indicators view transparent - Clear layer backgrounds for all browser UI components 3. Aggressive CSS transparency injection: - Force ALL elements to transparent background (not just inline styles) - Continuous monitoring with MutationObserver - Periodic re-application every 500ms for dynamic sites like YouTube - Preserve media elements (img, video, canvas, etc.) - Add debug logging to track element modifications Result: Browser launches automatically with see-through backgrounds on all websites including YouTube. No terminal windows created. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Fix click responsiveness issues caused by aggressive transparency monitoring. Optimizations: - Add WeakSet cache to track processed elements (avoid reprocessing) - Add re-entry guard to prevent recursive calls - Only monitor childList changes (not attributes) to avoid mutation loops - Check for actual new nodes before applying transparency - Increase debounce delay to 200ms for better responsiveness - Remove setInterval periodic refresh (MutationObserver is sufficient) Result: Smooth click interactions while maintaining full transparency on dynamic sites like YouTube. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Restore terminal functionality while keeping transparent browser features. Changes: - Remove browser-only auto-launch code - Restore window restoration system - Restore untitled window creation logic - Restore autolaunch scripts and preferences handling - Keep all transparency features for browser sessions Transparency features remain active: - WebView transparent background (drawsBackground = false) - All UI components transparent (toolbar, URLBar, indicators) - Aggressive CSS injection with debounced MutationObserver - WeakSet caching to prevent UI blocking Result: iTerm2 launches normally with terminal, but when browser sessions are opened (via menu or URL), they have full transparency. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Move transparency control from toolbar to menu with preset values and custom slider. Features: - Add transparency submenu to browser menu - 5 preset values (Opaque, 25%, 50%, 75%, Transparent) - Custom slider for precise control - Real-time transparency updates - Fix JavaScript compatibility with SVG elements Technical improvements: - Check el.style.setProperty existence before calling - Optimize performance with Set-based element tracking - Add debouncing to prevent UI blocking
gnachman
requested changes
Dec 5, 2025
| forMainFrameOnly: false, | ||
| worlds: [.page, .defaultClient], | ||
| identifier: UserScripts.consoleLog.rawValue)) | ||
|
|
Owner
There was a problem hiding this comment.
Please put javascript in its own .js file and use iTermBrowserTemplateLoader to load it.
| if (isProcessing) return; // Prevent re-entry | ||
| isProcessing = true; | ||
| const transparency = window.iTermTransparencyLevel || 1.0; |
Owner
There was a problem hiding this comment.
0 is falsey so it'll be treated as 1
| window.iTermTransparencyLevel = 1.0; | ||
| // Make processedElements and applyTransparency global for external control | ||
| window.processedElements = new Set(); // Use Set instead of WeakSet for clearing |
Owner
There was a problem hiding this comment.
This will leak elements, won't it? Also this comment doesn't make sense.
| if (window.processedElements.has(el)) return; // Skip already processed | ||
| // Skip media elements | ||
| const isMedia = el.tagName.match(/^(IMG|VIDEO|PICTURE|CANVAS|SVG|IFRAME)$/i) || |
Owner
There was a problem hiding this comment.
On SVG and some special nodes, className is not a string (e.g. SVGAnimatedString) and this can throw.
const className = String(el.className || '');
const id = String(el.id || '');
const isMedia =
el.tagName.match(/^(IMG|VIDEO|PICTURE|CANVAS|SVG|IFRAME)$/i) ||
className.match(/(thumbnail|avatar|icon|img|video|player|yt-image)/i) ||
id.match(/(thumbnail|avatar|icon|img|video|player)/i);
| if (styleElement) { | ||
| styleElement.textContent = ` | ||
| /* Universal transparent background - opacity controlled by slider */ | ||
| *, *::before, *::after { |
Owner
There was a problem hiding this comment.
This will will:
• Kill contrast-preserving backgrounds, overlays, etc.
• Break sites that rely on background gradients for visibility.
• Nuke background images that aren’t “wallpaper” (e.g. buttons, logos, flags).
Something like this would make more sense:
html,
body,
main,
[role="main"],
article,
section,
.content,
.container,
.page,
.layout,
.wrapper {
background-color: ${bgColor} !important;
background-image: none !important;
}
| @objc private func setTransparency(_ sender: NSMenuItem) { | ||
| let value = Double(sender.tag) / 100.0 | ||
| currentTransparency = value | ||
| NSLog("Transparency preset selected: %f", value) |
|
|
||
| @objc private func transparencySliderChanged(_ sender: NSSlider) { | ||
| currentTransparency = sender.doubleValue | ||
| NSLog("Transparency slider changed to: %f", sender.doubleValue) |
| username:nil]; | ||
| } | ||
|
|
||
| // Auto-launch browser for transparent browser development |
| @@ -0,0 +1,26 @@ | |||
| <?xml version="1.0" encoding="UTF-8"?> | |||
| @@ -0,0 +1,85 @@ | |||
| # WebKit Media Playback Entitlements | |||
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds transparent background support to iTerm2's built-in browser, allowing
users to adjust the browser background opacity through a menu interface.
Motivation
Enhance browser integration with terminal by allowing overlay of browser
content while maintaining visibility of underlying content.
Changes
Transparent)
Implementation Details
iTermBrowserManager.swift: AddedsetTransparency(_:)method withinline JavaScript injection
iTermBrowserToolbar.swift: Added transparency submenu with presets andcustom slider
iTermBrowserViewController.swift: Connected toolbar delegate tobrowser manager
Testing
Screenshots