firefox - 网络扩展 : React when a a tab is reloaded

Question

我正在开发一个 Firefox WebExtension，它有一个弹出窗口并使用 chrome.storage.local 来存储状态。到目前为止，我已经使用标签 ID 为特定标签存储数据。

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

从弹出窗口调用初始 JavaScript 代码。

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

谢谢

Answer 1

如果您没有提供更多关于您想要做什么的信息，则很难确定实现此目的的最佳方式。特别是，很难确切地知道您希望对哪些情况使用react。

看起来您可以使用 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事件直接为您提供有关网络导航的信息。他们可能会为您提供比 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));
});