在 Chrome 擴充功能中執行 Puppeteer

注意

Chrome 擴充功能的環境與一般的 Node.JS 環境有顯著差異，因此，目前在 chrome.debugger 中執行 Puppeteer 的支援仍處於實驗階段。如果您遇到錯誤，請提交問題至 https://github.com/puppeteer/puppeteer/issues/new/choose。

Chrome 擴充功能允許透過 chrome.debugger 存取 Chrome DevTools Protocol。chrome.debugger 提供對 CDP 的受限存取，並且一次僅允許附加到一個頁面。因此，Puppeteer 需要使用不同的傳輸方式，並且 Puppeteer 的視圖僅限於單一頁面。這表示您可以與單一頁面及其框架和 worker 互動，但無法使用 Puppeteer 建立新頁面。若要建立新頁面，您需要使用 chrome.tabs API 並建立新的 Puppeteer 連線。

如何在 Chrome 擴充功能中執行 Puppeteer

注意

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

若要在擴充功能中執行 Puppeteer，您首先需要使用像是 rollup 或 webpack 的打包工具產生與瀏覽器相容的建置版本

1. 匯入 Puppeteer 時，請使用 puppeteer-core 中瀏覽器特定的進入點 puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js'

import {
  connect,
  ExtensionTransport,
} from 'puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js';

// Create a tab or find a tab to attach to.
const tab = await chrome.tabs.create({
  url,
});
// Connect Puppeteer using the ExtensionTransport.connectTab.
const browser = await connect({
  transport: await ExtensionTransport.connectTab(tab.id),
});
// You will have a single page on the browser object, which corresponds
// to the tab you connected the transport to.
const [page] = await browser.pages();
// Perform the usual operations with Puppeteer page.
console.log(await page.evaluate('document.title'));
browser.disconnect();

2. 使用打包工具建置您的擴充功能。例如，以下組態可用於 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'],
    }),
  ],
};