如何将 puppeteer-core 与电子一起使用?

2022-01-10 00:00:00 puppeteer electron javascript typescript

我从另一个 Stackoverflow 问题中得到了这段代码:

I got this code from another Stackoverflow Question:

import electron from "electron";
import puppeteer from "puppeteer-core";

const delay = (ms: number) =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, ms);
  });

(async () => {
  try {
    const app = await puppeteer.launch({
      executablePath: electron,
      args: ["."],
      headless: false,
    });
    const pages = await app.pages();
    const [page] = pages;

    await page.setViewport({ width: 1200, height: 700 });
    await delay(5000);
    const image = await page.screenshot();
    console.log(image);
    await page.close();
    await delay(2000);
    await app.close();
  } catch (error) {
    console.error(error);
  }
})();

Typescript 编译器抱怨 launch 方法选项对象的 executablePath 属性，因为它需要是 string 类型而不是 Electron.那么如何将电子铬可执行路径传递给 puppeteer?

Typescript compiler complains about executablePath property of launch method options object cause it needs to be of type string and not Electron. So how to pass electron chromium executable path to puppeteer?

推荐答案

如果没有一些变通方法和标志更改，您不能直接将电子可执行文件与 Puppeteer 一起使用.他们在 API 上有很多不同.特别是电子没有铬浏览器正常工作所需的所有 chrome.* API，许多标志仍然没有适当的替代品，例如 无头标志.

You cannot use electron executable with Puppeteer directly without some workarounds and flag changes. They have tons of differences in the API. Specially electron doesn't have all of the chrome.* API which is needed for chromium browser to work properly, many flags still doesn't have proper replacements such as the headless flag.

您将在下面看到两种方法.但是你需要确保两点，

Below you will see two ways to do it. However you need to make sure of two points,

  • 确保在启动应用之前连接 puppeteer.
  • 确保为在 Electron 中运行的 Chrome 版本获取正确的 puppeteer 或 puppeteer-core 版本！

有很多解决方法，但最近有一个 puppeteer-in-electron 包，它允许您使用电子在电子应用程序中运行 puppeteer.

There are lots of workarounds, but most recently there is a puppeteer-in-electron package which allows you to run puppeteer within electron app using the electron.

首先，安装依赖，

npm install puppeteer-in-electron puppeteer-core electron

然后运行它.

import {BrowserWindow, app} from "electron";
import pie from "puppeteer-in-electron";
import puppeteer from "puppeteer-core";

const main = async () => {
  const browser = await pie.connect(app, puppeteer);

  const window = new BrowserWindow();
  const url = "https://example.com/";
  await window.loadURL(url);

  const page = await pie.getPage(browser, window);
  console.log(page.url());
  window.destroy();
};

main();

获取调试端口并连接

另一种方法是获取电子应用程序的远程调试端口并连接到它.此解决方案由 trusktr on 共享电子论坛.

import {app, BrowserWindow, ...} from "electron"
import fetch from 'node-fetch'

import * as puppeteer from 'puppeteer'

app.commandLine.appendSwitch('remote-debugging-port', '8315')

async function test() {
    const response = await fetch(`http://localhost:8315/json/versions/list?t=${Math.random()}`)
    const debugEndpoints = await response.json()

    let webSocketDebuggerUrl = debugEndpoints['webSocketDebuggerUrl ']

    const browser = await puppeteer.connect({
        browserWSEndpoint: webSocketDebuggerUrl
    })

    // use puppeteer APIs now!
}

// ... make your window, etc, the usual, and then: ...

  // wait for the window to open/load, then connect Puppeteer to it:
  mainWindow.webContents.on("did-finish-load", () => { 
    test()
  })

上述两种解决方案都使用 webSocketDebuggerUrl 来解决问题.

Both solution above uses webSocketDebuggerUrl to resolve the issue.

添加此注释是因为大多数人使用电子捆绑应用程序.

Adding this note because most people uses electron to bundle the app.

如果要构建 puppeteer-core 和 puppeteer-in-electron，需要使用 hazardous 和 electron-builder 确保 get-port-cli 工作.

If you want to build the puppeteer-core and puppeteer-in-electron, you need to use hazardous and electron-builder to make sure get-port-cli works.

在 main.js 之上添加危险

Add hazardous on top of main.js

// main.js
require ('hazardous');

确保 get-port-cli 脚本已解压，在 package.json 中添加以下内容

Make sure the get-port-cli script is unpacked, add the following on package.json

"build": {
  "asarUnpack": "node_modules/get-port-cli"
}

构建后的结果:

相关文章