Automate Website Screenshots – AutoHotKey and FireShot

I like to keep a snapshot of websites on a daily basis for various reasons.  FireShot certainly is one of the best plugins for accomplishing screenshots, but it doesn’t have an automated method inherently built into it.  So that’s where AutoHotkey comes into play.  AutoHotkey allows you to automate some remedial tasks in Windows.

Install Software

First thing is first, for this tutorial you’ll need a Windows based machine with Chrome installed.  Also install AutoHotkey and FireShot.  I’m not going to go into detail on how to get there.

Configure Keyboard Shortcut in Chrome for FireShot

The next step is getting Chrome to be able to run FireShot within Chrome via a keyboard shortcut.  This is where I ran into the biggest issue – FireShot does allow for setting keyboard shortcuts to various functions via their options.  And I was using this in AutoHotkey for the longest time, and then it stopped working and I haven’t fully figured out why.  But even using the keyboard shortcut outside of the automation at times seems to not work the best…  That’s the reason for using the API like this method suggests.

Create Custom Search Engine

• Right-click on the address bar in Chrome and choose Edit search engines….
• Scroll to the bottom and find the blank fields to add a new search engine.
  • The first field is the name of the search engine – this can be anything you’d like.
  • In the keyword field is where you enter what keyword will trigger the search engine – I sued SaveVisible
  • The last field is where you put the FireShot API code.  So enter this in that field:
    
    javascript: var element = document.createElement("FireShotDataElement"); element.setAttribute("Entire", "false"); element.setAttribute("Action", 1); element.setAttribute("Key", ""); element.setAttribute("BASE64Content", ""); element.setAttribute("Data", "fireshot"); if (typeof(CapturedFrameId) != "undefined") element.setAttribute("CapturedFrameId", CapturedFrameId); document.documentElement.appendChild(element); var evt = document.createEvent("Events"); evt.initEvent("capturePageEvt", true, false); element.dispatchEvent(evt);

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

    javascript: var element = document.createElement("FireShotDataElement"); element.setAttribute("Entire", "false"); element.setAttribute("Action", 1); element.setAttribute("Key", ""); element.setAttribute("BASE64Content", ""); element.setAttribute("Data", "fireshot");   if (typeof(CapturedFrameId) != "undefined") element.setAttribute("CapturedFrameId", CapturedFrameId);   document.documentElement.appendChild(element);   var evt = document.createEvent("Events"); evt.initEvent("capturePageEvt", true, false);   element.dispatchEvent(evt);

  • Click Done.

Create Bookmarklet (Optional)

This really isn’t needed for the automation piece, but if you’d like you could create a bookmarklet in Chrome with the same block of code above.  This way you can click one button to trigger something different if you’d like.

• On the bookmark bar in Chrome, right-click and choose Add page…
• In the Name field, choose whatever name you’d like to show on the bookmark bar.
• In the URL field enter the block of code above.
• Click Save.

FireShot API Options (Optional)

There are a few customizations you can make to the code above.

• Line 3 – Entire
  • This allows you to specify if you want to capture the entire page or just what is visible.
  • Possible Values:
    • true = entire page
    • false = visible portion
• Line 4 – Action
  • This specifies what action you’d like FireShot to perform.
  • Possible Values:
    • 0 – Edit in FireShot
    • 1 – Save to Hard Drive
    • 2 – Copy to Clipboard
    • 3 – Email image
    • 4 – Export to 3rd party editor
    • 5 – Upload to free image hosting
    • 7 – Print
    • 8 – Base64 Encode

File Naming Options

The file name that the image saves as can be customized in the Chrome extension directly.  Click on the icon in Chrome and choose Miscellaneous -> Options.  Then under Editor options click Click to setup….  Choose Capturing and in here you can setup the file name pattern.

AutoHotkey Script

Now that you have FireShot all setup, it’s time to write an AutoHotkey script that will trigger this.  You can use any text editor (Notepad, Notepad++, etc.) to create this.

