問題描述
我從另一個 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"
}
構建后的結果:
這篇關于如何將 puppeteer-core 與電子一起使用?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！