在瀏覽器中執行 Puppeteer

Puppeteer 是一個強大的瀏覽器自動化工具，但您知道它也可以在瀏覽器本身中執行嗎？這讓您可以利用 Puppeteer 的功能來執行不需要 Node.js 特定功能的任務。

支援的功能

在瀏覽器中執行時，Puppeteer 提供多種功能，包括：

1. WebSocket 連線：使用 WebSocket 建立與現有瀏覽器實例的連線。不支援直接啟動或下載瀏覽器，因為它依賴 Node.js API。
2. 腳本評估：在瀏覽器環境中執行 JavaScript 程式碼。
3. 文件操作：產生目前網頁的 PDF 和螢幕截圖。
4. 頁面管理：建立、關閉和導覽不同的網頁。
5. Cookie 處理：檢查、修改和管理瀏覽器中的 Cookie。
6. 網路控制：監控和攔截瀏覽器發出的網路請求。

如何在瀏覽器中執行 Puppeteer

注意

請參閱 https://github.com/puppeteer/puppeteer/tree/main/examples/puppeteer-in-browser 以取得完整範例。

若要在瀏覽器中執行 Puppeteer，首先您需要使用 bundler（例如 rollup 或 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();

2. 使用 bundler 建置您的應用程式。例如，下列設定可用於 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 端點。

3. 將產生的 bundle 包含到網頁中。