Get Chrome viewport size and header height

viewport-size.sh

osascript \
  -e 'tell application "Google Chrome"' \
  -e 'set b to bounds of front window' \
  -e 'set h to (item 4 of b) - (item 2 of b)' \
  -e 'set v to execute active tab of front window javascript "JSON.stringify([window.innerWidth, window.innerHeight])"' \
  -e 'set AppleScript'"'"'s text item delimiters to ","' \
  -e 'set vList to text items of (text 2 thru -2 of v)' \
  -e 'set vW to item 1 of vList as number' \
  -e 'set vH to item 2 of vList as number' \
  -e 'set chromeH to h - vH' \
  -e 'set aspectRatio to (vW / vH)' \
  -e 'return "Viewport: " & vW & "x" & vH & " | Chrome Header: " & chromeH & " | Aspect Ratio: " & aspectRatio' \
  -e 'end tell'

This script returns the viewport size and header height of a Google Chrome window:

Viewport: 2048x1152 | Chrome Header: 87 | Aspect Ratio: 1.77777777778

If your aspect ratio is not 16:9 (1.778), adjust the window height to match. This is useful for creating perfect 16:9 viewports for screen recordings.

Using with Raycast:

First, enable JavaScript from Apple Events: Go to Chrome > View > Developer > Allow JavaScript from Apple Events

Then,

1. Run the script to get your Chrome header height (e.g., 87px)
2. In Raycast → Create Window Management Command, set dimensions accounting for the header:
   • Width: 2048
   • Height: 1239 (1152 + 87)
3. Apply the command to Chrome
4. Run the script again to verify you have a perfect 16:9 viewport

Works with any window manager that lets you set exact dimensions (Raycast, Rectangle, Moom, etc.).