How to inject javascript in android webview like chrome javascript console

If you used to inject javascript to test your website on chrome. You can do so on android webview.

To achieve it, you need to add internet permission on your AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

Then, on your main_activity_layout.xml , add webview

<WebView android:id="@+id/web"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Next, on your MainActivity.java, instance webView and add following code.

final WebView webView = (WebView)findViewById(R.id.web);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient() {
  
  public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {     
   Log.e("browser",description);
   dialog.dismiss();
   }
 
    @Override
    public void onPageFinished(WebView view, String url) {
        // do your javascript injection here, remember "javascript:" is needed to recognize this code is javascript
        webView.loadUrl("javascript:document.write('hello')"); 
    }
     
    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
     // this method is needed to ignore SSL certificate errors if you are visiting https website 
        handler.proceed(); 
    }
 
});
 
webView.loadUrl("https://your_sites.com");  

Javascript is disabled in default, you need to enable it by calling setJavascriptEnabled method.

Javascript needed to be added after the page is finished loaded, otherwise javascript will be debug before the page loaded.

Event prevent default is not working

If you are working on key action with jquery and having problems on event.preventDefault is not working. Let’s me explain something simple to you.

event.preventDefault

As given example on docs, it shows us how it works on click action. For instances, prevent default action of anchor request the given url when clicked, action of submit button clicked to submit the form.
So far so good.

bind.( “keydown” , function( event ){ return false; } );

preventDefault is good but when it comes to key action such as enter key on submit form and tab key on switching the focus of input element. It lose it effects. You will found out that enter key are still performing default action and others key as well.
So… what is the solution? Adding return false on handler. Snippets below shows an simple example on this solution.

$(document).bind('keydown', function(e){ 
 return false; 
});

It’s works right!

What happens if you want only ‘enter’ key to be prevent default action. Here’s the solution.

$(document).bind('keydown', function(e){  
 var keyPressed = ('which' in e) ? e.which : e.keyCode;
   
 if( keyPressed == 13){         
  return false;
 }else{
  return true;
 }
  
});

Enter keycode is 13. Return true on event handler will allow the key to continue with default action and return false will stop event handler from continue to default action.

It’s still not working

There are a few quite common mistake make by people, especially for me. Either you too?

  • Errors inside the handler function

If there is errors (exp. syntax errors) occured inside the handler function, default action will be carry out even though there is return false in handler function. Don’t tried to ignore the errors that shows on your browser, it might be the core of your problems.

  • Mess up with JQuery instances and native Javascript instances

What does it means? Check it out with the differences at following codes.

$("ul").children("li")[0].html("");
$("ul").children("li")[0].innerHTML = "";

It is quite tricky problems, html() is jquery properties and innerHTML is javascript properties. But on this case, children(“li”) returns native javascript element array, so there is no method for html(“”) in returned element array. So, second code is the correct answer.

If you have do some checking by Object.keys( $(“ul”).children(“li”)[0] ); you will found out that the properties is different from jquery properties.

 

Conclusions

High level language doesn’t means you don’t have to understand the basic of it. Understanding basic sometimes will be the helper on solving problems.

Good luck