pptr connect with electron failed

[LarenDorr]

environment:

• Puppeteer version: 1.6.2
• Platform / OS version: win10 electron 4.0.1
• Node.js version: 10.11.0

description

Because electron app is a chromium, so I want to use puppeteer.connect() connect with electron.
I already set electron's chromium with --remote-debugging-port=9223.
when electron started, I open http://localhost:9223/json/version, can get :

{
   "Browser": "Chrome/69.0.3497.106",
   "Protocol-Version": "1.3",
   "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.106 Electron/4.0.1 Safari/537.36",
   "V8-Version": "6.9.427.24",
   "WebKit-Version": "537.36 (@857b284701ddf7bef0f14fa76416cf7ca786b411)",
   "webSocketDebuggerUrl": "ws://localhost:9223/devtools/browser/xxxxxxx"
}

Then, I use webSocketDebuggerUrl set to connect() args :

puppeteer.connect({
	browserWSEndpoint: "ws://localhost:9223/devtools/browser/xxxxxxx"
}).then(async browser => {
	const page = await browser.newPage();
}).catch(e => {
	console.log(e)
})

when I run this script, log error :

{ Error: Protocol error (Target.getBrowserContexts): Not supported
    at Promise (C:\WorkSpace\test\pptr-test\node_modules\puppeteer\lib\Connection.js:86:56)
    at new Promise (<anonymous>)
    at Connection.send (C:\WorkSpace\test\pptr-test\node_modules\puppeteer\lib\Connection.js:85:12)
    at Function.connect (C:\WorkSpace\test\pptr-test\node_modules\puppeteer\lib\Launcher.js:257:50)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  message: 'Protocol error (Target.getBrowserContexts): Not supported' }

Then I try other different version puppeteer, but also log above error. Include puppeteer@1.6.x that support chromium's version equal 69.

[xssc]

same

[abinavseelan]

Trying to achieve the same thing and running into the same issue. 😕

Here's a demo snippet

const { app, BrowserWindow } = require('electron');
const request = require('axios');
const puppeteer = require('puppeteer-core');

let mainWindow;
app.commandLine.appendSwitch('remote-debugging-port', '9222');

async function createWindow() {
    const response = await request.get('http://localhost:9222/json/version');

    mainWindow = new BrowserWindow({
        width: 1280,
        height: 720,
    });

    mainWindow.on('closed', () => {
        mainWindow = null;
    });

    puppeteer
        .connect({
            browserWSEndpoint: response.data.webSocketDebuggerUrl,
        })
        .then(async (browser) => {
            const page = await browser.newPage();
            await page.goto('https://google.com');
        })
        .catch((err) => {
            console.log(err);
        });
}

[allavoie]

same

[aslushnikov]

@LarenDorr Electron is a custom embedder - and a few DevTools protocol methods are expected to be implemented in an embedder. One of these methods is Target.getBrowserContexts. Until electron supports it upstream, Puppeteer's browser contexts won't work with electron.

As a workaround, you can try using Puppeteer v1.4.0.

We, however, can make it mostly work with Electron - things like clicking, typing and navigations should be working just fine. Closing this in favor of #4283 - there's some more context. Let's continue discussion there.

[allavoie]

@aslushnikov

you can try using Puppeteer v1.4.0

Why this old version might be a workaround ? Because current electron version is based on chromium v68 ?

[allavoie]

This combination seems to work:
"electron": "5",
"puppeteer-core": "1.15.0"

Refer to: https://github.com/peterdanis/electron-puppeteer-demo,

I had to do a small change to make it work, but the idea is there. I was able to generate a png screenshot based on this repo.
I wonder if there might me another dependency I am forgetting to mention. Please feel free to ask more info on my setup, as I do not know what more to add here.

[LarenDorr]

@allavoie I install and run this repo. And found it can success use some methods of puppeteer. After I compare this code. Found just replace args of puppeteer.connect. Example:

puppeteer.connect({
  browserURL: "http://localhost:9200", // SUCCESS
  browserWSEndpoint: "ws://localhost:9200/devtools/browser/xxxxxxx", // FAILURE
 })

But some method can't use, such as: browser.newPage(). Will throw error : Protocol error (Target.createTarget): Not supported.
But most method can normally use. 😄
But, Why ??? (And browserURL not in docs)

[allavoie]

@LarenDorr : I cannot tell about the completeness of this solution. The only hope I have to go further is to look at this thread: #4283 (comment)

[aslushnikov]

@LarenDorr Ah, Target.createTarget is also embedder-implemented! Good call. But why would you want to call this method in electron app?

[LarenDorr]

@LarenDorr HAHA, just try above methods whether can run. Original because I want to use electron + puppeteer make a crawler application. Electron be used for UI, pptr be used for crawl. But application is so big after bundled(has two chromiums). Now just use puppeteer-core, then connect to electron.

[aslushnikov]

Electron be used for UI, pptr be used for crawl.

@LarenDorr If you don't need very fancy UI, you can actually use Puppeteer for the UI as well. We've explored this concept with one of our lab projects - GoogleChromeLabs/carlo. Check it out :-)

[LarenDorr]

@aslushnikov Yeah, I tried it. Maybe provide two versions application，because someone is sensitive toapplication size. But it's last commit was 2 months ago, will this project continue?

[lvkins]

Electron be used for UI, pptr be used for crawl.

@LarenDorr If you don't need very fancy UI, you can actually use Puppeteer for the UI as well. We've explored this concept with one of our lab projects - GoogleChromeLabs/carlo. Check it out :-)

@aslushnikov Interesting solution, but in real world you don't really want your end-user to install chrome. Electron has the advantage of chromium being bundled.