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({
  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({
  enableExtensions: true,
});

const extensionId = await browser.installExtension(pathToExtension);

列出和卸载

🌐 Listing and uninstalling

你可以使用 browser.extensions() 方法列出所有已安装的扩展及其属性。要卸载扩展，请使用 browser.uninstallExtension() 方法。

🌐 You can list all installed extensions and their properties using the browser.extensions() method. To uninstall an extension, use the browser.uninstallExtension() method.

const extensions = await browser.extensions();
const extension = extensions.get(extensionId);

console.log(extension?.name);
console.log(extension?.version);

await browser.uninstallExtension(extensionId);

后台上下文

🌐 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)

🌐 Service worker (MV3)

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

const pathToExtension = path.join(process.cwd(), 'my-extension');
const browser = await puppeteer.launch({
  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({
  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

访问服务工作者 如上。然后：

🌐 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 = await popupTarget.asPage();

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

await browser.close();

触发扩展操作

🌐 Triggering extension action

你可以使用 page.triggerExtensionAction() 方法触发页面的默认扩展操作。这将触发扩展的操作，就像用户点击工具栏中的扩展按钮一样。

🌐 You can trigger the default extension action for a page using the page.triggerExtensionAction() method. This will trigger the extension's action as if the user clicked the extension's button in the toolbar.

const extensions = await browser.extensions();
const extension = extensions.get(extensionId);

// You can trigger the action for a specific extension on a page.
await page.triggerExtensionAction(extension);

// Alternatively, you can trigger it from the extension object itself.
await extension.triggerAction(page);

// If the action opens a popup, you can then wait for the popup target.
const popupTarget = await browser.waitForTarget(
  target =>
    target.type() === 'page' &&
    target.url().includes(extensionId) &&
    target.url().endsWith('popup.html'),
);

内容脚本

🌐 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.

要在内容脚本的上下文中评估代码，你可以使用 page.extensionRealms() 方法来查找与扩展相关的执行环境，然后使用其 evaluate() 方法。

🌐 To evaluate code in the context of a content script, you can use the page.extensionRealms() method to find the realm associated with the extension and then use its evaluate() method.

// Get the extension ID
const extensionId = await browser.installExtension(pathToExtension);

// Find the extension realm.
const realms = page.extensionRealms();
let extensionRealm;
for (const realm of realms) {
  const extension = await realm.extension();
  if (extension?.id === extensionId) {
    extensionRealm = realm;
    break;
  }
}

if (!extensionRealm) {
  throw new Error('Extension realm not found');
}

// Evaluate code in the content script context.
const result = await extensionRealm.evaluate(() => {
  return document.title;
});

了解更多

🌐 Learn more

要了解更多，请参阅 Chrome 开发者 的文档。

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