Search code examples
google-chromescreenshotchromiumheadless

How to take an Address Bar when using Chrome / Chromium headless mode?

When I use Google Chrome or Chromium's headless mode to take a screenshot, it takes only HTML Body.

$ chromium --headless --disable-gpu --screenshot --window-size=1280,1080 https://stackoverflow.com/

I want to take a screenshot with the address bar for my convenience... Then when I see the picture, I never confuse "Which URL did I take?".

How can I take a screenshot with the address bar when using Chrome/Chromium headless mode?

Solution

  • Chrome headless doesn't have a UI it's only have in-memory rendering done which is then being used to provide screenshot after page is loaded into the buffer. So there is no way to get it out of headless chrome functionality.

    But the is other ways. For example on linux you could use command like (ImageMagick should work under other OS too):

    convert screenshot.png -background black -fill white -splice 0x20 -annotate +15+15 'http://test.com' -gravity North -pointsize 30 screenshot2.png

    Which adds caption to the image with provided text. So it's easy to wrap it into a single shell script. Something like:

    #/bin/bash

url=$1

google-chrome --headless --disable-gpu --screenshot "$url"

current_time=$(date "+%Y.%m.%d-%H.%M.%S")
new_fileName=screenshot_$current_time.png

convert screenshot.png -background black -fill white -splice 0x20 -annotate +15+15 $url -gravity North -pointsize 30 $new_fileName

    And use it as ./take_screenshot.sh http://google.com