在浏览器中运行 Puppeteer

Puppeteer 是一个用于自动化浏览器的强大工具，但你知道吗，它的 API 也可以直接在浏览器内部运行？这让你能够在不需要 Node.js 特定功能的任务中利用 Puppeteer 的能力。

支持的功能

在浏览器中运行时，Puppeteer 提供了多种功能，包括：

1. WebSocket 连接：使用 WebSocket 连接到现有的浏览器实例。不支持直接启动或下载浏览器，因为这依赖于 Node.js API。
2. 脚本求值：在远程浏览器上下文中执行 JavaScript 代码。
3. 文档操作：生成远程浏览器页面的 PDF 和截图。
4. 页面管理：在远程浏览器中创建、关闭网页并在不同网页之间导航。
5. Cookie 处理：检查、修改和管理远程浏览器中的 Cookie。
6. 网络控制：监视和拦截远程浏览器发出的网络请求。

如何在浏览器中运行 Puppeteer

要在浏览器中运行 Puppeteer，首先需要使用打包工具（如 rollup 或 webpack）生成浏览器兼容的构建产物：

1. 导入 Puppeteer 时，使用 puppeteer-core 中面向浏览器的专用入口点 puppeteer-core/lib/puppeteer/puppeteer-core-browser.js'：

import puppeteer from 'puppeteer-core/lib/puppeteer/puppeteer-core-browser.js';

const browser = await puppeteer.connect({
  browserWSEndpoint: wsUrl,
});

alert('Browser has ' + (await browser.pages()).length + ' pages');

browser.disconnect();

2. 使用打包工具构建你的应用。例如，以下配置可用于 rollup：

import {nodeResolve} from '@rollup/plugin-node-resolve';

export default {
  input: 'main.mjs',
  output: {
    format: 'esm',
    dir: 'out',
  },
  // If you do not need to use WebDriver BiDi protocol,
  // exclude chromium-bidi/lib/bidiMapper/BidiMapper.js to minimize the bundle size.
  external: ['chromium-bidi/lib/bidiMapper/BidiMapper.js'],
  plugins: [
    nodeResolve({
      // Indicate that we target a browser environment.
      browser: true,
      // Exclude any dependencies except for puppeteer-core.
      // `npm install puppeteer-core` # To install puppeteer-core if needed.
      resolveOnly: ['puppeteer-core'],
    }),
  ],
};

3. 将打包产物引入网页。