How to Include Inline CSS within WebView with Source URL such as domain .com

I am trying to include some custom css within a webview on xamarin forms so the website being used can be customized with css styles, changing colors or other css style classes.

I have done this before using native code in Xcode and Android Studio, however this project is using xamarin forms and visual studio.

I believe what we need to do is include css within a custom webview renderer for android and ios. (would not be surprised if there was an easier way).

I have tried various methods being shown online and can not find a solution. Searching online there are some methods however they are not for xamarin forms.

Below is a snippet of my xaml:

<WebView x:Name="WebView" Source="domain .com/" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Navigating="WebViewTesti_OnNavigating"/>

Another snippet of my xaml.cs:

public WebViewPage()
        {
            InitializeComponent();
            CheckConnectivity();
            WebView.Navigated += WebView_Navigated;
        }

I am trying to have inline css styles load while using an external source url like google.com.

For those curious, this is how I have done it in xcode and android studio, but need it for Xamarin Forms:

Xcode:

ViewControllers file within xCode

let cssString = "*:not(input):not(textarea) { -webkit-user-select: none; -webkit-touch-callout: none; } footer{display:none;}"

Android Studio:

public void onPageFinished(WebView view, String url)

view.loadUrl("javascript: $('.footer,#sg-smartbanner').css('display','none')");
Sign In or Register to comment.