Develop Reference

Is there a way to have an webview on android where I can inject css before the page is loading?

I need to have a webview where I inject CSS to a webpage before it is loaded so that the injected css is applied to the loading page itself. On iOS webviews this is a native feature, but as far as I know, there is no feature like that in the android native webview.
I tried using flutters inAppWebview for that, but according to their doc at https://inappwebview.dev/docs/javascript/user-scripts/ they can't provide that feature because of the same reason and therefore the behavior isn't guaranteed.
Is there some alternative webview out there that provides this kind of feature?

You can modify or stylish web pages with your own custom CSS style sheet in Android web-view. To do that, we have just a CSS file and a few lines of code needed.
like~
#Override
public void onPageFinished(String URL, WebView view) {
super.onPageFinished(view, URL);
// Inject CSS when page is done loading
injectCSS();
});
// Load a web
webl.loadUrl("https://www.example.com");
}
// Inject CSS method: read style.css from assets folder
// Append stylesheet to document head
private void injectCSS() {
try {
InputStream inputStream = getAssets().open("black.css");
byte[] buffer = new byte[inputStream.available()];
inputStream.read(buffer);
inputStream.close();
String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
webl.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();
};
Hope it will helpful
reference - https://www.programmersought.com/article/54381014286/

You can add your CSS code in the public void onLoadResource(WebView view, String url) method then it will be applied before the page load is finished.
It will help you to prevent users to sees the actual webpage before your CSS gets applied.
below is the full code
webView.setWebViewClient(new MyWebViewClient());
String url = getString(R.string.blogURL);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(url);
WebViewClient class code
private class MyWebViewClient extends WebViewClient {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
#Override
public void onPageFinished(WebView view, String url) {
//if in the website used any javascript to interact with CSS then also add in this method, otherwise remove it from this method.
view.loadUrl("javascript:(function() { " +
"var h1 = document.getElementById('et_mobile_nav_menu').style.visibility='hidden'; " +
"})()");
}
#Override
public void onLoadResource(WebView view, String url) {
super.onLoadResource(view, url);
view.loadUrl("javascript:(function() { " +
"var h1 = document.getElementById('et_mobile_nav_menu').style.visibility='hidden'; " +
"})()");
}
#Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
Toast.makeText(BlogActivity.this, "Something is wrong while loading blog. Please try again", Toast.LENGTH_SHORT).show();
}
}
hope it will help someone

How to apply a javaScript function on MHTML files in android?

I'm new in coding and now I need some help.
I save my webView content with saveWebArchive() method that in kitkat and above this method save webView as mhtml format. Here is my code that I don't have any problem with this part:
File internalStorage = getApplication().getDir("MyArchive",Context.MODE_PRIVATE);
File webUrlPath = new File(internalStorage.getAbsolutePath());
String urlFileName = webUrlPath.toString();
html_path = urlFileName + File.separator + article.Articlehtml.hashCode() +
".mht";
webView.saveWebArchive(html_path);
When I want to load saved files in webView I use Javascript for change font color that for lower of kitkat it works perfectly but for kitkat and above Changes will not apply. Here another part of my code that I have problem with it:
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setDatabaseEnabled(true);
webView.getSettings().setJavaScriptEnabled(true);
File file = new File(html_path);
//for Kitkat and above
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
webView.loadUrl("file:///" + file);
}
else {
String rawData = null;
try {
rawData = getStringFromFile(html_url);
}catch (Exception e){
//e.printStackTrace();
}
webView.loadDataWithBaseURL(null, rawData,"application/x-webarchive-xml","UTF-8", null);
}
webView.setWebViewClient(new WebViewClient(){
public void onPageFinished(WebView view, String url){
view.setBackgroundColor(Color.parseColor("#212121"));
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) { webView.evaluateJavascript("document.body.style.setProperty(\"color\", \"white\");", null);
} else {
webView.loadUrl("javascript:document.body.style.setProperty(\"color\", \"white\");");
}
I expect to apply javaScript for saved webView content for kitkat and above, that's mean I can change font color of the mhtml file after loaded it in a WebView.
Thanks for your attention.

You can use webArchiveReader (check it in GitHub) for lower 19 API. For KitKat and above just load file in webView but mht format doesn't support JavaScript.

Finally, I find a solution for my problem. It's use of ColorMatrixColorFilter for invert colors when webView is loaded.

add data to webview html input in android

i have a webview, am trying to load a webpage as shown in figure attached below, there is a dropdown and two inputs in need to get it loaded by filling these values given by us in android webview
I have tried this code but its not working
final String sectionName = getIntent().getStringExtra("sectionName");
final String consumerNumber = getIntent().getStringExtra("consumerNumber");
final String billNumber = getIntent().getStringExtra("billNumber");
this.web = (WebView) findViewById(R.id.web);
this.web.loadUrl(Constants.Payment_URL);
this.web.getSettings().setJavaScriptEnabled(true);
this.web.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
Log.e("TAG", "sectionName:" + sectionName);
view.loadUrl("javascript:$($(\"#sectionCode option\")[" + sectionName + "]).prop('selected','selected');$('#ConsumerNo').val('" + consumerNumber + "');$('#billNo').val('" + billNumber + "');");
}
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
});
I need the web view get loaded with those values given in programenter image description here

Yes you can do that with the help of javascript.
You can inject javascript into your webview in many ways.
I would advice you to use JavaSCript injector library. You can find it here.
https://github.com/henrychuangtw/WebView-Javascript-Inject

Android load pdf in Webview locally from SDcard

