Question

在chrome扩展程序中，您可以在下面使用它在窗口中找到活动标签页

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

我有一个下面的代码，该代码连接到现有的浏览器并获取所有页面。我无法确定是否有办法让我知道当前哪个选项卡/页面是活动的，并获取其网址（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

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 2

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

Puppeteer Chrome启动/可见标签

2 个答案: