Inject JavaScript into web page using Scriptable

I’m developing a shortcut to open a list of Instagram profiles one after the other, to open the last post and click on the Like button.
The shortcut works and here it is

Imgur

Imgur

Imgur

Imgur

Imgur

If I want to get the last post from the profile and click on the Like button, I have to use JavaScript.
I already have JavaScript scripts available.
I’ve been working on Scriptable for a while but I need help.
How can I insert JavaScript in the newly opened web page?
This is my script at the moment

(https://imgur.com/xfN1sZZ)

Opens a page, whose URL is generated by the Shortcut app.
When the page is open, I want to inject javascript to perform some actions.

For that you have to use WebView:

let wv = new WebView();
await wv.loadURL(url);
await wv.evaluateJavaScript("your script here as string");

The first line creates the WebView instance, the second line loads your website and waits until it has finished and the third line executes your javascript.

1 Like

Thanks for your reply!
I’m trying the code right now but I’m having this issue: you told me to insert the JavaScript code as string after evaluateJavaScript, but my JavaScript has " inside the code, and that makes problems with the " of the string. How can I solve it?

If you don’t have the ` character in your code, then you can use it instead of the ". The ` denotes a template string.

Otherwise if you have that character in your script, you need to escape every one of them with a backslash \

Ok cool! It’s working now!
My error was indenting the code going on new lines.
Now I have another question to ask you: I think evaluateJavaScript is working but the console gives me an error “null is not an object”.
My JavaScript looks for objects in the page and I guess that this problem is because the objects cannot be found. Any idea why this is happening? If I write the exact same code on my browser’s console, it works perfectly…

2 Likes

It’s really hard and often impossible, to debug code without being able to see it and test run it.

Perhaps you could share all of your code and parameters for this issue; but as runnable code/content, not images?

1 Like

I’m sorry, you’re right.
This is my shortcut
https://www.icloud.com/shortcuts/24bcd640dd21462282da178f3ebbc2f9
Practically, when prompted, you type one or more instagram username with or without @, the shortcut opens the Scriptable script and passes the username.

This is my script at the moment

let string1 = URLScheme.parameter("username");
let url = "http://m.instagram.com/";
let wv = new WebView();
await wv.loadURL(url);
await wv.evaluateJavaScript('function classepost()
{ var elemento = ["a href", "KL4Bh"];
var i = 0;
for (i = 0; i < elemento.length; i++)
{ var elementofoto = document.querySelector("." + elemento[i]);
if (elementofoto != undefined) { break; } } return elementofoto;}
function aprifoto() { var clickfoto = classepost(); clickfoto.click();}
aprifoto();');

The script gets the username from the shortcut, opens the Instagram page combining the Instagram URL and the username and then injects JavaScript into this page.
The JavaScript code searches for the first element in the page called “KL4Bh”, that is the last photo posted by the user, and opens the photo.
The error I get is “null is not an object”, I think this is because the element in the page cannot be found.

Actually I have to insert another piece of code that clicks the like button on the just opened photo, I already have the JavaScript code working, it’s just a matter of understanding how to insert the code in Scriptable and make it working with shortcuts.

You don’t seem to use string1 in your instagram URL, but you say you are combining the URL and user name. If I directly append an Instagram user name after the URL, then the error no longer occurs. Maybe that’s what’s missing?

1 Like

Ok I made a bad impression hahahaha
I’m sorry I forgot to use string1, I made lots of changes to the code that made me forgot to use the variable.
To use it I changed await wv.loadURL(url);
into
await wv.loadURL(url + string1);
Now I don’t have the error anymore, but is there a way to show the web page when injecting javascript?
In this case seeing the web page I can understand if the javascript is working properly

Take a look at web view -present.

Thank you!
Something strange is happening: when I run the script in Scriptable, the wheel at the top of the interface keeps rotating and nothing happens.
Has anyone had the same problem?

@sylumer
It’s working now, but the result is the same: null is not an object…
Do you have any idea? It looks like the search for the object on the page returns no result…

Can you check what is accessible and incrementally traverse the DOM or dump out the actual content at the point you are evaluating? Is the reason it is null simply that the content isn’t there.

For example one page I access gives me one result if I await and load, but I different one if it can actually load into a web view and be visible.