I am trying to load a pdf from my sd onto webview.
I know it is not possible to direct load a pdf in webview. So I have a html file which renders the file and load the pdf.
sample from http://www.worldwidewhat.net/2011/08/render-pdf-files-with-html5/
Android Code:
final WebView webView = (WebView) findViewById(R.id.magazineWebView);
final ProgressBar spinner = (ProgressBar) findViewById(R.id.magazineSpinner);
webView.setBackgroundColor(0xFFFFFFFF);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setSaveFormData(true);
webView.getSettings().setBuiltInZoomControls(mgznCanZoom);
webView.getSettings().setDisplayZoomControls(false);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setPluginState(WebSettings.PluginState.ON);
webView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
spinner.setVisibility(View.GONE);
}
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
String webPath = "http://mysite/demo/pdf-js/index.htm"; //WORKS
String file_name2 = "pdf-js/index.htm"; //LOAD HTML BUT NOT PDF
String file_uri = MAGAZINE_FOLDER + file_name2;
String sdPath = Uri.parse("file://"
+ Environment.getExternalStorageDirectory()
+ file_uri).toString();
webView.loadUrl(sdPath); //webPath
Erros from logcat:
I/chromium: [INFO:CONSOLE(0)] "XMLHttpRequest cannot load file:///storage/emulated/0/MyApp/Magazine/pdf-js/compressed.tracemonkey-pldi-09.pdf. Cross origin requests are only supported for protocol schemes: http, data, chrome, https.", source: file:///storage/emulated/0/MyApp/Magazine/pdf-js/index.htm (0)
I/chromium: [INFO:CONSOLE(52)] "Uncaught TypeError: Cannot read property 'Symbol(Symbol.iterator)' of null", source: file:///storage/emulated/0/MyApp/Magazine/pdf-js/lib/pdf.js (52)
I/AppLifecycle: onActivitySaveInstanceState
But ->
If I store this file in the cloud and load it as above, it will work fine.
Anyone know why this wont load locally ?
Thanks guys.
P.S I know there are lot of these question online. I have looked around and not found a solution.
I am not able to use librarys like this https://github.com/JoanZapata/android-pdfview

Android Web-View : Inject local Javascript file to Remote Webpage

It has been asked many times before, I browsed through everything, no clear answers yet.
Question simplified: Is it possible to inject local Javascript file (from asset or storage) to remote webpage loaded in an Android Web-View? I know that it is possible to inject such files to local Webpages (Assets HTML) loaded in a Web-View.
Why do I need this to work? : To make browsing experience faster, by avoiding downloading of bigger files such as Js and CSS files every time. I want to avoid Web-View Caching.

There is a way to 'force' the injection of your local Javascript files from local assets (e.g., assets/js/script.js), and to circumvent the 'Not allowed to load local resource : file:///android_assets/js/script.js ...' issue.
It is similar to what described in another thread (Android webview, loading javascript file in assets folder), with additional BASE64 encoding/decoding for representing your Javascript file as a printable string.
I am using an Android 4.4.2, API level 19 Virtual Device.
Here are some code snippets:
[assets/js/script.js]:
'use strict';
function test() {
// ... do something
}
// more Javascript
[MainActivity.java]:
...
WebView myWebView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
myWebView.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
injectScriptFile(view, "js/script.js"); // see below ...
// test if the script was loaded
view.loadUrl("javascript:setTimeout(test(), 500)");
}
private void injectScriptFile(WebView view, String scriptFile) {
InputStream input;
try {
input = getAssets().open(scriptFile);
byte[] buffer = new byte[input.available()];
input.read(buffer);
input.close();
// String-ify the script byte-array using BASE64 encoding !!!
String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
view.loadUrl("javascript:(function() {" +
"var parent = document.getElementsByTagName('head').item(0);" +
"var script = document.createElement('script');" +
"script.type = 'text/javascript';" +
// Tell the browser to BASE64-decode the string into your script !!!
"script.innerHTML = window.atob('" + encoded + "');" +
"parent.appendChild(script)" +
"})()");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
});
myWebView.loadUrl("http://www.example.com");
...

loadUrl will work only in old version use evaluateJavascript
webview.evaluateJavascript("(function() { document.getElementsByName('username')[0].value='USERNAME';document.getElementsByName('password')[0].value='PASSWORD'; "+
"return { var1: \"variable1\", var2: \"variable2\" }; })();", new ValueCallback<String>() {
#Override
public void onReceiveValue(String s) {
Log.d("LogName", s); // Prints: {"var1":"variable1","var2":"variable2"}
}
});

Yes, you could use shouldInterceptRequest() to intercept remote url loading and return local stored content.
WebView webview = (WebView) findViewById(R.id.webview);
webview.setWebViewClient(new WebViewClient() {
#Override
public WebResourceResponse shouldInterceptRequest (final WebView view, String url) {
if (url.equals("script_url_to_load_local")) {
return new WebResourceResponse("text/javascript", "UTF-8", new FileInputStream("local_url")));
} else {
return super.shouldInterceptRequest(view, url);
}
}
});

Be careful using evaluateJavascript: if there is a syntax error or exception thrown in your javascript it will call your onReceiveValue with a null. The most common way to support both SDK 19 as well as lower seems to be like this:Fill form in WebView with Javascript
Also if you get terribly desperate for some kind of browser functionality (in my case, never could figure out how to get DRM to work well) you could use a bookmarklet within normal chrome, which works only if you type the bookmark name into the omnibox but does work and does inject javascript.
Also be aware that with the default WebView you can't use javascript alerts to test anything, they don't show. Also be aware that "video" by default (like html <video> tags) doesn't "really work" by default and also DRM video doesn't work by default, they're all configure options :\