Access DOM content of browser within Android runtime

89    1 year ago

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

enter image description here

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

enter image description here

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.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:

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?

enter image description here

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("");
    urlConnection = (HttpURLConnection) url.openConnection();
    int responseCode = urlConnection.getResponseCode();
    if(responseCode == HttpURLConnection.HTTP_OK){
        DOMContent = readStream(urlConnection.getInputStream());

} catch (MalformedURLException e) {
} catch (IOException e) {

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

How can this be done?


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


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

Answers { 1 }
1 year ago

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>() {
        public void onReceiveValue(String s) {
            Log.d("LogName", s); // s has the getBoundingClientRect