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

Answer 2

    const pages = await browser.pages();
    const vis_results = await Promise.all(pages.map(async (p) => {
        const state = await p.evaluate(() => document.webkitHidden);
        return !state;
    }));
    let visiblePage = pages.filter((_v, index) => vis_results[index])[0];

Answer 3

使用document.hidden

const pages = await browser.pages()
let page
for (let i = 0; i < pages.length && !page; i++) {
    const isHidden = await pages[i].evaluate(() => document.hidden)
    if (!isHidden) {
        page = pages[i]
    }
}

Answer 4

您必须获取所有页面并检查

visibilityState

。使用异步过滤器辅助函数很容易做到：

// helper for async filter
async function filter(arr, callback) {
    const fail = Symbol()
    return (await Promise.all(arr.map(async item => (await callback(item)) ? item : fail))).filter(i=>i!==fail)
}

// filtering only visible pages, it should be one
const visiblePages = await filter(await browser.pages(), async (p) => {
    const state = await p.evaluate(() => document.visibilityState);
    return state === 'visible';
});
// getting it
const activeTab = visiblePages[0];