inject jquery into puppeteer page

问题

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?

回答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();
})();

回答2:

For those looking to inject a local copy of jQuery:

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

回答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();
});

回答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;
    }

回答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.

回答6:

I had just publish my puppeteer jquery integration here

code sample:

let browser = await launch({headless: true});
let pageOrg = await browser.newPage();
let page = pageExtand(pageOrg);
// append a <H1>
await page.jQuery('body').append(`<h1>Title</h1>`);
// get the H1 value
let title = await page.jQuery('h1').text();
// chain calls
let text = await page.jQuery('body button:last')
          .closest('div')
          .find('h3')
          .css('color', 'yellow')
          .parent()
          .find(':last')
          .text();

Not all jQuery function are mapped yet, so open issue if you need some more function (Each call need to be add by name and with the number of parameter they takes).

回答7:

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(){ })

回答8:

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);

来源：https://stackoverflow.com/questions/46987516/inject-jquery-into-puppeteer-page

标签

jquery

node.js

Puppeteer