Kotlin - Inject JavaScript into WebView to fill in form

Question

I am trying to fill in a form in a webpage displayed inside a webview.

So far, I managed to hide the original webpage login button using the same JS code I used on the iOS version of the app:

senseLoginButtonDisplayStatus = "document.getElementById('loginbtn').style.display = 'none';"
wvMainView!!.loadUrl("javascript:(function f() { ${senseLoginButtonDisplayStatus} } )()")

However, I am not able to fill in the form. The JS code works fine in the iOS version of the app and in the browser console but not here:

override fun onPageFinished(view: WebView?, url: String)
{
    val currentURL: String? = wvMainView!!.url

    if(userIsLoggedIn == false)
    {
        userIsLoggedIn = true
        checkLoginURL()
    }

    if(currentURL!!.contains("targetId"))
    {
        senseLoginButtonDisplayStatus = "document.getElementById('loginbtn').style.display = 'none';"
        wvMainView!!.loadUrl("javascript:(function f() { ${senseLoginButtonDisplayStatus} } )()")
    }
}


fun checkLoginURL()
{
    val currentURL: String? = wvMainView!!.url
    val result: Boolean? = currentURL!!.contains("form")

    if(result == true)
    {
        senseSubmitJS = "document.getElementById('login-form').submit();"
        senseUserJS = "document.getElementsByName('username')[0].value = '${serverSettings!!.serverUser}';"
        sensePassJS = "document.getElementsByName('pwd')[0].value = '${serverSettings!!.serverPassword}';"

        Log.i("MyApp","MainActivity > checkLoginURL > ${senseSubmitJS}")
        Log.i("MyApp","MainActivity > checkLoginURL > ${senseUserJS}")
        Log.i("MyApp","MainActivity > checkLoginURL > ${sensePassJS}")

        wvMainView!!.loadUrl("javascript:(function f() { ${senseUserJS} } )()")
        wvMainView!!.loadUrl("javascript:(function f() { ${sensePassJS} } )()")

        btnLogin!!.isVisible = true
    }
}

This is what the 3 Logs print. This works in iOS and in the browser console.

MainActivity > checkLoginURL > document.getElementById('login-form').submit();
MainActivity > checkLoginURL > document.getElementsByName('username').value = 'domain\username';
MainActivity > checkLoginURL > document.getElementsByName('pwd')[0].value = 'password';

I'm not exactly sure what am I doing wrong. It's been a while since I've used Kotlin so I'm pretty sure it's something simple that I'm missing but I still can't figure it out.

JS is enabled inside my webview and I did try to follow some guides, trying to figure it out.

wvMainView!!.settings.domStorageEnabled = true;
wvMainView!!.settings.javaScriptEnabled = true
wvMainView!!.settings.loadWithOverviewMode = true
wvMainView!!.settings.useWideViewPort = true

https://medium.com/@skywall/inject-js-into-androids-webview-8845fb5902b7

There is also someone else asking the exact same question and the answer is exactly what I am trying to do but...

fill form programmatically in Android Webview - JavaScript

Any thoughts?

score 1 · Answer 1 · answered Jun 23 '21 at 08:56

Finally got it working. Same code, different approach.

override fun onPageFinished(view: WebView?, url: String)
{
    Log.i("MyApp","MainActivity > onPageFinished")

    val currentURL: String? = wvMainView!!.url

    if(currentURL!!.contains("form"))
    {
        if(userIsLoggedIn == false)
        {
            userIsLoggedIn = true
        }

        senseSubmitJS = "document.getElementById('login-form').submit();"
        senseUserJS = "document.getElementsByName('username')[0].value = '${serverSettings!!.serverUser}';"
        sensePassJS = "document.getElementsByName('pwd')[0].value = '${serverSettings!!.serverPassword}';"

        btnLogin!!.isVisible = true

        view?.let { webView ->
            webView.evaluateJavascript(senseUserJS + sensePassJS) { result ->
                Log.i("MyApp", "form > ${result}")
            }
        }
    }
}
wvMainView!!.loadUrl(url!!)

Kotlin - Inject JavaScript into WebView to fill in form

1 Answers1