在通过 Safari App Extension 注入的 JavaScript 中以编程方式单击 HTML 链接

Question

I'm writing a Safari App Extension to automate logging into a Citrix web portal. My injected JavaScript needs to do two things. First, there is an HTML form to submit (with name/password). That works just fine and takes me to another page with an HTML anchor that needs to be clicked. The problem is that I am unable to programmatically click on the HTML anchor link.

// This is the `script.js` injected by my Safari App Extension

document.addEventListener("DOMContentLoaded", function(event) {


    if (document.URL.includes("IdentityFederationPortal")) {
        document.getElementById("UserId").value = "..." // my login
        document.getElementById("Password").value = "..." // my password
        document.getElementById("submit").click() // <- works correctly
    }

    // The `.click()` method above works just fine, I assume because it is used on a form button.


    if (document.URL.includes("TPDCWeb")) {

        var loginLink = document.querySelector("#plugin-assistance-download > div > div > div > div.footer > a.pluginassistant-skiplink.web-screen-link._ctxstxt_SkipToLogon._ctxsattr_title_SkipToLogonTip");

        console.log(loginLink) // console shows loginLink is assigned the correct HTML anchor

        loginLink.click() // does not work!
    }
});

Notes:

1. The actual HTML for the anchor link I need to programmatically click on is: <a class="pluginassistant-skiplink web-screen-link _ctxstxt_SkipToLogon _ctxsattr_title_SkipToLogonTip" href="#" title="Click here to skip to log on">Log on</a> I am not familiar enough with web programming to understand what is happening when a regular user clicks on that link, which by simple inspection doesn't seem to lead anywhere (and has a NULL onClick property).

2. I've seen scattered references suggesting that jQuery might be useful here, but I also can't figure out how to inject jQuery into a Safari App Extension script. My attempts so far lead to the Can't find variable $ error when I try to use jQuery.

Answer 1

With the help of user1538301 I now have this working, just by delaying the .click() method invocation by 4 seconds. As was pointed out, presumably I was trying to 'click' the link before the page's own JavaScript had finished its business and assigned an onclick handler or some such. I'm sure there's a more elegant way to deal with this, but the simple time delay gets the job done for me for now.

if (document.URL.includes("TPDCWeb")) {

    function getAndClickLink() {
        var loginLink = document.querySelector("#plugin-assistance-download > div > div > div > div.footer > a.pluginassistant-skiplink.web-screen-link._ctxstxt_SkipToLogon._ctxsattr_title_SkipToLogonTip");

        loginLink.click()
    }

    setTimeout(getAndClickLink, 4000);


}