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

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

支持的功能

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

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

如何在浏览器中运行Puppeteer

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

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

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

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

3. 连接到浏览器实例：

   const browser = await puppeteer.connect({browserWSEndpoint: wsUrl,
   });alert('Browser has ' + (await browser.pages()).length + ' pages');browser.disconnect();
   

4. 使用打包器构建应用程序：例如，以下配置可以与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'],}),],
   };
   

5. 包含有效的浏览器WebSocket端点：在连接到实例时，确保包含有效的浏览器WebSocket端点。

6. 将生成的包包含到网页中：将打包后的文件包含到你的网页中，就可以开始使用Puppeteer的功能了。

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

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

1. 环境差异：

   • Node.js：Puppeteer 在 Node.js 中运行时，可以利用 Node.js 的生态系统和 API，包括文件系统访问、网络请求、CPU 和内存密集型任务等。
   • 浏览器：在浏览器中运行时，Puppeteer 受限于浏览器的安全策略和沙箱环境，无法直接访问文件系统或执行某些 Node.js 核心模块的功能。

2. API 可用性：

   • Node.js：可以访问 Node.js 的所有核心模块，如 fs、http、child_process 等。
   • 浏览器：只能使用浏览器提供的 API，如 DOM 操作、Web Storage、Fetch API 等。

3. 浏览器自动化：

   • Node.js：Puppeteer 可以启动和控制无头或有头浏览器，模拟用户交互，如点击、滚动、填写表单等。
   • 浏览器：在浏览器中运行的 Puppeteer 通常需要连接到一个已经运行的浏览器实例，无法自行启动浏览器。

4. 性能考量：

   • Node.js：通常在服务器或本地环境中运行，可以利用更多的系统资源，如 CPU 和内存，以提高性能。
   • 浏览器：受限于客户端设备的性能，可能无法处理大规模或资源密集型的任务。

5. 部署和打包：

   • Node.js：不需要特别的打包步骤，可以直接在服务器上运行 JavaScript 文件。
   • 浏览器：需要使用打包工具（如 Webpack 或 Rollup）将 Puppeteer 代码打包成浏览器可以理解的格式。

6. 调试和开发工具：

   • Node.js：可以使用 Node.js 的调试工具，如 node inspector 或 Visual Studio Code 的调试功能。
   • 浏览器：可以使用浏览器的开发者工具进行调试，这为前端开发者提供了更熟悉的调试环境。

7. 代码执行：

   • Node.js：可以直接执行 JavaScript 代码，包括 Puppeteer 脚本。
   • 浏览器：由于同源策略和其他安全限制，可能需要额外的处理来执行跨域请求或某些类型的脚本。

8. 事件循环：

   • Node.js：基于事件驱动的架构，拥有自己的事件循环和异步 I/O。
   • 浏览器：也基于事件驱动，但事件循环和任务队列的处理与 Node.js 不同，更侧重于用户界面的响应性。

总的来说，虽然在浏览器中运行 Puppeteer 提供了一些有趣的可能性，但它的功能和灵活性受到了浏览器环境的限制。在 Node.js 中运行 Puppeteer 仍然是自动化浏览器任务的主流和强大方式。

注意事项

• 确保你使用的是最新版本的Puppeteer，以便获取最佳兼容性和功能支持。
• 如果你需要完整的示例，可以访问Puppeteer的GitHub仓库。如果你遇到了网络问题导致无法访问，可能需要检查你的网络连接或稍后再试。

通过在浏览器中运行Puppeteer，你可以解锁一系列新的可能性，让你的Web应用更加强大和灵活。赶快试试吧！