Skip to main content
Version: 24.38.0

在浏览器中运行 Puppeteer

🌐 Running Puppeteer in the browser

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

🌐 Puppeteer is a powerful tool for automating browsers, but did you know its API can also run within a browser itself? This enables you to leverage Puppeteer's capabilities for tasks that don't require Node.js specific features.

note

请注意，虽然 Puppeteer API 可以从客户端网页运行，但自动化操作会发送到具有开放调试端口的单独浏览器。

🌐 Note that while the Puppeteer API can run from a client webpage, the automation actions are sent to a separate browser with an open debugging port.

支持的特性​

🌐 Supported Features

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

🌐 While running in the browser, Puppeteer offers a variety of functionalities including:

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

如何在浏览器中运行 Puppeteer​

🌐 How to run Puppeteer in the browser

note

请参阅 https://github.com/puppeteer/puppeteer/tree/main/examples/puppeteer-in-browser 获取完整示例。

🌐 See https://github.com/puppeteer/puppeteer/tree/main/examples/puppeteer-in-browser for a complete example.

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

🌐 To run Puppeteer in the browser, first you need to produce a browser-compatible build using a bundler such as rollup or webpack:

  1. 在导入 Puppeteer 时，从 puppeteer-core 使用特定浏览器的入口点 puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js'：
import puppeteer from 'puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js';

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

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

browser.disconnect();
  1. 使用打包工具构建你的应用。例如，以下配置可以与 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/cjs/bidiMapper/BidiMapper.js to minimize the bundle size.
  external: ['chromium-bidi/lib/cjs/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'],
    }),
  ],
};
note

连接到远程浏览器实例时，请不要忘记包含有效的浏览器 WebSocket 端点。

🌐 Do not forget to include a valid browser WebSocket endpoint when connecting to a remote browser instance.

  1. 将生成的包包含到网页中。