Cefsharp winforms: Inject jquery into page

Question

I'm using ChromiumWebBrowser to load a website, and after page loaded, I'll execute some script

browser.ExecuteScriptAsync(script)

But that website not use jquery, so difficult to code my script. I want to inject jquery into that site to write my script easier. How can I do it? Thank you very much

EDIT:

I have had a jquery file in my computer. And I would like to add it to the page where I want to crawl data. I tried using LoadingStateChanged event, but not worked.

private void Browser_LoadingStateChanged(object sender, LoadingStateChangedEventArgs e)
{
    ChromiumWebBrowser browser = (ChromiumWebBrowser)sender;
    lbStatus.SetText(e.IsLoading ? "Loading..." : browser.Address);
    if (!e.IsLoading)
    {
        //Load jquery
    }
    else
    {

    }
}

Regretful

You can check if the page has access to jQuery, and if not add it from a CDN, if (!jQuery) { /* load from CDN */ }. See here for how to do the latter – Isar

How can I add script from local file? I'm trying use ChromiumWebBrowser to crawl data – Regretful

Answer 1

Set this code to script variable as string and then call browser.ExecuteScriptAsync(script)

(function () {
    // more or less stolen form jquery core and adapted by paul irish
    function getScript(url, success) {
        var script = document.createElement('script');
        script.src = url;
        var head = document.getElementsByTagName('head')[0],
            done = false;
        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function () {
            if (!done && (!this.readyState
                || this.readyState == 'loaded'
                || this.readyState == 'complete')) {
                done = true;
                success();
                script.onload = script.onreadystatechange = null;
                head.removeChild(script);
            }
        };
        head.appendChild(script);
    }
    getScript('http://code.jquery.com/jquery-latest.min.js', function () {
        if (typeof jQuery == 'undefined') {
            console.log('Sorry, but jQuery wasn\'t able to load');
        } else {
            console.log('This page is now jQuerified with v' + $.fn.jquery);

            $(document).ready(function () {
                alert(1);
                //here you can write your jquery code
            });
        }
    });
})();

Match

@Match by this code we can inject any JS file, right? – Reneta

@Reneta yes you can – Match

@Match I am able to inject other any JS file, thanks to your snippet but I also want to inject CSS, any idea? – Reneta

@Reneta you can replace document.createElement('script') with document.createElement("link") and set href property of <link> tag – Match

Awesome; thanks a lot for share... but; this could be blocked by some security procedure? – Servomechanism

@Servomechanism I don't think so because your script runs on the page like other scrips. – Match

I needed to change the protocol part of the jquery url, as such: location.protocol + '//code.jquery.com/jquery-latest.min.js' – Winnie

Answer 2

i push the entire jquery js-file as inline-code and works great:

browser.ExecuteScriptAsync(File.ReadAllText(@"content\jquery.1.11.1.min.js"));

reduces loading times...

Simplistic

what's not working? Is there an error message? Sometimes conflicts can occur if another jQuery version has already been loaded into the page. Otherwise I had never had any problems with this variant. – Simplistic

Answer 3

it's very easy :)

 string script_1 = "document.getElementsByTagName('head')[0].appendChild(document.createElement('script')).src = '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'";

browser.ExecuteScriptAsync(script_1);

and for call any custom jquery function or class:

 string script_2 = "$('.contact').css('color','#aabbcc');";

 browser.ExecuteScriptAsync(script_2);

Oxeyed