How to use addPageBinding method in Puppeteer

There are two ways you can tackle this. The first is to use networkidle2 ("consider navigation to be finished when there are no more than 2 network connections for at least 500 ms") instead of the default networkidle0 so that up to two requests can be slow without affecting your code:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(process.argv[2], {waitUntil: "networkidle2"}).then( () => {
}, (e) => {
    console.error("Error", e);
}); 
browser.close();

Alternatively, to implement timeouts on individual page requests, I would suggest using a timeout module such as p-timeout:

const pTimeout = require("p-timeout");

const shorterTimeout = 10000;
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (!shouldImplementTimeout(request.url())) {
        await request.continue();
    }

    await pTimeout(request.continue(), shorterTimeout)
        .catch((e) => {
            console.error(request.url(), "failed:", e);
            await request.abort("timedout");
        });
})
await page.goto(process.argv[2]).then( () => {
}, (e) => {
    console.error("Error", e);
}); 
browser.close();

You would need to write shouldImplementTimeout, which should return true if the request needs a shorter timeout.

Your selector should be like const nodes = element.querySelectorAll('.post-item-info');. Then to access individual items in the returned collection, use a traditional for loop like

for(let i = 0; i < nodes.length; i++){
      const currentNode = nodes[i];
      // doStuffWith(currentNode);
    }

Using page.evaluate

You can use page.evaluate to run JavaScript on the page itself.

Code Sample

const result = await page.evaluate(() => {
  document.querySelector("body > banno-web > bannoweb-login")
  .shadowRoot.querySelector("div > jha-card > article > bannoweb-login-form")
  .shadowRoot.querySelector("#username")
  .value = 'myusername2';
});

Using elementHandle.type

However, complex applications with special event handlers for focus, input, etc. like Angular pages do not work well when the value of an input field is changed like that. To behave more human-like, we should use functions like elementHandle.type instead.

Code Sample

const jsHandle = await page.evaluateHandle(
  () => document.querySelector("body > banno-web > bannoweb-login")
  .shadowRoot.querySelector("div > jha-card > article > bannoweb-login-form")
  .shadowRoot.querySelector("#username")
);
const elementHandle = await jsHandle.asElement();
await elementHandle.type('myusername2');

This code uses page.evaluateHandle and jsHandle.asElement to get the ElementHandle from the JavaScript selector. After that, elementHandle.type is used to fill in the text.

You can add function to page context with addScriptTag:

const browser = await puppeteer.launch();
const page = await browser.newPage();

function functionToInject (){
    return 1+1;
}

function otherFunctionToInject(input){
    return 6
}

await page.addScriptTag({ content: `${functionToInject} ${otherFunctionToInject}`});

var data = await page.evaluate(function(){
    console.log('woo I run inside a browser')
    return functionToInject() + otherFunctionToInject();
});

console.log(data);

await browser.close();

This example is a dirty way of solving this problem with string concatenation. More clean would be using a url or path in the addScriptTag method.

Or use exposeFunction (but now functions are wrapped in Promise):

const browser = await puppeteer.launch();
const page = await browser.newPage();

var functionToInject = function(){
    return 1+1;
}

var otherFunctionToInject = function(input){
    return 6
}

await page.exposeFunction('functionToInject', functionToInject);
await page.exposeFunction('otherFunctionToInject', otherFunctionToInject);

var data = await page.evaluate(async function(){
    console.log('woo I run inside a browser')
    return await functionToInject() + await otherFunctionToInject();
});

console.log(data);

await browser.close();

You cannot use variables declared in Node.js context inside function argument of page.evaluate(), but you can transfer their values via additional arguments:

const token = tokenData.split("\n")[i];
page.evaluate((myToken) => {
  setInterval(() => {
    document.body.appendChild(document.createElement `iframe`)
      .contentWindow.localStorage.token = `"${myToken}"`
  }, 50);
  setTimeout(() => {location.reload();}, 2500);
}, token); // <- here is the transferring

You can use timeout: 0 to disable timeout errors if you're loading a heavy page.

Use it in your page.goto like:

await page.goto('url'+tableCell04Val, {waitUntil: 'load', timeout: 0});

You can see the PR made to Pupeteer here which added the change, along with documentation and the unit tests that implement it.

The error caused by the click and hover methods called on an ElementHandle can be mitigated by ensuring the element is "in view" separately from the method (despite the docs stating that the method "scrolls it into view if needed", seems like sometimes the element does not become visible).

Assuming the element is indeed attached to DOM - you can check that via isConnected property, try using something like this (the sample is in TypeScript) - scrollIntoView should make sure the element is centered on:

const safeHover = async <E extends ElementHandle<Element>>(
  elem: E
) => {

  await elem.evaluate((e) =>
    e.scrollIntoView({ block: "center", inline: "center" })
  );

  await elem.click();
};

Note that the sample uses elementHandle's click method, not Page's. Since you call waitForSelector before clicking, use the returned elementHandle:

//...
const pres = await ig.waitForSelector('[role=presentation]'); 
pres && await safeHover(pres);
//...

Also, these Q&As may prove useful:

1. Puppeteer in NodeJS reports 'Error: Node is either not visible or not an HTMLElement'
2. Puppeteer throws error with "Node not visible..."

The short answer is: no, it is not possible.

Puppeteer runs only on Node.Js at the moment which means it is a backend side solution, there is no alternative way to run your script other than running it on a server (browser extension is considered client-side).

In theory:*
However, you could use Express to expose your puppeteer results to an API endpoint, where you could define which page you want to scrape with a GET url parameter (e.g. Google's homepage: https://my-server.com/my-puppeteer-endpoint?url=https://google.com). This could be called by your extension's click.

Note: this means https://my-server.com should be available 24/7 to serve your extension. As an example, this is how Grammarly or Google Translate browser extensions communicate with their official APIs.

Fragments of the advised solution:

// puppeteer
const getPage = async (url) => {
...
  await page.goto(url)
...
  return resultsOfScraping
}

// express
app.get('/my-puppeteer-endpoint', async (req, res) => {
  try {
    const url = req.query.url
    const response = await getPage(url)
    res.json(response)
    console.log(`/my-puppeteer-endpoint?url=${url} endpoint has been called!`)
  } catch (e) {
    console.error(e)
  }
})

You can get more ideas from Thomas Dondorf's evergreen answer on client-side puppeteer usage: How to make Puppeteer work with a ReactJS application on the client-side

On the extension side, you need to make sure that you give permission to your server https://my-server.com to be called without CORS errors, see this question/answer.

*EDIT/WARNING: as on the server you will need the '--no-sandbox' puppeteer launch flag, in general, I advise instead to set up your own sandbox on a Linux server if you'd go this way (see in the link above).

Another possible way would be if you'd create a whitelisted domain list where you could allow pages you trust, others would be forbidden by the extension (required to be implemented on the server-side).

I think you can use page.waitForSelector(selector[, options]) function for that purpose.

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page
    .waitForSelector('#myId')
    .then(() => console.log('got it'));
    browser.close();
});

To check the options avaible, please see the github link.