Использование пользовательских стилей CSS и сценариев JS в Android WebViews

Использование собственных стилей CSS и сценариев JS в Android WebViews

Android WebViews позволяет загружать пользовательский код CSS и JavaScript в содержимое загруженной веб-страницы.
Все, что вам нужно сделать, это переопределить onPageFinished функцию WebViewClient, которую вы предоставляете своему WebView, и вызвать loadUrl с вашим пользовательским кодом.

Лучший способ приблизиться к этому - создать соответствующие узлы JavaScript для вашего кода; узел style для CSS и узел script для JavaScript. Давайте сейчас напишем эти сценарии, ладно?

Следующий код JavaScript создает новый узел в модели DOM, содержащий предоставляемый нами стиль CSS.

var node = document.createElement('style');

node.type = 'text/css';
node.innerHTML = 'MY_CSS_STYLE';

document.head.appendChild(node);

Следующий код JavaScript создает новый узел в DOM, содержащий сценарий JS, который мы ему предоставляем.

var node = document.createElement('script');

node.type = 'text/javascript';
node.innerHTML = 'MY_JS_SCRIPT';

document.body.appendChild(node);

Чтобы заставить приведенный выше код работать и правильно создавать узлы после загрузки содержимого веб-страницы, нам нужно обернуть его самозапускающейся функцией JavaScript. Это тоже несложно.

javascript:(function() { MY_JS_CODE })()

Так как же объединить все вышеперечисленное и внедрить код в Android WebView?
Возвращаясь к функции onPageFinished реализации WebViewClient, давайте добавим очень простой стиль, который придаст Google темную тему; код находится в Kotlin с использованием многострочного строкового оператора.

override fun onPageFinished(view: WebView, url: String) {
    val code = """javascript:(function() { 
    
        var node = document.createElement('style');

        node.type = 'text/css';
        node.innerHTML = 'body {
            color: white;
            background-color: black;
        }';

        document.head.appendChild(node);
     
    })()""".trimIndent()

    loadUrl(code)
}

Сделанный!

Вы можете найти вышеуказанные функции в аккуратной небольшой библиотеке, которую я разработал, под названием VeinView. Он объединяет все вышеперечисленное в настраиваемый WebView и настраиваемый клиент и позволяет загружать строковый код или RAW-ресурсы Android.

Счастливых праздников!