WebExtension：当标签页重新加载时触发React

Question

我正在开发一个Firefox WebExtension，其中包含一个弹出窗口，并使用chrome.storage.local来存储状态。到目前为止，我已经通过标签ID将数据存储在特定的选项卡中。

如果当前选项卡重新加载，我希望重新初始化本地存储。这是因为扩展可能对DOM进行了一些更改，如果选项卡重新加载，这些更改将丢失；因此它存储的状态是不正确的。

最初的JavaScript代码是从弹出窗口调用的。

如何在页面重新加载时运行一些代码？

谢谢

- Manngo

---

当第一次打开选项卡时，它会获得一个新的选项卡ID，所以我一直在使用它。现在你提到了，如果用户从同一选项卡加载新页面，它将具有相同的ID，因此这不够独特。也许我应该将选项卡ID与URL结合使用。我应该在任何页面第一次加载时重新初始化，以及在刷新时重新初始化。 - Manngo

当加载新的URL时，无论是通过输入还是点击链接，选项卡ID和URL的组合足以区分设置。（我已经临时安装了扩展程序，似乎每次都会重新加载，所以我不确定现实情况）。如果用户手动或通过某些页面操作重新加载当前选项卡中的当前页面，则我更感兴趣地重新初始化设置。谢谢。 - Manngo

你已经尝试过什么了？ - Makyen

@Makyen 我认为 tabs.onUpdated 可能有效，但当页面刷新时，该事件不会发生 - 只有在弹出窗口本身更新时才会发生，这太晚了。我在文档中没有看到任何其他类似的东西。我正在调查 webNavigation，但我认为这是一个死胡同，而且我还没有想通它。 - Manngo

tabs.onUpdated 当页面重新加载时肯定会触发。我一直在使用tabs.onUpdated为您准备答案。我很快就会发布它。 - Makyen

Answer 1

如果您没有提供更多的信息，确切地说明您想要做什么，那么很难确定最佳方法来完成此操作。特别是，很难知道您希望响应哪些情况。

看起来你可以使用监听器来监听 tabs.onUpdated 事件。虽然它会比你实际需要的更频繁地触发，但它确实会在重新加载页面时触发。

下面是一段代码，当页面上的URL已经被加载或重新加载时，它会调用一个名为 completedLoadingURLInTab() 的函数。我留下了一堆 console.log() 调用作为注释，以便于显示出所有事件触发的时间。这对于确定从事件接收到的数据内容和各种页面导航期间触发的事件序列非常有用。

注意1： 我发现在某些情况下，changeInfo 对象可能无效。因此需要使用 hasOwnProperty() 来检查属性是否存在，然后从传递给事件处理程序的 tabs.Tab 对象中获取值。
注意2： 需要在 manifest.json 中添加 tabs 权限。

function completedLoadingURLInTab(tabId, newUrl,oldUrl) {
    //We have completed, loading a URL.
    if(newUrl === oldUrl) {
        //We re-loaded the previous URL
        console.log(">>>>>>> Re-load tab=" + tabId + " with URL=" + newUrl);
    } else {
        //This URL _may_ be just a new position in the same page.  That
        //  is something that needs to be checked for here.
        console.log(">>>>>>> New URL loaded in tab=" + tabId + ". URL=" + newUrl);
    }

    //Remember the newUrl so we can check against it the next time
    //  an event is fired.
    tabsInfo[tabId].previousCompleteUrl = newUrl;
    tabsInfo[tabId].loadingUrl = newUrl;
}

let tabsInfo = {};
function InfoForTab(_loadingUrl,_previousUrl,_status) {
    this.loadingUrl = _loadingUrl;
    this.previousCompleteUrl = (_previousUrl === undefined) ? "" : _previousUrl;
    this.status = (_status === undefined) ? "" : _status;
}

