0

有一个浏览器扩展可以修改页面并将它自己的 html 代码插入其中，我得到了正在检查的页面的 html 代码，但是来自扩展的 html 代码注入并没有进入它，尽管如果你运行签入浏览器，然后有一个注入。

那些。渲染页面后，扩展在页面内部集成了一个块：

<div><div class="notification"><div class="notification__close"></div> <div class="notification__logo"></div> <div class="notification__title">
  </div> <div class="notification__cta">
    Activate
  </div></div> <!----></div>

当试图捕捉这个块时，puppeteer 没有找到它：

let browser = await puppeteer.launch ({
      headless: false,
      ignoreDefaultArgs: true,
      args: [
        `--load-extension = $ {path.join (dir, '/extension')},`
      ]
    });
let page = await browser.newPage ();

await page.goto ('https://site.url', {waitUntil: 'networkidle2'});
await page.waitForSelector ('.notification__cta');
await page.click ('.notification__cta');

尝试查找项目时出现超时转储:: Timeout - 在 jest.setTimeout 指定的 30000 毫秒超时内未调用异步回调。超时 - 在 jest.setTimeout.Error 指定的 30000 毫秒超时内未调用异步回调：

如果您查看存储在页面中的 html，则通知块不会到达那里......也许有人会知道我如何使用 puppeteer 跟踪 html 注入并操纵它们？

4

3 回答 3

0

我认为您的选择器中'. notification__cta' 有错字点和类名之间不应有空格。当你改变它时它工作'.notification__cta'吗？

于 2020-07-26T18:58:26.320 回答
0

使用 query-selector-shadow-dom 的解决方案（https://www.npmjs.com/package/query-selector-shadow-dom）

于 2020-07-27T23:47:03.893 回答
0

我认为您的扩展属于“内容脚本”类别。目前 puppeteer 不支持它们：请参阅文档，使用 Chrome 扩展：

注意 尚无法测试扩展弹出窗口或内容脚本。

于 2020-07-26T19:46:28.117 回答