node.js - Puppeteer chrome 获取事件/可见选项卡

Question

在 chrome 扩展中，您可以使用下面的方法在窗口中找到事件标签

chrome.tabs.query({
            currentWindow: true,
            active: true,
        }

我有一个连接到现有浏览器并获取所有页面的以下代码。我无法确定是否有办法让我知道哪个选项卡/页面当前是事件的并获取其 url( page.url() ，但要使用数组中的哪个？)

const puppeteer = require('puppeteer');

debuggerUrl = "http://127.0.0.1:9999/json/version"

const request = require('request');

request(debuggerUrl, function (error, response, body) {
  data = JSON.parse(body);
  webSocketDebuggerUrl = data["webSocketDebuggerUrl"];
  console.log("Connecting to ", webSocketDebuggerUrl);
  puppeteer.connect({browserWSEndpoint: webSocketDebuggerUrl}).then(async browser => {
    var pages = await browser.pages();
    console.log(pages);
    console.log(await browser.targets())
    await browser.disconnect();
  })
});

Answer 1

document.hidden现在已弃用。但是我们可以使用 document.visibilityState
请注意 page即使您更改了不同的选项卡，也将始终引用同一个选项卡。所以你要改page手动转到事件选项卡。

const pages = await browser.pages();
// this will return list of active tab (which is pages object in puppeteer)
const visiblePages = pages.filter(async (p) => {
  const state = await p.evaluate(() => document.visibilityState);
  return state === 'visible';
});
const activeTab = visiblePages[0]; // since there should be only 1 active tab per window