Version: 23.5.0

在浏览器中运行 Puppeteer

¥Running Puppeteer in the browser

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

¥Puppeteer is a powerful tool for automating browsers, but did you know it 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.

支持的特性

¥Supported Features

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

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

WebSocket 连接：使用 WebSocket 建立与现有浏览器实例的连接。不支持直接启动或下载浏览器，因为它依赖于 Node.js API。

¥WebSocket Connections: Establish connections to existing browser instances using WebSockets. Launching or downloading browsers directly is not supported as it relies on Node.js APIs.
脚本评估：在浏览器上下文中执行 JavaScript 代码。

¥Script Evaluation: Execute JavaScript code within the browser context.
文档操作：生成当前网页的 PDF 和屏幕截图。

¥Document Manipulation: Generate PDFs and screenshots of the current web page.
页面管理：创建、关闭以及在不同网页之间导航。

¥Page Management: Create, close, and navigate between different web pages.
Cookie 处理：检查、修改和管理浏览器内的 cookie。

¥Cookie Handling: Inspect, modify, and manage cookies within the browser.
网络控制：监视并拦截浏览器发送的网络请求。

¥Network Control: Monitor and intercept network requests made by the browser.

如何在浏览器中运行 Puppeteer

¥How to run Puppeteer in the browser

注意

完整示例请参见 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:

导入 Puppeteer 时，使用 puppeteer-core puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js' 中特定于浏览器的入口点：

¥When importing Puppeteer use the browser-specific entrypoint from 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();

使用打包器构建你的应用。例如，以下配置可以与 rollup 一起使用：

¥Build your app using a bundler. For example, the following configuration can be used with 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'],
    }),
  ],
};

注意

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

¥Do not forget to include a valid browser WebSocket endpoint when connecting to an instance.

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

¥Include the produced bundle into a web page.

支持的特性​

如何在浏览器中运行 Puppeteer​

支持的特性

如何在浏览器中运行 Puppeteer