Access DOM content of browser within Android runtime

Question

Say we have a standard login page like the one below:

We can access the HTML elements in the DOM using jQuery or plain JavaScript like this:

In other words, the way to get the pixel location of an element in a web page is quite simply by using element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

So we can do this from the console or programmatically from a web app.

Now, say we have an Android browser (Chrome/Mozilla/WebView) in the foreground at any time. I can retrieve the URL of the web page in the browser. In this case:

https://login.microsoftonline.com/

So my question is, given the URL of a login page, how do I similarly get access to the same input field on an Android browser?

I need to be able to access the HTML elements of a web page in an Android browser, and calculate its pixel location. As input, I have the URL of a web page in any Android browser.

I am talking about doing this from an Android app, within the Android runtime, i.e. programmatically using Java/JS code.

In case someone needs the DOM structure of the page as text, it can be obtained programmatically with the following (Java) code:

URL url;
HttpURLConnection urlConnection;
String DOMContent = null;

try {
    url = new URL("https://login.microsoftonline.com/");
    urlConnection = (HttpURLConnection) url.openConnection();
    int responseCode = urlConnection.getResponseCode();
    if(responseCode == HttpURLConnection.HTTP_OK){
        DOMContent = readStream(urlConnection.getInputStream());
    }

} catch (MalformedURLException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}

I need access to the HTML elements of a mobile web page within the Android runtime, just as we would in a web app or extension in a desktop browser. Or in other words, I need to be able to access/manipulate the DOM content of a mobile browser from an Android app.

How can this be done?

Update:

JavaScriptBridge looks promising. DocumentBuilder could help us convert the DOM into Java objects which may then be accessed/manipulated natively from Android.

References:

1. How to execute JavaScript on Android?

2. Calling JavaScript functions in WebView

3. How to run Javascript code in a background Service on Android

4. Is there any way to get access to DOM structure in Android's WebView?

5. Android webview Access the DOM

6. In Android Webview, am I able to modify a webpage's DOM?

7. Android WebViews and the JavaScript to Java bridge

8. Using Javascript bridge in android

9. Alternative way for communication between WebView and native

Answer 1

Use the following code after the page has been loaded (implement a custom WebViewClient and check the onPageFinished)

String query = "document.getElementById(\"WhateverElement\").getBoundingClientRect();"    

webView.evaluateJavascript(query, new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
            Log.d("LogName", s); // s has the getBoundingClientRect
        }
    });