Chrome扩展程序：如何从后台页面知道标签页何时加载完成

Question

我在后台页面使用监听器来知道标签页何时加载：

chrome.tabs.onUpdated.addListener(function (tabId) { })

但是监听器会被触发两次：页面开始加载时和页面加载完成时。有没有办法区分这两种情况？

- Omiod

---

要了解标签何时开始加载，请参见https://dev59.com/zWIk5IYBdhLWcg3wg-jK#19192010 - Pacerier

Answer 1

很幸运地找到了解决方案。

这里有一个额外的参数，它保存了状态值：

chrome.tabs.onUpdated.addListener(function (tabId , info) {
  if (info.status === 'complete') {
    // your code ...
  }
});

状态可以是 loading 或 complete。

- Omiod

---

在结尾不是缺少了 ); 吗？ - Lawand

注意：这适用于背景脚本。对于内容脚本，只需使用 window.onready。 - Peter Ehrlich

@PeterEhrlich Window.onready的问题在于它会在DOM初始化加载完成后立即触发。如果你尝试对像Gmail这样不断获取数据的网站使用它，它会立即触发。 - Volatil3

如何准确知道哪个标签页已完成，因为信息只有状态已完成。如果用户依次打开了3个标签页，则无法知道哪一个实际上先完成，哪一个最后完成。@Balthazar - Soumyajit Dutta

我用这种方式做了，但对于YouTube不起作用。在尝试查找元素时，该网站仍然不完整。 - Arturas M

@SoumyajitDutta，tabId参数应该能帮助你区分。使用此参数，您可以获取该选项卡的URL。 - sktguha

Answer 2

在打开一个标签页后，我希望有一种更简单的方法来完成这件事。

function createTab (url) {
    return new Promise(resolve => {
        chrome.tabs.create({url}, async tab => {
            chrome.tabs.onUpdated.addListener(function listener (tabId, info) {
                if (info.status === 'complete' && tabId === tab.id) {
                    chrome.tabs.onUpdated.removeListener(listener);
                    resolve(tab);
                }
            });
        });
    });
}

那么它将会是这样

let tab = await createTab('http://google.com');

- Chad Cache