Feature Request: Support puppeteer-web (inside browser or chrome extension)

[ilyaigpetrov]

It seems puppeteer-web was removed in #5750.
Could you, please, provide puppeteer-web via npm as it is unofficially done by @entrptaher at https://www.npmjs.com/package/puppeteer-web with sources at https://github.com/entrptaher/puppeteer-web.

Motivation

I want to scrape some data from a web site. This data appears on the site on onmouseover event. I tried using a chrome extension but it seems because web site page and content-script are executed in different environments you can't dispatch a mouseover event from content-script which will trigger mouseover listener in the page. That's why I try to make my extension to use puppeteer.

Here is the code that doesn't trigger mouseover event from extension:

    setTimeout(() => {

      const td = document.querySelector('td.foo');
      event = new MouseEvent('mouseover', {
        'view': window,
        'bubbles': true,
        'cancelable': false
      });

      td.dispatchEvent(event);
      // Trying to access elements that must be generated by listeners of this event fails here.
    }, 4000);

I don't want to write extension which communicates with external puppeteer run on NodeJS because of the following reasons:

1. Proxy settings in the browser don't affect puppeteer network configs but it is desirable to have the same proxy settings in the extension and in the puppeteer.
2. Having external puppeteer consumes more CPU and RAM in comparison to the coveted puppeteer-web.

[jackfranklin]

We are working on this at the moment and you can follow progress in #6125. Fair warning, it's not something that will be finished anytime soon but it is on our radar.

[ilyaigpetrov]

If speaking about browser extensions then there is chrome.debugger API.
I don't know exactly how it works but I guess it is more secure to use it instead of opening remote-debugging-port globally in the browser.
If chrome.debugger has benefits then it can be also supported by puppeteer.
If chrome.debugger API has drawbacks then they may be requested to be solved by Manifest V3 team in the future.

[webee]

@ilyaigpetrov why don't you try to inject script to the page?

[ilyaigpetrov]

@webee I don't get it: what script? If you mean content-script then, please, check my original message:

I tried using a chrome extension but it seems because web site page and content-script are executed in different environments you can't dispatch a mouseover event from content-script which will trigger mouseover listener in the page.

[webee]

@ilyaigpetrov I mean that you can inject js to the page from your content script. you can also communicate with the page.

in your content script

// inject js to the page, triggered by message
// 1. inject from src
// 2. inject plain js code
chrome.runtime.onMessage.addListener((msg, sender, reply) => {
  if (msg.cmd === 'inject_src') {
    let s = document.createElement('script');
    s.src = msg.src;
    s.onload = function () {
      this.remove();
    };
    (document.head || document.body || document.documentElement).appendChild(s);
  } else if (msg.cmd === 'inject_code') {
    let s = document.createElement('script');
    s.textContent = msg.code;
    (document.head || document.body || document.documentElement).appendChild(s);
    s.remove();
  }
});


// communicate with page script.
// method#1, use window message
window.addEventListener('message', msg => {
  // console.log('Content Script Received: ', msg);
  // we only accept messages from ourselves
  if (msg.source !== window) {
    return;
  }
  let data = msg.data;
  // only handle messages from page.
  if (data.from === 'page') {
    console.log('Content Script Received Data: ', data);
  }
});

// method#2, use a Custom Event.
document.addEventListener('ContentScriptEvent', e => {
  let detail = e.detail;
  console.log('ContentScriptEvent: ', e, detail);
});

then in the injected javascript

function dispatchContentScriptEvent(detail) {
  document.dispatchEvent(new CustomEvent('ContentScriptEvent', { detail }));
}

dispatchContentScriptEvent({ msg: 'hello' });

window.addEventListener('message', msg => {
  // we only accept messages from ourselves
  if (msg.source !== window) {
    return;
  }
  let data = msg.data;
  // only handle messages from content script.
  if (data.from === 'cs') {
    console.log('Page Received Data: ', data);
  }
});

window.postMessage({ from: 'page', msg: 'hello from the page' });

[gajananpp]

@ilyaigpetrov If you are still interested, i have created a puppeteer transport package with which you can use puppeteer in your extension's background page/service worker. Here is the repo. It uses chrome.debugger api.

You can do

const elementHandle = await page.waitForSelector('element_selector')
await elementHandle.hover()

[stale]

We're marking this issue as unconfirmed because it has not had recent activity and we weren't able to confirm it yet. It will be closed if no further activity occurs within the next 30 days.

[stale]

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!