function foundNewTab(tabId) {
    //Create an object to hold the collected info for the tab.
    tabsInfo[tabId] = new InfoForTab();
    console.log("New tab. ID=" + tabId);
}

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if(!tabsInfo.hasOwnProperty(tabId)) {
        //This is the first time we have encountered this tab.
        foundNewTab(tabId);
    }
    let output="";
    //We use the properties of "tab" instead of "changeInfo" because in testing it was
    //  clear that changeInfo was not always properly populated. The key(s) may just
    //  exist, but not have any value associated with them.

    /*
    //Testing output showing when the event is fired.
    //  This is used to determine, by experimentation, what events to ignore and which
    //  combinations and sequence of events occur during page navigation.
    output += (changeInfo.hasOwnProperty("status")) ? "\nstatus=" + tab.status : "";
    output += (changeInfo.hasOwnProperty("url")) ? "\nurl=" + tab.url : "";
    output += (changeInfo.hasOwnProperty("pinned")) ? "\npinned=" + tab.pinned : "";
    output += (changeInfo.hasOwnProperty("audible")) ? "\naudible=" + tab.audible : "";
    output += (changeInfo.hasOwnProperty("mutedInfo")) ? "\nmutedInfo="+tab.mutedInfo : "";
    output +=(changeInfo.hasOwnProperty("favIconUrl"))?"\nfavIconUrl="+tab.favIconUrl : "";
    console.log("tabs.updated event: tabId=" + tabId + ":: changeInfo="
                + Object.keys(changeInfo) + output
    );
    */
    if(changeInfo.hasOwnProperty("status") && changeInfo.hasOwnProperty("url")
        && (tab.status === "loading")) {
        //A URL is being loaded into the tab. This can be for the first time,
        //  or transitioning to a new URL, or reloading the page.
        let outputFirst = "";
        let outputLoading = "Loading";
        if(tabsInfo[tabId].previousCompleteUrl === tab.url) {
            //We are re-loading the same URL
            outputLoading = "Re-loading";
        }
        //console.log(outputLoading  + " URL=" + tab.url);
        //We save the URL which is being loaded, but we really don't do anything with it.
        tabsInfo[tabId].loadingUrl = tab.url;
        tabsInfo[tabId].status = "loading";
        return;
    } //else
    if(changeInfo.hasOwnProperty("status") && (tab.status === "complete")) {
        if( tabsInfo[tabId].status === "loading") {
            tabsInfo[tabId].status = "complete";
            //console.log("In tabId="+tabId+" completed loading URL="+tab.url);
            completedLoadingURLInTab(tabId, tab.url, tabsInfo[tabId].previousCompleteUrl);
            return;
        } //else
        if( tabsInfo[tabId].status === "complete") {
            if(tabsInfo[tabId].previousCompleteUrl === tab.url) {
                //console.log("In tabId=" + tabId + " got completed status change after"
                //              + "already complete with URL="
                //              + tabsInfo[tabId].previousCompleteUrl);
                return;
            }//else
            //console.log("In tabId=" + tabId + " completed directly loading new URL="
            //            + tab.url);
            completedLoadingURLInTab(tabId, tab.url, tabsInfo[tabId].previousCompleteUrl);
            return;
        }
    }//else
    if(changeInfo.hasOwnProperty("status") && (tab.status === "loading")
        && ( tabsInfo[tabId].status === "complete")) {
        //console.log("In tabId=" + tabId + " leaving page");
        return;
    }//else
    if(changeInfo.hasOwnProperty("status") ) {
        if((tab.status === "complete") && (tab.url === "about:newtab")
            && tabsInfo[tabId].loadingUrl === undefined ) {
            //We have completed loading about:newtab for the first time in this tab.
            tabsInfo[tabId].status = "complete";
            completedLoadingURLInTab(tabId, tab.url, tabsInfo[tabId].previousCompleteUrl);
            return;
        } //else
        //console.log("In tabId=" + tabId + " got status change to " + tab.status
        //              + " prior to loading a URL with current URL=" + tab.url);
        return;
    }//else
});

在加载插件、打开新标签并进行一些导航（包括几次页面重新加载）之后，控制台的输出可能如下：

New tab. ID=6
>>>>>>> New URL loaded in tab=6. URL=about:newtab
>>>>>>> New URL loaded in tab=6. URL=https://www.google.com/?gws_rd=ssl
>>>>>>> Re-load tab=6 with URL=https://www.google.com/?gws_rd=ssl
>>>>>>> New URL loaded in tab=6. URL=https://www.google.com/?gws_rd=ssl#q=test
>>>>>>> Re-load tab=6 with URL=https://www.google.com/?gws_rd=ssl#q=test
>>>>>>> New URL loaded in tab=6. URL=https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/Tabs/onUpdated
>>>>>>> New URL loaded in tab=6. URL=https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/Tabs/onUpdated#changeInfo
>>>>>>> Re-load tab=6 with URL=https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/Tabs/onUpdated#changeInfo

或者，使用webNavigation事件

webNavigation事件直接为您提供有关Web导航的信息。它们可能会为您提供比tabs.onUpdated更好的解决方案。

如果您使用webNavigation事件，则需要进行实验以查看哪些事件组合适用于您关心的情况。最有可能的是Completed和/或ReferenceFragmentUpdated。

因此，为了让您了解这些事件何时触发，以下代码将记录所有webNavigation事件到控制台：

var webNavEvents = ['BeforeNavigate',
                    'Committed',
                    'Completed',
                    //'CreatedNavigationTarget', //Not supported by Firefox
                    'DOMContentLoaded',
                    'ErrorOccurred',
                    'HistoryStateUpdated',
                    'ReferenceFragmentUpdated'
                    //'TabReplaced' //Not supported by Firefox
                    ];


webNavEvents.forEach(function(navType){
    browser.webNavigation['on' + navType].addListener(function(type,details){
        console.log('\twebNavigation->' + type 
                    + ': tadId=' + details.tabId
                    + ':: url=' + details.url
                    + ((typeof details.transitionType === 'string') ? ':: transitionType='
                        + details.transitionType : '')
        );
    }.bind(undefined,navType));
});

- Makyen

---

@Manngo，我添加了显示webNavigation事件的信息和代码。如果您使用它们，您需要进行实验以查看哪些事件组合适用于您关心的情况。最有可能的是Completed和/或ReferenceFragmentUpdated。 - Makyen