Inject CSS/JS Libraries into WebView


#1

I guess the simplest way to explain my problem is this: I want to create a preview of another page using the WebView element, however, I need to inject some basic things like CSS and JS libraries (i.e. jQuery and MaterializeCSS). My current attempt uses a function which is provided with some identifier for jQuery to use to get the element and then I attempt to go from there.

At that point, I call executeJavaScript('document.write(' + head + ')') inside of addEventListener('did-start-loading', ...) (head is the variable with all the basic <head> HTML). I also tried logging in the same area, so I know the code is being called, but the head code is not being written to the WebView contents.

Anyways, the full code snippet is below. Thanks in advance!

$frame = $frame[0]

    $frame.addEventListener('did-start-loading', function() {
      $frame.executeJavaScript('document.write(' + head + ')')

      if ( log != false ) console.log("Added resources to webview " + ident)
    })

console.log("Preparing WebView")

The only thing I haven’t mentioned is that ident is the string provided to the function in the first place, typically the WebView element’s ID.


#2

I’ve not tried this before, but would you not inject your items after it finished loading? I think the “start loading” event occurs at the very beginning of the load process, before there is even anything to inject into yet.


#3

If you are trying to inject something into page which is rendered by webview then you can use preload tag.

<webview src="https://www.github.com/" preload="./test.js"></webview>

test.js

    window.onload = function translate() {
        var script = document.createElement("script");
        script.src = "https://code.jquery.com/jquery-2.1.4.min.js";
        script.onload = script.onreadystatechange = function() {
            $(document).ready(function() {
                    var temp = $('yourscript');
                    $( "<div id='yourscript' style='z-index: 10000065000;  float: left;position: absolute;left: 0px;top: 0px;background-color: white;'></div>" ).prependTo("body");
                    $("#id").prepend(temp);
            });
        };
        document.body.appendChild(script);

    };

I am using this in my project it is working fine


#4

I gave that a try, simply modifying the code to my needs, and everything worked great. However, it is a bit inconvenient to have to place the code in an entirely different file. Is it possible to somehow call a function instead? I’ll probably use the above method for now, however, as I mentioned a simple function would be nice.


#5

AFAIK preload script has to be separate file, All the content of that preload file will be injected into target webpage.I dont think there is a way to inject only function.


#6

A ping pong way , if you don’t want to put the code concerning css and js in a preload file is to use a small preload js file which will send a message to your browser code. This code could stay the same and doesn’t need to be modify. (perhaps that is the reason you don’t like the separate file idea). In the browser js in response to the IPC send by the injected code you can invoque ExecuteJavascript and it should work. Any way injecting a littel bit of code.