• Become a Power user Intro to AutoHotkey Intermediate AutoHotkey Intermediate Objects GUIs are Easy w/AutoHotkey Painlessly switch from V1 to V2

03: How to Automate Chrome to Navigate to a page and Set text

Chrome and AutoHotkey

Automating Chrome with AutoHotkey

In this session with GeekDude we cover how to navigate to a page, use JavaScript, and set text on a page / element.

donate to GeekDudeIf you’re loving this, please consider donating to GeekDude!

Script from Call

My notes from the session

00:30     Navigate to

00:50     connect to page

01:45     Call the DevTools function Page.Navigate  “https://p.ahkscript.org/”)

02:38     you need to call it by using page.Call(“Page.navigate”,{“url”:“https://p.ahkscript.org/”})

03:00     Look at parameters of Page.Navigate to understand what you need to pass

04:07     You can use page.WaitForLoad() to make sure the page loads (but it isn’t always needed).  Sometimes it waits too long or not long enough.  Check the forum thread for possible help

05:00     You might want to adapt some of their code to update GeekDude’s Chrome class

06:10     Make sure your page grabs the title of the right page (as it can update)

06:40     Put text into page element using JavaScript.  The input field on p.ahkscript.org isn’t a normal edit field.  Many sites have more-advanced field types

07:34     Inspect the page source.  This website imports a script called ace.js

<script src=”https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js” type=”text/javascript” charset=”utf-8″></script>

08:30     It has it’s own JavaScript API.  So when you want to talk to an Ace control, you need to talk in it’s language.  You’ll need to evaluate your site to see what it is using…  Always look for how to work with it using JavaScript.  When you’re using Chrome.ahk everything you’re doing is running through JavaScript!

8:57        You’re using AutoHotkey to run the JavaScript to drive Chrome.

9:00        In https://p.ahkscript.org/index.js you can see how that page talks to Ace. It could give you information on how to do it.  Mimic what the page itself is doing.   Not all sites are as easy as this to see what does

10:00     In this example, It creates an Editor variable and calls all of the editor commands on that.

10:23     Look back to Ace.js documentation you can see Editor is a section of the documentation.  This shows all the different methods to communicate with an Ace control.

10:47     Since we want to set text look for one that does that.  We’ll use Insert  function (Inserts text into wherever the cursor is pointing.)  Insert(String text)

11:15     In the  pastebin code’s index.js we see everything is called with editor dot (editor.) method name

11:25     We’ll prototype our JavaScript code from the Chrome developer tools because those give better immediate feedback (debugging info) of what went wrong.  Once we have a working line of JavaScript we’ll put that in AutoHotkey.

11:30     Go to Console within the Chrome debugging view (Control+Shift+i)

11:48     Look for the variable Editor by typing Editor.  It should respond showing you that it exists and is available

11:56     Auto-Assist works.  Try typing Editor.Insert (because insert is a method) .  Give it some text to test.

editor.insert(“hello world”)

12:17    The text should show up on the pastebin page.  😊

12:28     Take it over to your AutoHotkey code and try it from there using Page.Evaluate

12:42     The Double quotes are a problem because ahk and JavaScript both use them.

13:00     You could use the legacy assignment to set it.  But this gives us 2 lines of code

13:40     Thankfully JavaScript can use single quotes  most of the time.

page.Evaluate(“editor.insert(‘hello world’)”)

14:00     The Evaluate Method- that’s saying “evaluate the JavaScript” as it is using the same functionality as putting JavaScript in the Chrome development tools console and hitting Enter.  It runs it through the same interface.  Evaluate is short for “Take this JavaScript, run it on the page, and return the result.

14:53     Maybe your JavaScript has a ” that you want .   AutoHotkey requires you to double-up the quotes  “” (basically it escapes the second one).  AutoHotkey will reduce it from two quotes to one quote.

15:30     Maybe the page your using is simpler.  A lot of places have very simple pages.  They’ll just have standard input control which you can access with standard JavaScript.  Another site is mytextarea.net

16:12     Inspect the code for mytextarea.net  and you’ll see it is literally just a textbox

16:20     Let’s navigate to that page.  You’ll see we have to find a different way to connect as every page is unique.

17:16     When you’re writing JavaScript to a page you don’t know much about, one of the biggest problems you’re going to have is how do I get it to act on just this part of the page, this element, this box?

17:31     When in DevTools console, right click on the element you want, then Copy, and select Copy JS path (Selector is also helpful)

18:00     This returns the JavaScript code that that can be used to access that element (it is the Path to it)

18:00     So use that path, then we want to get it’s value

document.querySelector(“body > textarea”).value

18:48     this uses QuerySelector which returns the first instance.  QuerySelectorAll returns an array.

20:14     As long as you copy js Path you’ll probably get something useful (not sure if it is the DOM or how it is decided)

20:20     Any tools you can use like iWB2 learner tool for Chrome- No, GeekDude not aware

21:00     Here we’ve access a value.  Let’s set a new value

document.querySelector(“body > textarea”).value =’fruit’

21:26     Now take this from the Devtools and put it into AutoHotkey.  Make sure you replace double quotes with single quotes  page.Evaluate(“document.querySelector(‘body > textarea’).value =’taco'”)

21:30     Make sure the title / URL is the correct one






02: Connecting & starting a page in Chrome and AutoHotkey

Chrome and AutoHotkeyConnecting & starting a page in Chrome and AutoHotkey

In this session GeekDude shows me several ways to connect to an existing Chrome page.

donate to GeekDudeIf you’re loving this, please consider donating to GeekDude!

Connecting & starting a page in Chrome and AutoHotkey

Connect to tab and page

1:00        Chrome.ahk was developed as a way to connect to Chrome w/o any external tools (unlike Selenium)

1:20        Don’t use Selenium, Use the Chrome.ahk class from GeekDude

1:43        All you need is Chrome and AutoHotkey.  Selenium install can be difficult

2:40        Chrome.ahk talks to Chrome using Chrome’s developer tools protocol.  Meaning if you open-up the page inspector (Control+Shift+I) or “inspect” an element. Anything you can do with the page inspector / debugger, you can do with AutoHotkey on Chrome.

3:20        Because AutoHotkey is external to Chrome you have to start Chrome with a special command line flag.  chrome.exe –remote-debugging-port=9222 . The easiest way to do this is to find your shortcut for launching Chrome (taskbar, Start menu, etc.) go to the shortcut properties and in the “target” add above code.

4:28        Every time you open Chrome, it will allow you to open the devtools window but instead of using the Control+Shift+I shortcut, it uses a network connection which allows you to connect to your Chrome window.

5:07        GeekDude thinks this is a “local” connection (meaning localhost) so it is probably just your computer.

6:16        Close out of any Chrome windows you have open. Be sure you inspect your system tray, Chrome might stay running in the background as will hangouts.  Both of these need to be closed!!!)

6:20        When you reopen, Chrome will be listening for the debugging connections (listening for AutoHotkey to speak to it).

7:10        Create a new AutoHotkey script with your favorite editor.  GeekDude  uses his CodeQuickTester AHK script

7:35        #include your Chrome.ahk class / library.  (I.e.   #Include C:\AutoHotkey_L\Lib\Chrome.ahk)

8:00        Many different ways to start the Chrome Class.  This video we’re connecting to an existing window

8:19        Create a variable Page:=Chrome.GetPage()

9:15        When you’re connecting to Chrome, Chrome separates different items (tabs, Extensions, etc.) into something called a “page”.  Each item has a different logical page.

9:47        Here GeekDude explains how a method in a class works.  Because Chrome is a class and GetPage() is a method in that class, you need to use both to use it  (I was confused because there was no “chrome” variable.    This is called a static Method or static function.  You don’t have to do anything with it, you can just call it.

10:45     Check to confirm the class did find a page.  Use msgbox % IsObject(page).  You should get  1 which means it successfully connected to a page.

12:35     Chrome library on Github has a lot of examples.  We borrow from it to get the page.

13:08     page.Evaluate(“alert(‘hi’);”) ;Call Evaluate on the page variable.

14:01     A method is just a function that acts on an object / class.  You can use Method and function interchangeably here.

14:20     The Evaluate function is sending JavaScript to the debugger console

14:46     The Popup worked, but it was on the “wrong” page.  We wanted the New Tab page

15:02     Go look inside Chrome.ahk and you’ll see several ways to connect to a page.

15:24     GetPage() function but also GetPageByTitle(), GetPageByURL() and GetPageBy()

15:40     The other GetPageBy() methods are less useful for automation.  If you can’t use GetPageByTitle() or GetPageByURL then reach out to him via Discord, email, his website https://www.philipt.net/.

16:31     Change from GetPage to use GetPageByTitle()

17:00     If you have more than 1 tab with the same name, it looks like it gets them in the order they are in (this is in flux)

17:50     Add parameters to the GetPageByTitle to tell it which tab you connect to.  page:=Chrome.GetPageByTitle(“New Tab”, “startswith”,2)

18:49     GetPageByURL – make sure you click several times in Chrome to get the full URL

19:20     You should only need to connect to the page once.  If you connect when it starts, just keep the pointer to that page for the rest of the time.  If you restart your script, you’ll need to reconnect to that page if the title or URL changed

19:52     Currently using the “startswith” matching option.  There is also “contains”  (it can be anywhere in the URL)  e.g. https://www.reddit.com/r/google/ will still be found when searching for “google”.

20:45     “exact” matching is case insensitive.

21:00     Use the various matching to adapt to your needs.

22:11     Change the program to only alert us when it is not an object (!)




Automating Chrome with AutoHotkey: Getting InnerText, OuterHTML & Values

AutoHotkey Merchandise-White Stress ballBeing able to Automate Chrome has been a long-time goal of mine.  With GeekDude’s Chrome.ahk Class you now can do this.  Read more about his class on the AHK forum here.

If you didn’t see it, also check out my other tutorial on Setting values with Chrome and AutoHotkey.


Here is the function I demonstrate in the below video on Automating Chrome with AutoHotkey: Getting InnerText, OuterHTML & Values
Tab := Chrome.GetTab() ;Connect to Active tab

;********************Methd: Class, Tag, Name, ID **** ***********************************
;~ MsgBox % data.InnerText

;********************Method: Class, Tag, Name, ID **** ***********************************
;********************Get Property***********************************
if (Format(“{:L}”,Method)=”class”){ ;Case-insensitive check to see if method = Class
Obj.OuterHTML:= Tab.Evaluate(“document.getElementsByClassName(‘” Attribute “‘)[” Index-1 “].outerHTML”).Value
Obj.Value:= Tab.Evaluate(“document.getElementsByClassName(‘” Attribute “‘)[” Index-1 “].value”).Value
Obj.InnerText:= Tab.Evaluate(“document.getElementsByClassName(‘” Attribute “‘)[” Index-1 “].innerText”).Value
Obj.TextContent:= Tab.Evaluate(“document.getElementsByClassName(‘” Attribute “‘)[” Index-1 “].textContent”).Value
} ;***********Tag*******************
Else if (Format(“{:L}”,Method)=”tag”){ ;Case-insensitive check to see if method = Tag
Obj.OuterHTML:= Tab.Evaluate(“document.getElementsByTagName(‘” Attribute “‘)[” Index-1 “].outerHTML”).Value
Obj.Value:= Tab.Evaluate(“document.getElementsByTagName(‘” Attribute “‘)[” Index-1 “].value”).Value
Obj.InnerText:= Tab.Evaluate(“document.getElementsByTagName(‘” Attribute “‘)[” Index-1 “].innerText”).Value
Obj.TextContent:= Tab.Evaluate(“document.getElementsByTagName(‘” Attribute “‘)[” Index-1 “].textContent”).Value
} ;************Name******************
Else if (Format(“{:L}”,Method)=”name”){ ;Case-insensitive check to see if method = Name
Obj.OuterHTML:= Tab.Evaluate(“document.getElementsByName(‘” Attribute “‘)[” Index-1 “].outerHTML”).Value
Obj.Value:= Tab.Evaluate(“document.getElementsByName(‘” Attribute “‘)[” Index-1 “].value”).Value
Obj.InnerText:= Tab.Evaluate(“document.getElementsByName(‘” Attribute “‘)[” Index-1 “].innerText”).Value
Obj.TextContent:= Tab.Evaluate(“document.getElementsByName(‘” Attribute “‘)[” Index-1 “].textContent”).Value
} ;***********ID*******************
Else if (Format(“{:L}”,Method)=”id”){ ;Case-insensitive check to see if method = ID
Obj.OuterHTML:= Tab.Evaluate(“document.getElementById(‘” Attribute “‘).outerHTML”).Value
Obj.Value:= Tab.Evaluate(“document.getElementById(‘” Attribute “‘).value”).Value
Obj.InnerText:= Tab.Evaluate(“document.getElementById(‘” Attribute “‘).innerText”).Value
Obj.TextContent:= Tab.Evaluate(“document.getElementById(‘” Attribute “‘).textContent”).Value
} Else{ MsgBox fix Attribute- Valid values are: Name, Class, Tag, ID
return obj




Video Tutorial Automating Chrome with AutoHotkey: Getting InnerText, OuterHTML & Values

Automating Chrome with AutoHotkey: Setting InnerText, OuterHTML & Values

Web Scraping is Amazing!  Being able to automate Chrome with AutoHotkey has been a long-term goal of mine!  In this video I (quickly) walk through a function I wrote to leverage GeekDude’s Chrome.ahk class.  You can get the class here or read more about it on the AutoHotkey forum.

There’s lots more to do but I wanted to share this to help others get started using the above Class.  🙂

Here is the code I demonstrate in the below video where I demonstrate  setting text in Chrome with AutoHotkey.

#Include B:\Progs\AutoHotkey_L\AHK Work\WebPage\Chrome\Examples\Chrome.ahk  ;GeekDude Class ; https://github.com/G33kDude/Chrome.ahk  https://autohotkey.com/boards/viewtopic.php?t=42890
Tab:=Chm_Create_Instance("C:\Users\joe\AppData\Local\Google\Chrome\User Data\Default") ;Create instance using default Profile
Chm_Navigate(Tab,"http://the-automator.com") ;Navigate to a URL
Chm_Set(Tab,Method:="Class",Attribute:="s",Index:=2,Property:="v",Value:="Just a test")
;~ Chm_Set(Tab,Method:="Name",Attribute:="s",Index:=2,Property:="v",Value:="Just another test")
;~ Chm_Set(Tab,Method:="tag",Attribute:="Input",Index:=1,Property:="v",Value:="Just a test")
;~ Chm_Set(Tab,Method:="ID",Attribute:="cat",Index:=2,Property:="v",Value:="11")

;********************Chrome Set Property******* Propterty=  i=innerText v=Value  o=outerHTML****************************
  if (Format("{:L}",Method)="class"){  ;Case-insensitive check to see if method = Class
    if (Format("{:L}",Property)="o") ;If Property="o" then set OuterHTML
      Tab.Evaluate("document.getElementsByClassName('" Attribute "')[" Index-1 "].outerHTML='" Value "'").Value
    Else if (Format("{:L}",Property)="v") ;If Property="v" then set Value
      Tab.Evaluate("document.getElementsByClassName('" Attribute "')[" Index-1 "].value='" Value "'").Value
    Else if (Format("{:L}",Property)="i") ;If Property="i" then set innerText
      Tab.Evaluate("document.getElementsByClassName('" Attribute "')[" Index-1 "].innerText='" Value "'").Value
  } ;***********Tag*******************
  Else if (Format("{:L}",Method)="tag"){ ;Case-insensitive check to see if method = Tag
    if (Format("{:L}",Property)="o") ;If Property="o" then set OuterHTML
      Tab.Evaluate("document.getElementsByTagName('" Attribute "')[" Index-1 "].outerHTML='" Value "'").Value
    Else if (Format("{:L}",Property)="v") ;If Property="v" then set Value
      Tab.Evaluate("document.getElementsByTagName('" Attribute "')[" Index-1 "].value='" Value "'").Value
    Else if (Format("{:L}",Property)="i") ;If Property="i" then set innerText
      Tab.Evaluate("document.getElementsByTagName('" Attribute "')[" Index-1 "].innerText='" Value "'").Value
  } ;***********Name*******************
  Else if (Format("{:L}",Method)="Name"){ ;Case-insensitive check to see if method = Name
    if (Format("{:L}",Property)="o") ;If Property="o" then set OuterHTML
      Tab.Evaluate("document.getElementsByName('" Attribute "')[" Index-1 "].outerHTML='" Value "'").Value
    Else if (Format("{:L}",Property)="v") ;If Property="v" then set Value
      Tab.Evaluate("document.getElementsByName('" Attribute "')[" Index-1 "].value='" Value "'").Value
    Else if (Format("{:L}",Property)="i") ;If Property="i" then set innerText
      Tab.Evaluate("document.getElementsByName('" Attribute "')[" Index-1 "].innerText='" Value "'").Value
  } ;***********ID*******************
  Else if (Format("{:L}",Method)="id"){ ;Case-insensitive check to see if method = ID
    if (Format("{:L}",Property)="o") ;If Property="o" then set OuterHTML
      Tab.Evaluate("document.getElementById('" Attribute "').outerHTML='" Value "'").Value
    Else if (Format("{:L}",Property)="v") ;If Property="v" then set Value
      Tab.Evaluate("document.getElementById('" Attribute "').value='" Value "'").Value
    Else if (Format("{:L}",Property)="i") ;If Property="i" then set innerText
      Tab.Evaluate("document.getElementById('" Attribute "').innerText='" Value "'").Value
  } Else{ 	MsgBox fix Method- Valid values are: Name, Class, Tag, ID (case of text does not matter)
;********************Create instance and use a path to profile***********************************
 if !(Profile_Path){
 FileCreateDir, ChromeProfile ;Make sure folder exists
 ChromeInst := new Chrome("ChromeProfile") ;Create a new Chrome Instance
 try ChromeInst := new Chrome(Profile_Path) ;Create for profile lookup prfile by putting this in your url in Chrome chrome://version/
 return Tab := ChromeInst.GetTab() ;Connect to Active tab

;********************Navigate to page***********************************
;~ Chm_Navigate(Tab,"http://the-automator.com")
 Tab.Call("Page.navigate", {"url": URL}) ;Navigate to URL
 Tab.WaitForLoad() ;Wait for page to finish loading


Here’s the video walking through how to use the function with the above

Chrome.ahk Class to setting text in Chrome with AutoHotkey