How to Inject Custom CSS into a Website Displayed in a WebView on Android?

Incorporating CSS into Websites Using WebViews in Android

Injecting custom CSS into websites displayed within webviews can enhance the user experience. This article discusses a method for injecting CSS into a webpage displayed in a webview on an Android device.

Problem Description

Your goal is to modify the background color of www.google.com to red. You have attempted to inject CSS from a file named style.css located in the asset folder, but your code is not working.

Incorrect Code

The incorrect code you provided:

String html = "<style> src: url('file:///android_asset/style.css')</style>";

webView.loadData(html, "text/html", "utf-8");
webView.loadUrl("https://www.google.com");

Correct Solution

CSS cannot be directly injected into webpages; however, you can manipulate the page's DOM using JavaScript. Here is the corrected code:

// MainActivity.java

...

// 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);
    }
});

...

// 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();
    }
}

This code sets up a WebViewClient that waits for the page to finish loading before injecting CSS into the webpage. The injectCSS() method reads the CSS file from the asset folder, encodes it in Base64, and then uses JavaScript to append the stylesheet to the webpage's document head.

The above is the detailed content of How to Inject Custom CSS into a Website Displayed in a WebView on Android?. For more information, please follow other related articles on the PHP Chinese website!