Chrome 扩展程序

¥Chrome Extensions

Puppeteer 可用于测试 Chrome 扩展。

¥Puppeteer can be used for testing Chrome Extensions.

加载扩展程序

¥Load extensions

使用 LaunchOptions

¥Using LaunchOptions

import puppeteer from 'puppeteer';
import path from 'path';

const pathToExtension = path.join(process.cwd(), 'my-extension');
const browser = await puppeteer.launch({
  pipe: true,
  enableExtensions: [pathToExtension],
});

运行时

¥At runtime

import puppeteer from 'puppeteer';
import path from 'path';

const pathToExtension = path.join(process.cwd(), 'my-extension');
const browser = await puppeteer.launch({
  pipe: true,
  enableExtensions: true,
});

await browser.installExtension(pathToExtension);

后台上下文

¥Background contexts

你可以获取对扩展服务工作线程或后台页面的引用，这对于在扩展上下文中执行代码或强制终止服务工作线程非常有用。

¥You can get a reference to the extension service worker or background page, which can be useful for evaluating code in the extension context or forcefully terminating the service worker.

Service Worker (MV3)

import puppeteer from 'puppeteer';
import path from 'path';

const pathToExtension = path.join(process.cwd(), 'my-extension');
const browser = await puppeteer.launch({
  pipe: true,
  enableExtensions: [pathToExtension],
});

const workerTarget = await browser.waitForTarget(
  // Assumes that there is only one service worker created by the extension and its URL ends with background.js.
  target =>
    target.type() === 'service_worker' &&
    target.url().endsWith('background.js'),
);

const worker = await workerTarget.worker();

// Test the service worker.

await browser.close();

后台页面 (MV2)

¥Background page (MV2)

以下是获取源位于 ./my-extension 的扩展的 背景页 句柄的代码：

¥The following is code for getting a handle to the background page of an extension whose source is located in ./my-extension:

import puppeteer from 'puppeteer';
import path from 'path';

const pathToExtension = path.join(process.cwd(), 'my-extension');
const browser = await puppeteer.launch({
  pipe: true,
  enableExtensions: [pathToExtension],
});
const backgroundPageTarget = await browser.waitForTarget(
  target => target.type() === 'background_page',
);
const backgroundPage = await backgroundPageTarget.page();

// Test the background page as you would any other page.

await browser.close();

弹出窗口

¥Popup

访问 Service Worker 同上。然后：

¥Access the service worker as above. Then:

await worker.evaluate('chrome.action.openPopup();');

const popupTarget = await browser.waitForTarget(
  // Assumes that there is only one page with the URL ending with popup.html
  // and that is the popup created by the extension.
  target => target.type() === 'page' && target.url().endsWith('popup.html'),
);

const popupPage = popupTarget.asPage();

// Test the popup page as you would any other page.

await browser.close();

内容脚本

¥Content scripts

内容脚本照常注入。使用 browser.newPage() 和 page.goto() 导航到将注入内容脚本的页面。

¥Content scripts are injected as normal. Use browser.newPage() and page.goto() to navigate to a page where a content script will be injected.

它目前无法在内容脚本隔离环境中执行代码。

¥It is not currently possible to evaluate code in the content script isolated world.

了解更多

¥Learn more

要了解更多信息，请参阅 Chrome for Developers 文档。

¥To learn more, see the documentation on Chrome for Developers.