Inject CSS to a Site with Webview in Android

inject CSS to a site with webview in android

You can't inject CSS directly however you can use Javascript to manipulate page dom.

public class MainActivity extends ActionBarActivity {

  WebView webView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    webView = new WebView(this);
    setContentView(webView);

    // Enable Javascript
    webView.getSettings().setJavaScriptEnabled(true);

    // Add a WebViewClient
    webView.setWebViewClient(new WebViewClient() {

        @Override
        public void onPageFinished(WebView view, String url) {

            // Inject CSS when page is done loading
            injectCSS();
            super.onPageFinished(view, url);
        }
    });

    // Load a webpage
    webView.loadUrl("https://www.google.com");
}

// Inject CSS method: read style.css from assets folder
// Append stylesheet to document head
private void injectCSS() {
    try {
        InputStream inputStream = getAssets().open("style.css");
        byte[] buffer = new byte[inputStream.available()];
        inputStream.read(buffer);
        inputStream.close();
        String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
        webView.loadUrl("javascript:(function() {" +
                "var parent = document.getElementsByTagName('head').item(0);" +
                "var style = document.createElement('style');" +
                "style.type = 'text/css';" +
                // Tell the browser to BASE64-decode the string into your script !!!
                "style.innerHTML = window.atob('" + encoded + "');" +
                "parent.appendChild(style)" +
                "})()");
    } catch (Exception e) {
        e.printStackTrace();
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
  }
}

Android - How to inject custom css into external webpage in webview

String html = ... // load manually
// insert the style to <head>
 webview.loadData(html, "text/html", null);

Android Webview inject CSS via Javascript

I manage to make it work, i just needed to call the function after creating it.

private void carregaCSS() {
        final String extraStyles;       
        extraStyles= "javascript: "
        + "function css(){ "
            + " document.querySelectorAll('div.live-search-container')[0].style.display = 'none';"
            + " document.querySelectorAll('div#top-bar')[0].style.display = 'none';"
            + " document.querySelectorAll('span#btn-mobile-toggle')[0].style.display = 'none';"
            + " document.querySelectorAll('div#cart')[0].style.display = 'none';"
            + " document.querySelectorAll('div.col-md-7')[0].style.display = 'none';"
            + " document.querySelectorAll('div.breadcrumb')[0].style.display = 'none';"
        + "}" 
        +"css();"

        +"";
        mWebView.loadUrl(extraStyles);
        }
}

Rendering HTML in a WebView with custom CSS

You could use WebView.loadDataWithBaseURL

htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + htmlData;
// lets assume we have /assets/style.css file
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);

And only after that WebView will be able to find and use css-files from the assets directory.

ps And, yes, if you load your html-file form the assets folder, you don't need to specify a base url.

Inject CSS to a Site with Webview in Android

inject CSS to a site with webview in android

Android - How to inject custom css into external webpage in webview

Android Webview inject CSS via Javascript

Rendering HTML in a WebView with custom CSS

Related Topics

Leave a reply