Как использовать кукловод-ядро с электроном? - PullRequest
Новая
       12

Как использовать кукловод-ядро с электроном?

0 голосов
/ 03 октября 2019

Я получил этот код из другого Stackoverflow Вопрос: 

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 жалуется на executablePath свойство launch объекта параметров метода, потому что он должен иметь тип string, а не Electron. Итак, как передать исполняемый путь электронного хрома кукловоду?

1 Ответ

2 голосов
/ 03 октября 2019

Вы не можете использовать электронный исполняемый файл непосредственно с Puppeteer без некоторых обходных путей и изменений флага. У них есть тонны различий в API. Специально электрон не имеет всего API . *, который необходим для правильной работы браузера хрома, многие флаги по-прежнему не имеют надлежащих замен, таких как флаг без заголовка .

Ниже вы увидите два способа сделать это. Однако вам нужно убедиться в двух точках:

  • Убедитесь, что кукловод подключен до запуска приложения.
  • Убедитесь, что вы получаете правильную версию кукловода или ядро ​​кукловода дляверсия Chrome, которая работает в Electron!

Использование puppeteer-in-electron

Есть много обходных путей, но совсем недавно появился кукловод в электронном *Пакет 1019 *, который позволяет запускать кукловода в электронном приложении с помощью электрона.

Сначала установите зависимости, 

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 на электронном форуме . 

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 для решения проблемы.

Extra

Добавление этой заметки, потому что большинство людей использует электрон для объединения приложения.

Если вы хотите построить ядро ​​кукловода и электрон кукловода, вам нужноиспользовать hazardous и electron-builder, чтобы убедиться, что get-port-cli работает.

Добавить опасный объект поверх main.js 

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

Убедитесь, что скрипт get-port-cliраспаковав, добавьте следующее в package.json 

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

Результат после сборки:

...