WebViewにJavaScriptを注入してAndroid側に値を渡す

WebViewで表示されているHTMLの内容から、特定の値をAndroid側で取得します。

考え方としてはHTMLページ内にAndroidからJavaScriptを注入して、JavaScriptからAndroidのコードを実行することで値のやり取りをします。

まずメインとなるコードから。

val webView: WebView = requireActivity().findViewById(R.id.web_view)
webView.webChromeClient = WebChromeClient()
webView.webViewClient = CustomWebViewClient()
webView.settings.javaScriptEnabled = true
webView.addJavascriptInterface(WebAppInterface(requireContext()), "Android")
webView.loadUrl(url)

• webChromeClientをセットしないとJavaScriptが実行できない（？）みたいです
• webViewClientにはカスタマイズしたWebViewClientをセットします
• webView.settings.javaScriptEnabledでJavaScriptを有効にします
• webView.addJavascriptInterfaceでJavaScriptからAndroidの名前でWebAppInterfaceのメソッドが呼べるように定義します

次に、WebViewからAndroidへJavaScript経由で実行できるメソッドを定義します。

class WebAppInterface(private val context: Context) {
    @JavascriptInterface
    fun showToast(toast: String) {
        Toast.makeText(context, toast, Toast.LENGTH_SHORT).show()
    }
}

ここでは渡された値でトーストを表示しているだけですが、ちゃんと値が渡されればもちろん他の用途にも使えます。
JavaScriptから呼べるようにするメソッドには@JavascriptInterfaceアノテーションを付ける必要があります。
また、メソッドはPublicにする必要があります。

次に、カスタマイズしたWebViewClientです。

class AuthWebViewClient : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        val script = "javascript:Android.showToast(document.getElementsById('hoge').value);"
        view?.loadUrl(script)
        super.onPageFinished(view, url)
    }
}

ここではonPageFinishedをオーバーライドして、JavaScriptコードを注入しています。
例のJavaScriptコードはページ内にid="hoge"が存在する前提でvalueを取得します。
それを上で定義したAndroid.showToastに渡しています。

以上で、HTML上のid="hoge"のvalueでToastが表示されます。