What is the process for adding extra CSS to a webpage displayed in WebView2?

Question

What is the process for adding extra CSS to a webpage displayed in WebView2?

Currently, I am utilizing the Webview2 control within a winform application. My goal is to enhance the behavior of the loaded page by injecting additional CSS code when a specific URL is being displayed in the browser control. Specifically, I aim to implement a feature that adds a background color when hovering over any elements on the page.

*:hover {
    background-color: #205081 !important;
}

Is there a way for me to insert this styling directly into the current document's URL?

Although I have been able to achieve similar functionality using Javascript, my attempts to accomplish this through CSS have been unsuccessful so far. Any guidance or tips would be highly appreciated.

 string jsHoverScript = File.ReadAllText("hoverStyle.js");
 await webBrowser.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(jsHoverScript);

javascript c#css winforms webview2

Answer 1

Answer №1

As stated in the documentation:

AddScriptToExecuteOnDocumentCreatedAsync
function adds the provided JavaScript to a list of scripts that will be executed after the global object is created, but before the HTML document is parsed and before any other script included by the HTML document is run.

It's important to note that when your script runs, the DOM tree has not been parsed yet, hence any CSS edits won't take effect. Ensure that your script is executed only after the DOM tree has been fully parsed.

Option1
Use window.addEventListener in JavaScript to make sure your actual code runs after the DOM tree is fully parsed.

window.addEventListener('load', 
  function() { 
    // Your main logic here
  }, false
);

Option2

To ensure C# code executes after the DOM content is fully loaded, consider using the event CoreWebView2.DOMContentLoaded or similar alternatives. Then, utilize CoreWebView2.ExecuteScriptAsync to execute your main logic.

For further details, check out the following links:
AddScriptToExecuteOnDocumentCreatedAsync Documentation

CoreWebView2.DOMContentLoaded Documentation

CoreWebView2.ExecuteScriptAsync Documentation

Answer 2

As stated in the documentation:

AddScriptToExecuteOnDocumentCreatedAsync
function adds the provided JavaScript to a list of scripts that will be executed after the global object is created, but before the HTML document is parsed and before any other script included by the HTML document is run.

It's important to note that when your script runs, the DOM tree has not been parsed yet, hence any CSS edits won't take effect. Ensure that your script is executed only after the DOM tree has been fully parsed.

Option1
Use window.addEventListener in JavaScript to make sure your actual code runs after the DOM tree is fully parsed.

window.addEventListener('load', 
  function() { 
    // Your main logic here
  }, false
);

Option2

To ensure C# code executes after the DOM content is fully loaded, consider using the event CoreWebView2.DOMContentLoaded or similar alternatives. Then, utilize CoreWebView2.ExecuteScriptAsync to execute your main logic.

For further details, check out the following links:
AddScriptToExecuteOnDocumentCreatedAsync Documentation

CoreWebView2.DOMContentLoaded Documentation

CoreWebView2.ExecuteScriptAsync Documentation

What is the process for adding extra CSS to a webpage displayed in WebView2?

Answer №1

Similar questions

When utilizing ng-show to display a form, the value of $dirty is constantly false

"Trouble arises when event listener fails to function following an append operation

Tips for effectively passing generics to React Hooks useReducer

Exploring the power of NodeJS modules through exports referencing

Discovering the number of words, extracting specific words, and transferring them to a URL using JavaScript

swap = with u003d in c sharp

Setting a default currency value (either in dollars or euros) in an input field

Guide on accessing the fastify application instance within an imported module

What is the best method to retrieve the current time in minutes using the Timer component?

Assign a value to the cookie based on the input from the form

Using PHPs nth-child in media queries

External vendor scripts such as JavaScript and jQuery are not functioning properly after being rendered in a ReactJS environment

The concatenation function in JavaScript does not seem to be functioning properly with JSON

No constructors are defined for the 'System.Data.SqlClient.SqlDataReader' class

Consistent Errors with AJAX POST Requests Despite CORS Enablement

Adjusting font size according to the font style selected

Tips for achieving the Bootstrap 5 Modal Fade Out effect without using jQuery or any additional plugins apart from Bootstrap

retrieving information from a secondary window

Tips on confirming the completion of my form when the next button is pressed

Streamline email error management within nested middleware functions