Control Chrome From Script Kit using Apple Events
Chrome allows developers to execute JavaScript using Apple Events. When you enable this feature, you can write scripts that can access and modify the page you're currently browsing.
You can get the site's contents, update storage, or do any action you would typically do through an extension of the Chrome Dev Tools.
let value = await applescript(`
tell application "Google Chrome" to tell window 1
get execute active tab javascript "
${js}
"
end tell
`)
Instructor: [0:00] With Chrome, you need to go into view developer and enable allow JavaScript from Apple events or else none of this will work. In Chrome, we can use the dev tools to modify our site in any way.
[0:12] The simplest thing we can do is just get the inner text, so the entire content of the site. We can do these exact same actions in Script Kit. I'll say get site content, create this script. This requires some AppleScript, which I'll paste in and explain. The AppleScript helper will run this.
[0:31] It'll tell Google Chrome to get the first window, which is focused. Then execute on that tab the following JavaScript and then return that. Inside of here, we want to add some JavaScript, which we want to execute.
[0:47] The JavaScript we want to execute was just JS and then document.body.InnerText. From here, we can await div just to display the value that comes back. This will return a string.
[1:03] We'll go ahead and run getSiteContent. Hit Enter. You can see the raw content of the site. We could also do this using things like querySelector(), do querySelectorAll(). Make sure to use single quotes since we're operating inside of double quotes down here.
[1:27] We can grab all the h2s, and then let me format this a little bit. We'll convert this into an array. Then map the elements and get the element's inner text. Then join to turn it into a string. Make sure and use those single quotes again. Then we'll run our getSiteContent.
[1:50] Hit Enter and you can see all of the h2s. It's just a string and we could have joined in a way to split on the string or however you want to access the data. We can also do things like access the local storage, produce set item. We'll say, "Script Kit is awesome."
[2:13] Then we'll run getSiteContent again. This time it didn't return a value so you see missing value as the string there. If we run local storage and getItem Script Kit from here, hit Enter, you'll see is awesome.
[2:32] You have full control to do whatever you want with the site that you could do in the Chrome Dev tools.