inject jquery into puppeteer page

puppeteer jquery selector
puppeteer and jquery
puppeteer inject javascript
puppeteer page evaluate
puppeteer addscripttag
puppeteer page on response
puppeteer page close
puppeteer inject script

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?

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

ReferenceError: $ is not defined; how to pass jquery $ object to , Steps to reproduce Tell us about your environment: Puppeteer @voordev you should inject jquery separately into the page, then you'll be  Injecting jQuery into a page may break the page itself, if it expects a specific version of jQuery to be available and you override it with an incompatible one. So, be careful. So, be careful. You can either call this function directly in your pageFunction , or you can set up jQuery injection in the Pre goto function in the INPUT UI.

For those looking to inject a local copy of jQuery:

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

jquery: 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  And because we're lazy, we'll inject jQuery to the page in order to use it's wonderful CSS selectors. So Let's go line by line: Line 1-2 we'll require Puppeteer and configure the website we're going to scrape; Line 4 we're launching Puppeteer. Please remember we're in the kingdom of Lord Asynchronous, so everything is a Promise, is async, or has to wait for something else ;) As you can see the conf is self-explanatory.

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

How to scrape that web page with Node.js and puppeteer, A little tutorial on how to start web scraping with puppeteer, the Node.js And because we're lazy, we'll inject jQuery to the page in order to use  Injects the jQuery library into a Puppeteer page. jQuery is often useful for various web scraping and crawling tasks. For example, it can help extract text from HTML elements using CSS selectors. For example, it can help extract text from HTML elements using CSS selectors.

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

utils.puppeteer · Apify SDK, launchPuppeteer(); const page = await browser.newPage(); await page.goto('​https://www.example.com'); // Inject jQuery into a page await puppeteer. inject jquery into puppeteer page ; Puppeteer wait page load after form submit ; Pressing Enter button in puppeteer ; Puppeteer log inside page.evaluate ; Puppeteer wait for all images to load then take screenshot ; Puppeteer: pass variable in.evaluate()

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.

Getting started with Puppeteer Scraper · Apify Documentation, Injecting jQuery into a page may break the page itself, if it expects a specific version of jQuery to be available and you override it  Awhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn't have jQuery included and you either don't own the page or don't feel like adding a script tag to it.

Crawling with Puppeteer - vivek soundrapandi, Puppeteer is a node JS library that provides an API to control chrome browser visiting a web page; logging in and performing user actions For example, instead of querying the DOM using vanilla JS, one can inject jQuery  You can inject jQuery in Chrome by putting it as a bookmark. Just copy the code above, create a new bookmark of a random website. Right click on the bookmark and choose 'Edit', paste the code in the URL box and choose 'Save'. When you click on the bookmark the jQuery script will be injected.-Lucas

How to Easily Inject jQuery into any Web Page, I use jQuerya lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke  jQuery Injector allows you to inject jQuery into every frame on a page so that you can use jQuery in the dev console. Features: - Set the jQuery URL to inject any version you want. - Specify websites and page patterns to automatically inject into. - Entry in context-menu to make injection even easier. v1.1.1 Changelog - - Bumped

How to scrape that web page with Node.js and puppeteer – On Coding, Puppeteer is a Node library which provides a high-level API to control And because we're lazy, we'll inject jQuery to the page in order to use  I've looked into using document.stylesheets, but it seems like it wants the rules to be split up, and won't let you inject a complete stylesheet. Is there a solution that would let me use a string to create a new stylesheet on a page? I'm currently not using jQuery or similar, so pure Javascript solutions would be preferable.

Comments
  • did you try document.getElementsByTagName('head')[0].appendChild(jq) ? Also, since you are setting src, listening to the load event of the script element and then returning might be more robust.
  • This also gives me: Unhandled Rejection at: Promise Promise { <rejected> Error: Protocol error (Runtime.callFunctionOn): Execution context was destroyed. undefined
  • Nevermind, I needed to add a await page.waitForNavigation() before that part. This is the best solution.
  • This gives me: Unhandled Rejection at: Promise Promise { <rejected> Error: Protocol error (Runtime.callFunctionOn): Execution context was destroyed. undefined
  • Is your page object still valid when invoking inject_jquery ?. Can you sharing the invoking code ? Atleast for academic reasons, this answer might explain why your script was failing. I believe the solution by nilobarp is more simpler