当前位置：首页 > article >正文

在浏览器中运行 Puppeteer：解锁新能力

article 2024/11/1 14:36:11

Puppeteer，这个强大的浏览器自动化工具，通常在Node.js环境中运行。但你有没有想过，在浏览器本身中运行Puppeteer会是什么样子？这不仅能让我们利用Puppeteer的功能完成更多任务，还能避开Node.js特定的限制。
在这里插入图片描述

支持的功能

在浏览器中运行Puppeteer时，虽然有一些限制，但依然提供了丰富的功能：

WebSocket 连接：通过WebSocket与现有的浏览器实例建立连接。注意，这不包括直接启动或下载浏览器，因为这依赖于Node.js的API。
脚本评估：在浏览器上下文中执行JavaScript代码。
文档操作：生成PDF和当前网页的屏幕截图。
页面管理：创建、关闭页面以及在不同页面间导航。
Cookie 处理：检查、修改和管理浏览器内的Cookie。
网络控制：监视和拦截浏览器发出的网络请求。

如何在浏览器中运行Puppeteer

要在浏览器中运行Puppeteer，你需要进行一些特别的设置：

生成浏览器兼容的构建：使用打包器（如Rollup或Webpack）生成与浏览器兼容的构建。

导入Puppeteer：使用puppeteer-core中特定于浏览器的入口点：

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一起使用：

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

export default {
  input: 'main.mjs',
  output: {
    format: 'esm',
    dir: 'out',
  },
  external: ['chromium-bidi/lib/cjs/bidiMapper/BidiMapper.js'],
  plugins: [
    nodeResolve({
      browser: true,
      resolveOnly: ['puppeteer-core'],
    }),
  ],
};

包含有效的浏览器WebSocket端点：在连接到实例时，确保包含有效的浏览器WebSocket端点。
将生成的包包含到网页中：将打包后的文件包含到你的网页中，就可以开始使用Puppeteer的功能了。

浏览器中运行 Puppeteer 与在 Node.js 环境中运行区别

在浏览器中运行 Puppeteer 与在 Node.js 环境中运行有一些关键的区别。以下是一些主要的不同点：

环境差异：
- Node.js：Puppeteer 在 Node.js 中运行时，可以利用 Node.js 的生态系统和 API，包括文件系统访问、网络请求、CPU 和内存密集型任务等。
- 浏览器：在浏览器中运行时，Puppeteer 受限于浏览器的安全策略和沙箱环境，无法直接访问文件系统或执行某些 Node.js 核心模块的功能。
API 可用性：
- Node.js：可以访问 Node.js 的所有核心模块，如 fs、http、child_process 等。
- 浏览器：只能使用浏览器提供的 API，如 DOM 操作、Web Storage、Fetch API 等。
浏览器自动化：
- Node.js：Puppeteer 可以启动和控制无头或有头浏览器，模拟用户交互，如点击、滚动、填写表单等。
- 浏览器：在浏览器中运行的 Puppeteer 通常需要连接到一个已经运行的浏览器实例，无法自行启动浏览器。
性能考量：
- Node.js：通常在服务器或本地环境中运行，可以利用更多的系统资源，如 CPU 和内存，以提高性能。
- 浏览器：受限于客户端设备的性能，可能无法处理大规模或资源密集型的任务。
部署和打包：
- Node.js：不需要特别的打包步骤，可以直接在服务器上运行 JavaScript 文件。
- 浏览器：需要使用打包工具（如 Webpack 或 Rollup）将 Puppeteer 代码打包成浏览器可以理解的格式。
调试和开发工具：
- Node.js：可以使用 Node.js 的调试工具，如 node inspector 或 Visual Studio Code 的调试功能。
- 浏览器：可以使用浏览器的开发者工具进行调试，这为前端开发者提供了更熟悉的调试环境。
代码执行：
- Node.js：可以直接执行 JavaScript 代码，包括 Puppeteer 脚本。
- 浏览器：由于同源策略和其他安全限制，可能需要额外的处理来执行跨域请求或某些类型的脚本。
事件循环：
- Node.js：基于事件驱动的架构，拥有自己的事件循环和异步 I/O。
- 浏览器：也基于事件驱动，但事件循环和任务队列的处理与 Node.js 不同，更侧重于用户界面的响应性。