大家好，我是一名，跨境行业 saas 软件开发的前端程序员，阿毛

这个我的个人网站

最近想用 Electron 做一个爬虫，想到用 Puppeter 来控制 Electron 创建的窗口执行爬取任务。 网上找了很多方法都不好用， 最后发现一个库可以链接 Electron 和 Puppeter , 这里分享一下

puppeteer-in-electron

这是我的页面 就一个按钮

const Index = () => {
  const ipcRenderer = window.electron.ipcRenderer;
  function open() {
    ipcRenderer.send("openBaidu");
  }
  return (
    <div className="w-full h-full flex justify-center items-center">
      <Button onClick={() => open()}>打开百度</Button>
    </div>
  );
};

这是主进程的方法

这是主进程的方法 createPupPage 我做了一个简单的处理， 传入一个 url ，通过 Electron 创建一个窗口 ，通过 puppeteer 接管后 返回 page, 然后输入 DeepSeek 点击确定 然后等待 1 秒， 最后截图

ipcMain.on("openBaidu", async () => {
  console.log("pong");
  const page = await createPupPage({ loadURL: "https://www.baidu.com/" });
  await page.type("#kw", "DeepSeek");
  await page.click("#su");
  await wait(1000);
  await page.screenshot({ path: "baidu.png" });
});

createPupPage 相关代码

import { app, BrowserWindow } from "electron";
import puppeteer, { Page } from "puppeteer-core";
const pie = require("puppeteer-in-electron");

let browser = null;

export function getBrowser(): unknown {
  return browser;
}
export async function init(): Promise<void> {
  await pie.initialize(app);
  browser = await pie.connect(app, puppeteer);
}
export async function createPupPage(data: {
  loadURL: string;
  options?: Electron.BrowserWindowConstructorOptions;
}): Promise<Page> {
  const window = new BrowserWindow(data.options);
  const url = data.loadURL;
  await window.loadURL(url);
  const page: Page = await pie.getPage(browser, window);
  return page;
}