• Create a new file
• Save it to any location on your computer with whatever filename you like.  The file extension needs to be .ahk
• Add this code to the file and save it.
  
  ; Open Chrome and focus Run, chrome.exe, , max WinWait, New Tab ; Get window ID WinGet, active_id, ID, A ; Maximize window WinMaximize, ahk_id %active_id% ; +++ Capture Page #1 +++ ; ;Highlight address bar SendInput, ^l Sleep, 2000 ; Navigate SendInput, www.promincproductions.com/blog/{Enter} Sleep, 11000 ;Highlight address bar SendInput, ^l Sleep, 2000 ;Save visible using a custom search engine that triggers the Fireshot API SendInput, SaveVisible{Enter} Sleep, 3000 Send !s Sleep, 6000 Send {Enter} ; +++ Capture Page #2 +++ ; ; Reactivate window - Minumum should be 4000 Sleep, 10000 WinActivate, ahk_id %active_id% ;Highlight address bar SendInput, ^l Sleep, 2000 ; Navigate SendInput, youtube.com/prominc{Enter} Sleep, 11000 ;Highlight address bar SendInput, ^l Sleep, 2000 ;Save visible using a custom search engine that triggers the Fireshot API SendInput, SaveVisible{Enter} Sleep, 3000 Send !s Sleep, 6000 Send {Enter} ; Reactivate window Sleep, 4000 WinActivate, ahk_id %active_id% WinClose, ahk_id %active_id% ; Open the destination directory to leave a trace that this ran Run explorer.exe C:`,/e return

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

  ; Open Chrome and focus Run, chrome.exe, , max WinWait, New Tab   ; Get window ID WinGet, active_id, ID, A   ; Maximize window WinMaximize, ahk_id %active_id%       ; +++ Capture Page #1 +++ ; ;Highlight address bar SendInput, ^l Sleep, 2000   ; Navigate SendInput, www.promincproductions.com/blog/{Enter} Sleep, 11000   ;Highlight address bar SendInput, ^l Sleep, 2000   ;Save visible using a custom search engine that triggers the Fireshot API SendInput, SaveVisible{Enter} Sleep, 3000 Send !s Sleep, 6000 Send {Enter}       ; +++ Capture Page #2 +++ ; ; Reactivate window - Minumum should be 4000 Sleep, 10000 WinActivate, ahk_id %active_id%   ;Highlight address bar SendInput, ^l Sleep, 2000   ; Navigate SendInput, youtube.com/prominc{Enter} Sleep, 11000   ;Highlight address bar SendInput, ^l Sleep, 2000   ;Save visible using a custom search engine that triggers the Fireshot API SendInput, SaveVisible{Enter} Sleep, 3000 Send !s Sleep, 6000 Send {Enter}       ; Reactivate window Sleep, 4000 WinActivate, ahk_id %active_id% WinClose, ahk_id %active_id%     ; Open the destination directory to leave a trace that this ran Run explorer.exe C:`,/e   return

• This script has a few assumptions in it that you may want to change.
  • The Chrome custom search engine I put in above is named SaveVisible – change that to whatever name you used.
  • This script runs through two webpages and captures the screen – you will want to change those two URLs to whatever sites you wish to capture.  Lines 19 & 45.
  • After the script has ran, it opens a Windows Explorer window to show that it ran.  I set this to the location of where the images were saved.  But for this example script it’s set to the root of the C drive.  Line 68
    • Note – FireShot will save to the last used folder by default.  So keep that in mind and try to use the same folder for this process.

Schedule The Script To Run

Now we can use the Windows Scheduler to run this script moving forward.

• Start Button -> Control Panel -> Administrative Tools -> Task Scheduler.
• Click Create Task 
• Set the General tab as you see fit.
• Under the Triggers tab, create whatever trigger you wish – I prefer a time based trigger.
• Under the Actions tab click New to create a new action.
  • Choose Start a Program
  • Browse to the .ahk file you created in the above step
• Save this task and you should be all set to go!