Puppeteer-web: Protocol error (Target: getBrowserContexts) not allowed

Question

I've got a chrome extension that is trying to implement puppeteer-web. I've followed the following code to try and get set up puppeteer-web: "Puppeteer is not a constructor"

This is my code:

const puppeteer = require("puppeteer");
async function initiatePuppeteer() {
  let browserWSEndpoint = '';
  await fetch("http://127.0.0.1:9222/json")
    .then(response => response.json())
    .then(function(data) {
        let filteredData = data.filter(tab => tab.type ==='page');
        browserWSEndpoint = filteredData[0].webSocketDebuggerUrl;
      })
    .catch(error => console.log(error));
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint
    });
    const page = await browser.newPage();
    ....etc
}

It doesn't seem the code makes it past this point as when I put a debugger at const browser = await puppeteer.connect I get the error

Uncaught (in promise) Error: Protocol error (Target.getBrowserContexts): Not allowed.

Using Chrome version V76.0.3809.100 Any ideas?

Edit: my webSocketDebuggerUrl is something like ws://127.0.0.1:9222/devtools/page/E1B62B356262B00C26A5D79D03745360

And I suspect it's because it's /page/ and not /browser/ but I couldn't find any of type browser from the /json route. I'll give it another look at it tonight.

Answer 1

Ok so it turns out puppeteer can only connect to a browser target and not a page target as per https://github.com/GoogleChrome/puppeteer/issues/4579#issuecomment-511267351

And reading the documentation for the API (which I should have done earlier...) https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#browserwsendpoint states that URL for the browser target is http://${host}:${port}/json/version instead of just /json