{"id":1026,"date":"2015-09-05T20:23:38","date_gmt":"2015-09-05T14:23:38","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=1026"},"modified":"2015-09-04T21:00:51","modified_gmt":"2015-09-04T15:00:51","slug":"automate-website-screenshots-autohotkey-and-fireshot","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/automate-website-screenshots-autohotkey-and-fireshot\/","title":{"rendered":"Automate Website Screenshots – AutoHotKey and FireShot"},"content":{"rendered":"

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

\"AutoHotkey<\/a>
Use FireShot in Chrome with AutoHotkey to automate screenshots. The scripts can then be automated with Windows Task Scheduler.<\/figcaption><\/figure>\n

Install Software<\/h2>\n

First thing is first, for this tutorial you’ll need a Windows based machine with Chrome installed. \u00a0Also install AutoHotkey and FireShot. \u00a0I’m not going to go into detail on how to get there.<\/p>\n

Configure Keyboard Shortcut in Chrome for\u00a0FireShot<\/h2>\n

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

Create Custom Search Engine<\/h3>\n
    \n
  • Right-click on the address bar in Chrome and choose\u00a0Edit search engines…<\/strong>.<\/li>\n
  • Scroll to the bottom and find the blank fields to add a new search engine.\n
      \n
    • The first field is the name of the search engine – this can be anything you’d like.<\/li>\n
    • In the keyword field is where you enter what keyword will trigger the search engine – I sued\u00a0SaveVisible<\/strong><\/li>\n
    • The last field is where you put the FireShot API code. \u00a0So enter this in that field:\n
      javascript: \r\n var element = document.createElement(\"FireShotDataElement\");\r\n element.setAttribute(\"Entire\", \"false\");\r\n element.setAttribute(\"Action\", 1);\r\n element.setAttribute(\"Key\", \"\");\r\n element.setAttribute(\"BASE64Content\", \"\");\r\n element.setAttribute(\"Data\", \"fireshot\");\r\n\r\n if (typeof(CapturedFrameId) != \"undefined\")\r\n element.setAttribute(\"CapturedFrameId\", CapturedFrameId);\r\n\r\n document.documentElement.appendChild(element);\r\n\r\n var evt = document.createEvent(\"Events\");\r\n evt.initEvent(\"capturePageEvt\", true, false);\r\n\r\n element.dispatchEvent(evt);<\/code><\/pre>\n<\/li>\n
    • Click\u00a0Done<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
      Create Bookmarklet (Optional)<\/h3>\n
      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. \u00a0This way you can click one button to trigger something different if you’d like.<\/p>\n
        \n
      • On the bookmark bar in Chrome, right-click and choose\u00a0Add page…<\/strong><\/li>\n
      • In the\u00a0Name<\/strong>\u00a0field, choose whatever name you’d like to show on the bookmark bar.<\/li>\n
      • In the\u00a0URL<\/strong> field enter the block of code above.<\/li>\n
      • Click\u00a0Save<\/strong>.<\/li>\n<\/ul>\n
        FireShot API Options (Optional)<\/h3>\n
        There are a few customizations you can make to the code above.<\/p>\n
          \n
        • Line 3 – Entire\n
            \n
          • This allows you to specify if you want to capture the entire page or just what is visible.<\/li>\n
          • Possible Values:\n
              \n
            • true = entire page<\/li>\n
            • false = visible portion<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
            • Line 4 – Action\n
                \n
              • This specifies what action you’d like FireShot to perform.<\/li>\n
              • Possible Values:\n
                  \n
                • 0 – Edit in FireShot<\/li>\n
                • 1 – Save to Hard Drive<\/li>\n
                • 2 – Copy\u00a0to Clipboard<\/li>\n
                • 3 – Email image<\/li>\n
                • 4 – Export to 3rd party editor<\/li>\n
                • 5 – Upload to free image hosting<\/li>\n
                • 7 – Print<\/li>\n
                • 8 – Base64 Encode<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                  File Naming Options<\/h3>\n
                  The file name that the image saves as can be customized in the Chrome extension directly. \u00a0Click on the icon in Chrome and choose\u00a0Miscellaneous\u00a0-> Options<\/strong>. \u00a0Then under\u00a0Editor options<\/strong> click\u00a0Click to setup…<\/strong>. \u00a0Choose\u00a0Capturing<\/strong> and in here you can setup the file name pattern.<\/p>\n
                  AutoHotkey Script<\/h2>\n
                  Now that you have FireShot all setup, it’s time to write an AutoHotkey script that will trigger this. \u00a0You can use any text editor (Notepad, Notepad++, etc.) to create this.<\/p>\n
                    \n
                  • Create a new file<\/li>\n
                  • Save it to any location on your computer with whatever filename you like. \u00a0The file extension needs to be .ahk<\/li>\n
                  • Add this code to the file and save it.\n
                    ; Open Chrome and focus\r\nRun, chrome.exe, , max\r\nWinWait, New Tab\r\n\r\n; Get window ID\r\nWinGet, active_id, ID, A\r\n\r\n; Maximize window\r\nWinMaximize, ahk_id %active_id%\r\n\r\n\r\n\r\n; +++ Capture Page #1 +++ ;\r\n;Highlight address bar\r\nSendInput, ^l\r\nSleep, 2000\r\n\r\n; Navigate\r\nSendInput, www.promincproductions.com\/blog\/{Enter}\r\nSleep, 11000\r\n\r\n;Highlight address bar\r\nSendInput, ^l\r\nSleep, 2000\r\n\r\n;Save visible using a custom search engine that triggers the Fireshot API\r\nSendInput, SaveVisible{Enter}\r\nSleep, 3000\r\nSend !s\r\nSleep, 6000\r\nSend {Enter}\r\n\r\n\r\n\r\n; +++ Capture Page #2 +++ ;\r\n; Reactivate window - Minumum should be 4000\r\nSleep, 10000\r\nWinActivate, ahk_id %active_id%\r\n\r\n;Highlight address bar\r\nSendInput, ^l\r\nSleep, 2000\r\n\r\n; Navigate\r\nSendInput, youtube.com\/prominc{Enter}\r\nSleep, 11000\r\n\r\n;Highlight address bar\r\nSendInput, ^l\r\nSleep, 2000\r\n\r\n;Save visible using a custom search engine that triggers the Fireshot API\r\nSendInput, SaveVisible{Enter}\r\nSleep, 3000\r\nSend !s\r\nSleep, 6000\r\nSend {Enter}\r\n\r\n\r\n\r\n; Reactivate window\r\nSleep, 4000\r\nWinActivate, ahk_id %active_id%\r\nWinClose, ahk_id %active_id%\r\n\r\n\r\n; Open the destination directory to leave a trace that this ran\r\nRun explorer.exe C:\\`,\/e\r\n\r\nreturn<\/code><\/pre>\n<\/li>\n
                  • This script has a few assumptions in it that you may want to change.\n
                      \n
                    • The Chrome custom search engine I put in above is named\u00a0SaveVisible<\/strong> – change that to whatever name you used.<\/li>\n
                    • 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. \u00a0Lines 19 & 45.<\/li>\n
                    • After the script has ran, it opens a Windows Explorer window to show that it ran. \u00a0I set this to the location of where the images were saved. \u00a0But for this example script it’s set to the root of the C drive. \u00a0Line 68\n
                        \n
                      • Note – FireShot will save to the last used folder by default. \u00a0So keep that in mind and try to use the same folder for this process.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                        Schedule The Script To Run<\/h2>\n
                        Now we can use the Windows Scheduler to run this script moving forward.<\/p>\n
                          \n
                        • Start Button -> Control Panel -> Administrative Tools -> Task Scheduler.<\/li>\n
                        • Click\u00a0Create Task<\/strong>\u00a0<\/li>\n
                        • Set the General<\/strong> tab as you see fit.<\/li>\n
                        • Under the Triggers<\/strong> tab, create whatever trigger you wish – I prefer a time based trigger.<\/li>\n
                        • Under the\u00a0Actions<\/strong> tab click\u00a0New<\/strong> to create a new action.\n
                            \n
                          • Choose\u00a0Start<\/strong>\u00a0a Program<\/strong><\/li>\n
                          • Browse to the .ahk file you created in the above step<\/li>\n<\/ul>\n<\/li>\n
                          • Save this task and you should be all set to go!<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"
                            I like to keep a snapshot of websites on a daily basis for various reasons. \u00a0FireShot certainly is […]<\/p>\n","protected":false},"author":1,"featured_media":1027,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[53,18],"tags":[],"class_list":["post-1026","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autohotkey","category-computers"],"jetpack_featured_media_url":"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/09\/AutoHotkey-FireShot-Chrome.jpg","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-gy","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/1026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=1026"}],"version-history":[{"count":1,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/1026\/revisions"}],"predecessor-version":[{"id":1028,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/1026\/revisions\/1028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media\/1027"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=1026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=1026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=1026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}