Automated Screenshots Using Bash Firefox And ImageMagick

Today I've polished the CSS of one of the templates I've created for DokuWiki. And like every time when I've made some changes to the layout of a template I update the screenshot section of it. This usually takes me quite some time. First I am browsing every page and take the screenshot and then I crop the relevant part with Gimp. Today I felt annoyed when it was at the time to do the same procedure again. There had to be an easier way! And of course there is .

All it takes is ImageMagick, Firefox the Firefox Fullscreen extension tied together with a little bash script¹⁾. The Fullscreen Firefox extension can be configured to hide the tabs/scrollbars when switching Firefox into fullscreen mode via F11. That comes in real handy because you don't have to worry about how to remove these things from the screenshot later. Here's the script.

shooter.sh

#!/bin/sh
# @author Michael Klier <chi@chimeric.de>
#
# small script to create a series of website screenshots
 
DATE=$(date -I)
FX_BIN=/opt/mozilla/bin/firefox
IMM_BIN=/usr/bin/import
 
if [ -f $1 ]; then
    URLS=$(cat $1)
else
    URLS=$1
fi
 
mkdir ${DATE} && cd ${DATE}
 
CNT=1
for URL in $URLS; do
    if [ ! -n "$2" ]; then
        PREFIX=${DATE}
    else
        PREFIX=${DATE}-${2}
    fi
 
    if [ $CNT -lt 10 ]; then
        FNAME=${PREFIX}-0${CNT}.jpg
    else
        FNAME=${PREFIX}-${CNT}.jpg
    fi
 
    $FX_BIN $URL && sleep 5
    $IMM_BIN -window root -display :0 -resize 1024 $FNAME
    CNT=$((CNT+1))
done

The script takes two arguments. The first must be either a file which contains the URLs (one by line) of the pages the screenshot should be taken of or a list of URLs enclosed within hyphens. The second argument (optional) is a prefix which is added to the filename of the images. The script will generate a folder named by the current date in the folder it is called from to store the generated images there. Then it will open each URL in a new Firefox tab and take the screenshot. The images are also automatically resized to 1024 width.

% cd ~/screenshots
% shooter.sh "http://www.chimeric.de http://www.google.de" prefix

The script is far from being foolproof/perfect and I am no bash guru either but it provides a base for further customization and - the most important part - it works .

If you have any further ideas on how to make this script better feel free to let me know and leave a comment.