Integrating Puppeteer with Electron: Compatibility Issues

Other Questions Headless Browser
1

I’m working on an old Electron app that uses Puppeteer to browse websites. It’s been a while since I last touched it and now I’m adding new features. I updated everything but ran into some problems.

The main issue is that Puppeteer doesn’t seem to control the browser it launches. The puppeteer.launch() function never finishes. Also the devtools console in the Electron app disconnects.

I tried using an older version of Puppeteer (v22) and it worked fine. So the problem must be in the latest version.

Has anyone else faced similar issues? Any ideas on how to fix this or what might be causing the problem? I’m not sure if it’s related to Electron or Puppeteer updates.

Here’s a simple code example to illustrate:

const { app, BrowserWindow } = require('electron');
const puppeteer = require('puppeteer');

async function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    // This part never executes in the latest version
    console.log('Page loaded');
    await browser.close();
  } catch (error) {
    console.error('Puppeteer error:', error);
  }
}

app.whenReady().then(createWindow);

Any help would be appreciated!

2

I’ve dealt with this exact problem in one of my projects. The key is to use Puppeteer’s ‘connect’ method instead of ‘launch’. This way, you’re connecting to Electron’s existing Chromium instance rather than trying to launch a new one.

Here’s what worked for me:

  1. Install puppeteer-core instead of puppeteer.
  2. Use app.on(‘ready’) instead of app.whenReady().
  3. Get the WebContents from your BrowserWindow.
  4. Use puppeteer.connect with the debugger endpoint from WebContents.

The code would look something like this:

const puppeteer = require('puppeteer-core');

app.on('ready', async () => {
  const win = new BrowserWindow({ ... });
  const webContents = win.webContents;
  const debuggerUrl = webContents.debugger.getUrl();
  
  const browser = await puppeteer.connect({
    browserURL: debuggerUrl,
    defaultViewport: null
  });

  // Now you can use browser as usual
});

This approach solved the hanging issues for me. Give it a try!

3

hey man, i had a similar issue. try using puppeteer-core instead of puppeteer. it lets u use the electron’s bundled chromium. also, make sure ur electron and puppeteer versions are compatible. check their docs for specifics. good luck!

4

I encountered a similar issue when upgrading an Electron app recently. The problem likely stems from version incompatibilities between Electron and Puppeteer. To resolve this, I’d recommend explicitly specifying the Chrome executable path when launching Puppeteer. You can do this by using the executablePath option in puppeteer.launch(), pointing it to Electron’s bundled Chromium. Additionally, ensure you’re using the correct Puppeteer version for your Electron version - the Puppeteer GitHub repo usually has a compatibility table. If issues persist, consider using a custom build of Chromium that’s guaranteed to work with both Electron and Puppeteer.