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

Question

Suppose I load a 3rd party URL through webview.

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        webview = (WebView) findViewById(R.id.webview);
        webview.setWebViewClient(new HelloWebViewClient());
        webview.getSettings().setJavaScriptEnabled(true);
        webview.setWebChromeClient(new MyWebChromeClient());
        webview.loadUrl("http://ebay.com");         
    }

Is it possible for me to inject something into this WebView to replace the ebay logo with my own?

Replacing someone else's logo with your own sounds like a very bad idea. — titaniumdecoy, Feb 08 '10 at 01:03
It's just an example of what webview can and cannot do. I actually want to remove all tags from that third party site, Linkedin (since that site has a bug). — TIMEX, Feb 08 '10 at 01:04
Same kind of question here: http://stackoverflow.com/questions/7309123/android-load-and-execute-javascript-on-external-webpage — Gilbou, Sep 05 '11 at 14:25
Yes you can do this. See this question of mine for example becouse I was doing something similar. Keep in mind that doing stuff like this might be against terms and conditions of the service you are showing the page for. In best case it will be in a gray area but I agree with you that some websites are sometimes just broken and your users will appreciate the "fixing". http://stackoverflow.com/questions/19522716/can-you-customise-google-consent-page-look-when-using-ouath — Igor Čordaš, Apr 23 '14 at 21:31
@Error454 lol. true. although, to be fair, he didn't ask anything about a Stack either XD — David T., Nov 30 '15 at 23:26

Carlos Rendon · Answer 1 · 2015-11-28T21:38:11.890

45

To expand on CommonsWare's correct answer:

WebView webview = new WebView();
webview.setWebViewClient(new WebClient());
webView.getSettings().setJavaScriptEnabled(true);
webview.loadUrl("stackoverflow.com");

then in WebClient:

public class WebClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }

    @Override
    public void onPageFinished(WebView view, String url) 
    {       
        // Obvious next step is: document.forms[0].submit()
        view.loadUrl("javascript:document.forms[0].q.value='[android]'");       
    }
}

In a nutshell, you wait for the page to load. Then you loadUrl("javascript:[your javascript here]").

edited Nov 28 '15 at 21:38

answered Feb 15 '11 at 23:45

Carlos Rendon

6,174
5
34
50

2

Make sure you set javascript enabled to true on your webview or you'll waste a lot of time trying to debug this like I did. – AdamMc331 Nov 27 '15 at 19:40
Why do you need to override shouldOverrideUrlLoading? – Bogdan Verbenets Apr 29 '16 at 19:45
1

I didn't need the `shouldOverrideUrlLoading` and instead of `view.loadUrl` looks like you need `view.evaluateJavascript("document.forms[0].q.value='[android]'", null)` – arekolek Jan 17 '19 at 21:58
Based on this answer I was able to come up with the following, which shows how to poke DOM to initialize fields on a form. https://github.com/slogan621/tscharts-register/blob/master/app/src/main/java/org/thousandsmiles/tschartsregister/CURPWebViewClient.java - thanks for the great answer that got me started. – slogan621 Dec 10 '20 at 23:13

score 13 · Answer 2 · answered Feb 08 '10 at 03:01

13

Not directly. You can invoke Javascript code in the context of the current Web page, via loadUrl(), much like a bookmarklet does. However, you do not have direct access to the DOM from Java code.

answered Feb 08 '10 at 03:01

CommonsWare

986,068
189
2,389
2,491

Although the direct access part is true there is a full indirect access to Dom, using javaScriptBridge just pass the full Html and you have the whole page. This page can then be modified in any way via string manipulations and reloaded back to webview. – Igor Čordaš Apr 23 '14 at 21:27

score 1 · Answer 3 · answered Apr 23 '22 at 07:43

Since API level 19 there is a handy function evaluateJavascript (String script, ValueCallback<String> resultCallback) that to me makes more sense to use (but I guess the result will be the same). If you just want to run som javascript in the WebView (to modify the DOM for example) the resultCallback can be left empty.

webView = findViewById(R.id.webView);
webView.setWebViewClient(new WebViewClient(){
    @Override
    public void onPageFinished(WebView view, String url) {
        webView.evaluateJavascript(
        "const images = document.getElementsByTagName(\"img\");\n" +
        "for(var i=0; i<images.length; i++){\n" +
        "    if(images[i].alt == \"eBay Logo\"){\n" +
        "        images[i].src = \"my_logo.png\";\n" +
        "    }\n" +
        "}", null);
    }
});
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://ebay.com");

score -21 · Answer 4 · edited Jun 08 '11 at 22:04

-21

WebView webview = new WebView();

//Maybe need to set to enabled javascript?
webView.getSettings().setJavaScriptEnabled(true);

webview.setWebViewClient(new WebClient());

webview.loadUrl("stackoverflow.com");

edited Jun 08 '11 at 22:04

DarthJDG

16,511
11
49
56

answered Jun 08 '11 at 10:22

alphard

1
1

This doesn't have anything to do with the question. – Igor Čordaš Apr 23 '14 at 21:28

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

4 Answers4

Linked