inject jquery into puppeteer page

Question

I'm trying to inject jquery into my puppeteer page because document.querySelector doesn't cut it for me:

async function inject_jquery(page){
  await page.evaluate(() => {
    var jq = document.createElement("script")
    jq.src = "https://code.jquery.com/jquery-3.2.1.min.js"
    document.querySelector("head").appendChild(jq)
  })
  const watchDog = page.waitForFunction('window.jQuery !== undefined');
  await watchDog;
}

The result is it mostly times out. Does anyone have a solution?

Answer 1

I have used page.addScriptTag to inject js files.

...
await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'})
...

page.addScriptTag - documentation

Working example using puppeteer: 0.12.0

import { launch } from 'puppeteer'
(async () => {
    const browser = await launch({headless: false});
    const page = await browser.newPage();
    await page.goto('https://example.com', {waitUntil: 'networkidle'});
    await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'});
    await page.close();
    await browser.close();
})();

Answer 2

For those looking to inject a local copy of jQuery:

await page.addScriptTag({path: require.resolve('jquery')})

Answer 3

I am doing this:

await page.addScriptTag({ url: 'https://code.jquery.com/jquery-3.2.1.min.js' });
const title = await page.evaluate(() => {
  const $ = window.$; //otherwise the transpiler will rename it and won't work
  return $('h1 > span').text();
});

Answer 4

This works for me.

async function inject_jquery(page){
      await page.evaluate(() => {
        var jq = document.createElement("script")
        jq.setAttribute('type','text/javascript');
        jq.src = "https://code.jquery.com/jquery-3.2.1.min.js"
        return new Promise( (resolve) => {
            jq.addEventListener("load", ()=> {
                resolve();
            });
            document.getElementsByTagName("head")[0].appendChild(jq);
        });
      })
      const watchDog = page.waitForFunction('window.jQuery !== undefined');
      await watchDog;
    }

Answer 5

Some sites won't allow you to inject a script tag, so you'll have to inject the contents of it before it'll allow you to do so. If that's the case you can use the evaluate method to grab the scripts contents from a CDN and inject them manually:

const jquery = await page.evaluate(() => window.fetch('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js').then((res) => res.text()));
await page.goto(YOUR_PAGE_HERE);
await page.evaluate(jquery);

This is used in scraping puppeteer's docs for browserless here (I'm the author of this tool) if you'd like to see an example in the wild.

Answer 6

It becomes more easier to manage if you inject your script into the your html page header if you have got like this

<script type="text/javascript" src="abc.min.js"></script>

and now you can easily call its function in your page.evaluate(function(){ })

Answer 7

To inject jQuery from CDN (inspired by @browserless answer above):

// go to page
await page.goto(url_str);

// inject jQuery
var jquery_ev_fn = await page.evaluate(function(){
    return window.fetch('https://code.jquery.com/jquery-3.4.1.min.js').then(function(res){
        return res.text();
    });
});
await page.evaluate(jquery_ev_fn);

To inject local jQuery:

// get local jQuery
var jquery_code_str = fs.readFileSync('/path/to/local/jquery.js', 'utf8');

// go to page
await page.goto(url_str);

// inject jQuery
var jquery_ev_fn = await page.evaluate(function(code_str){
    return code_str;
}, jquery_code_str);
await page.evaluate(jquery_ev_fn);