Detect and test Chrome Extension using Puppeteer(使用 Puppeteer 检测和测试 Chrome 扩展程序)
问题描述
有没有办法使用 Puppeteer 测试 Chrome 扩展程序?例如,扩展程序能否检测到 Chrome 以测试"模式启动以提供不同的 UI、检查内容脚本是否正常工作等?
Is there a way to test a Chrome extension using Puppeteer? For example can an extension detect that Chrome was launched in "test" mode to provide different UI, check content scripts are working, etc?
推荐答案
在 puppeteer.launch()
中传递 --user-agent
是覆盖具有自定义值的浏览器 UA.然后,您的扩展程序可以在其后台页面中读回 navigator.userAgent
并识别 Chrome 是使用 Puppeteer 启动的.此时,您可以提供不同的代码路径来测试 crx 与正常操作.
Passing --user-agent
in puppeteer.launch()
is a useful way to override the browser's UA with a custom value. Then, your extension can read back navigator.userAgent
in its background page and identify that Chrome was launched with Puppeteer. At that point, you can provide different code paths for testing the crx vs. normal operation.
puppeteer_script.js
const puppeteer = require('puppeteer');
const CRX_PATH = '/path/to/crx/folder/';
puppeteer.launch({
headless: false, // extensions only supported in full chrome.
args: [
`--disable-extensions-except=${CRX_PATH}`,
`--load-extension=${CRX_PATH}`,
'--user-agent=PuppeteerAgent'
]
}).then(async browser => {
// ... do some testing ...
await browser.close();
});
扩展background.js
chrome.runtime.onInstalled.addListener(details => {
console.log(navigator.userAgent); // "PuppeteerAgent"
});
或者,如果你想保留浏览器的原始 UA 字符串,那就很棘手了.
Alternatively, if you wanted to preserve the browser's original UA string, it gets tricky.
- 启动 Chrome 并在 Puppeteer 中创建一个空白页面.
- 将其标题设置为自定义名称.
- 在后台脚本中检测标签的标题更新.
- 设置一个全局标志以供以后重复使用.
background.js
let LAUNCHED_BY_PUPPETEER = false; // reuse in other parts of your crx as needed.
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (!LAUNCHED_BY_PUPPETEER && tab.title.includes('PuppeteerAgent')) {
chrome.tabs.remove(tabId);
LAUNCHED_BY_PUPPETEER = true;
}
});
puppeteer_script.js
const puppeteer = require('puppeteer');
const CRX_PATH = '/path/to/crx/folder/';
puppeteer.launch({
headless: false, // extensions only supported in full chrome.
args: [
`--disable-extensions-except=${CRX_PATH}`,
`--load-extension=${CRX_PATH}`,
]
}).then(async browser => {
const page = await browser.newPage();
await page.evaluate("document.title = 'PuppeteerAgent'");
// ... do some testing ...
await browser.close();
});
注意:缺点是这种方法需要标签".manifest.json 中的权限.
Note: The downside is that this approach requires the "tabs" permission in manifest.json.
假设您想测试您的弹出页面 UI?一种方法是直接导航到它的 chrome-extension://
URL,然后使用 puppeteer 进行 UI 测试:
Let's say you wanted to test your popup page UI? One way to do that would be to navigate to its chrome-extension://
URL directly, then use puppeteer to do the UI testing:
// Can we navigate to a chrome-extension page? YES!
const page = await browser.newPage();
await page.goto('chrome-extension://ipfiboohojhbonenbbppflmpfkakjhed/popup.html');
// click buttons, test UI elements, etc.
要为测试创建稳定的扩展 ID,请查看:https://stackoverflow.com/a/23877974/274673一个>
To create a stable extension id for testing, check out: https://stackoverflow.com/a/23877974/274673
这篇关于使用 Puppeteer 检测和测试 Chrome 扩展程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:使用 Puppeteer 检测和测试 Chrome 扩展程序
基础教程推荐
- 直接将值设置为滑块 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01