如何检查选项卡是否已在 background.js 中重新加载?

问题描述

我正在编写一个 Chrome 扩展程序，它需要检测选项卡是否已重新加载，也就是说，用户刷新了页面(通过按刷新按钮，或者将光标放在 URL 后面并按 Enter)没有网址更改.如果发生这种情况，那么我将重新初始化 background.js 中定义的变量.

I am writing a Chrome extension which needs to detect if the tab has been reloaded, that is to say, the user refreshed the page (either by pressing the refresh button, or put a cursor behind the URL and press Enter) with no URL change. If it happens, then I will reinitialize my variables defined in background.js.

我想知道如何获得这个is_reload"布尔值?我尝试使用 windows.performance.navigation.type，但它在 background.js 中没有任何效果.

I am wondering how could I get this "is_reload" boolean value? I tried to make use of windows.performance.navigation.type, but it doesn't have any effect in the background.js.

推荐答案

使用 webNavigation

从后台上下文中的脚本中使用的 API 来确定页面何时实际重新加载，而不仅仅是在没有导航的情况下在页面内更新 URL，是 webNavigation.您可能需要一个 webNavigation.onCommitted 侦听器，它是唯一具有为什么页面正在导航信息的事件 (transitionType 和 transitionQualifiers)，但 webNavigation.onDOMContentLoaded 或 webNavigation.onCompleted 将也可以，这取决于您的实际需求.

Use webNavigation

The API to use from a script in the background context to determine when a page is actually reloaded, not just the URL being updated in-page without navigation, is webNavigation. You may want a webNavigation.onCommitted listener, which is the only event which has information as to why the page is navigating (transitionType and transitionQualifiers), but webNavigation.onDOMContentLoaded or webNavigation.onCompleted will also work, depending on what your actual needs are.

如果您的目标确实是确定它是重新加载，而不仅仅是加载，您将需要记录每个选项卡的当前 URL 并将新 URL 与旧 URL 进行比较，或者使用 TransitionType 对象包含在 webNavigation.onCommitted 的 transitionType 属性，它将显式声明它为 "reload".

If your goal really is to determine that it's a reload, not just a load, you will either need to keep a record of the current URL for each tab and compare the new URL against the old one, or use the TransitionType Object contained in the webNavigation.onCommitted's transitionType property, which will explicitly declare it a "reload".

这些是当您通过单击重新加载此页面"按钮重新加载选项卡时发生的事件:

These are the events which occur when you reload a tab by clicking on the "reload this page" button:

webNavigation.onBeforeNavigate    ->  arg[0]= {"frameId":0,"parentFrameId":-1,"processId":-1,"tabId":411,"timeStamp":1500401223978.314,"url":"http://www.example.com/"}        
webRequest.onBeforeRequest        ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestId":"260870","tabId":411,"timeStamp":1500401223979.044,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onBeforeSendHeaders    ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestHeaders":[{"name":"Upgrade-Insecure-Requests","value":"1"},{"name":"User-Agent","value":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"},{"name":"Accept","value":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"},{"name":"Accept-Encoding","value":"gzip, deflate"},{"name":"Accept-Language","value":"en-US,en;q=0.8"}],"requestId":"260870","tabId":411,"timeStamp":1500401223979.3242,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onSendHeaders          ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestHeaders":[{"name":"Upgrade-Insecure-Requests","value":"1"},{"name":"User-Agent","value":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"},{"name":"Accept","value":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"},{"name":"Accept-Encoding","value":"gzip, deflate"},{"name":"Accept-Language","value":"en-US,en;q=0.8"}],"requestId":"260870","tabId":411,"timeStamp":1500401223979.538,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onHeadersReceived      ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestId":"260870","responseHeaders":[{"name":"Content-Encoding","value":"gzip"},{"name":"Accept-Ranges","value":"bytes"},{"name":"Cache-Control","value":"max-age=604800"},{"name":"Content-Type","value":"text/html"},{"name":"Date","value":"Tue, 18 Jul 2017 18:07:03 GMT"},{"name":"Etag","value":""359670651""},{"name":"Expires","value":"Tue, 25 Jul 2017 18:07:03 GMT"},{"name":"Last-Modified","value":"Fri, 09 Aug 2013 23:54:35 GMT"},{"name":"Server","value":"ECS (rhv/818F)"},{"name":"Vary","value":"Accept-Encoding"},{"name":"X-Cache","value":"HIT"},{"name":"Content-Length","value":"606"}],"statusCode":200,"statusLine":"HTTP/1.1 200 OK","tabId":411,"timeStamp":1500401224072.296,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onResponseStarted      ->  arg[0]= {"frameId":0,"fromCache":false,"ip":"93.184.216.34","method":"GET","parentFrameId":-1,"requestId":"260870","responseHeaders":[{"name":"Content-Encoding","value":"gzip"},{"name":"Accept-Ranges","value":"bytes"},{"name":"Cache-Control","value":"max-age=604800"},{"name":"Content-Type","value":"text/html"},{"name":"Date","value":"Tue, 18 Jul 2017 18:07:03 GMT"},{"name":"Etag","value":""359670651""},{"name":"Expires","value":"Tue, 25 Jul 2017 18:07:03 GMT"},{"name":"Last-Modified","value":"Fri, 09 Aug 2013 23:54:35 GMT"},{"name":"Server","value":"ECS (rhv/818F)"},{"name":"Vary","value":"Accept-Encoding"},{"name":"X-Cache","value":"HIT"},{"name":"Content-Length","value":"606"}],"statusCode":200,"statusLine":"HTTP/1.1 200 OK","tabId":411,"timeStamp":1500401224072.5032,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onCompleted            ->  arg[0]= {"frameId":0,"fromCache":false,"ip":"93.184.216.34","method":"GET","parentFrameId":-1,"requestId":"260870","responseHeaders":[{"name":"Content-Encoding","value":"gzip"},{"name":"Accept-Ranges","value":"bytes"},{"name":"Cache-Control","value":"max-age=604800"},{"name":"Content-Type","value":"text/html"},{"name":"Date","value":"Tue, 18 Jul 2017 18:07:03 GMT"},{"name":"Etag","value":""359670651""},{"name":"Expires","value":"Tue, 25 Jul 2017 18:07:03 GMT"},{"name":"Last-Modified","value":"Fri, 09 Aug 2013 23:54:35 GMT"},{"name":"Server","value":"ECS (rhv/818F)"},{"name":"Vary","value":"Accept-Encoding"},{"name":"X-Cache","value":"HIT"},{"name":"Content-Length","value":"606"}],"statusCode":200,"statusLine":"HTTP/1.1 200 OK","tabId":411,"timeStamp":1500401224074.0261,"type":"main_frame","url":"http://www.example.com/"}        
tabs.onUpdated                    ->  arg[0]= 411 :: arg[1]= {"status":"loading","url":"http://www.example.com/"} :: arg[2]= {"active":true,"audible":false,"autoDiscardable":true,"discarded":false,"height":902,"highlighted":true,"id":411,"incognito":false,"index":1,"mutedInfo":{"muted":false},"pinned":false,"selected":true,"status":"loading","title":"www.example.com","url":"http://www.example.com/","width":1282,"windowId":10}    
tabs.onZoomChange                 ->  arg[0]= {"newZoomFactor":1,"oldZoomFactor":1,"tabId":411,"zoomSettings":{"mode":"automatic","scope":"per-origin"}}        
webNavigation.onCommitted         ->  arg[0]= {"frameId":0,"processId":107,"tabId":411,"timeStamp":1500401224079.4019,"transitionQualifiers":[],"transitionType":"reload","url":"http://www.example.com/"}
--->>Here is where you can tell it's a reload --------------------------------------------------------------------------------------------------^^^^^^^^^^^^^^^^^^^^^^^^^
history.onVisited                 ->  arg[0]= {"id":"42","lastVisitTime":1500401224077.579,"title":"Example Domain","typedCount":1,"url":"http://www.example.com/","visitCount":12}        
tabs.onUpdated                    ->  arg[0]= 411 :: arg[1]= {"title":"Example Domain"} :: arg[2]= {"active":true,"audible":false,"autoDiscardable":true,"discarded":false,"height":902,"highlighted":true,"id":411,"incognito":false,"index":1,"mutedInfo":{"muted":false},"pinned":false,"selected":true,"status":"loading","title":"Example Domain","url":"http://www.example.com/","width":1282,"windowId":10}    
webNavigation.onDOMContentLoaded  ->  arg[0]= {"frameId":0,"processId":107,"tabId":411,"timeStamp":1500401224093.404,"url":"http://www.example.com/"}        
webNavigation.onCompleted         ->  arg[0]= {"frameId":0,"processId":107,"tabId":411,"timeStamp":1500401224094.768,"url":"http://www.example.com/"}        
tabs.onUpdated                    ->  arg[0]= 411 :: arg[1]= {"status":"complete"} :: arg[2]= {"active":true,"audible":false,"autoDiscardable":true,"discarded":false,"height":902,"highlighted":true,"id":411,"incognito":false,"index":1,"mutedInfo":{"muted":false},"pinned":false,"selected":true,"status":"complete","title":"Example Domain","url":"http://www.example.com/","width":1282,"windowId":10}   

以下是用户选择地址栏并点击Enter时的事件:

Here are the events for when the user selects the address bar and hits Enter:

webNavigation.onBeforeNavigate   ->  arg[0]= {"frameId":0,"parentFrameId":-1,"processId":-1,"tabId":411,"timeStamp":1500403090082.833,"url":"http://www.example.com/"}        
webRequest.onBeforeRequest       ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestId":"261350","tabId":411,"timeStamp":1500403090083.163,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onBeforeSendHeaders   ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestHeaders":[{"name":"Upgrade-Insecure-Requests","value":"1"},{"name":"User-Agent","value":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"},{"name":"Accept","value":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"},{"name":"Accept-Encoding","value":"gzip, deflate"},{"name":"Accept-Language","value":"en-US,en;q=0.8"}],"requestId":"261350","tabId":411,"timeStamp":1500403090083.3289,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onSendHeaders         ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestHeaders":[{"name":"Upgrade-Insecure-Requests","value":"1"},{"name":"User-Agent","value":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"},{"name":"Accept","value":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"},{"name":"Accept-Encoding","value":"gzip, deflate"},{"name":"Accept-Language","value":"en-US,en;q=0.8"}],"requestId":"261350","tabId":411,"timeStamp":1500403090083.4739,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onHeadersReceived     ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestId":"261350","responseHeaders":[{"name":"Accept-Ranges","value":"bytes"},{"name":"Cache-Control","value":"max-age=604800"},{"name":"Date","value":"Tue, 18 Jul 2017 18:38:09 GMT"},{"name":"Expires","value":"Tue, 25 Jul 2017 18:38:09 GMT"},{"name":"Last-Modified","value":"Fri, 09 Aug 2013 23:54:35 GMT"},{"name":"Server","value":"ECS (rhv/818F)"},{"name":"Vary","value":"Accept-Encoding"},{"name":"X-Cache","value":"HIT"},{"name":"Content-Encoding","value":"gzip"},{"name":"Content-Type","value":"text/html"},{"name":"Etag","value":""359670651""},{"name":"Content-Length","value":"606"}],"statusCode":200,"statusLine":"HTTP/1.1 200 OK","tabId":411,"timeStamp":1500403090130.209,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onResponseStarted     ->  arg[0]= {"frameId":0,"fromCache":true,"ip":"93.184.216.34","method":"GET","parentFrameId":-1,"requestId":"261350","responseHeaders":[{"name":"Accept-Ranges","value":"bytes"},{"name":"Cache-Control","value":"max-age=604800"},{"name":"Date","value":"Tue, 18 Jul 2017 18:38:09 GMT"},{"name":"Expires","value":"Tue, 25 Jul 2017 18:38:09 GMT"},{"name":"Last-Modified","value":"Fri, 09 Aug 2013 23:54:35 GMT"},{"name":"Server","value":"ECS (rhv/818F)"},{"name":"Vary","value":"Accept-Encoding"},{"name":"X-Cache","value":"HIT"},{"name":"Content-Encoding","value":"gzip"},{"name":"Content-Type","value":"text/html"},{"name":"Etag","value":""359670651""},{"name":"Content-Length","value":"606"}],"statusCode":200,"statusLine":"HTTP/1.1 200 OK","tabId":411,"timeStamp":1500403090130.3289,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onCompleted           ->  arg[0]= {"frameId":0,"fromCache":true,"ip":"93.184.216.34","method":"GET","parentFrameId":-1,"requestId":"261350","responseHeaders":[{"name":"Accept-Ranges","value":"bytes"},{"name":"Cache-Control","value":"max-age=604800"},{"name":"Date","value":"Tue, 18 Jul 2017 18:38:09 GMT"},{"name":"Expires","value":"Tue, 25 Jul 2017 18:38:09 GMT"},{"name":"Last-Modified","value":"Fri, 09 Aug 2013 23:54:35 GMT"},{"name":"Server","value":"ECS (rhv/818F)"},{"name":"Vary","value":"Accept-Encoding"},{"name":"X-Cache","value":"HIT"},{"name":"Content-Encoding","value":"gzip"},{"name":"Content-Type","value":"text/html"},{"name":"Etag","value":""359670651""},{"name":"Content-Length","value":"606"}],"statusCode":200,"statusLine":"HTTP/1.1 200 OK","tabId":411,"timeStamp":1500403090131.1592,"type":"main_frame","url":"http://www.example.com/"}        
tabs.onUpdated                   ->  arg[0]= 411 :: arg[1]= {"status":"loading"} :: arg[2]= {"active":true,"audible":false,"autoDiscardable":true,"discarded":false,"height":902,"highlighted":true,"id":411,"incognito":false,"index":1,"mutedInfo":{"muted":false},"pinned":false,"selected":true,"status":"loading","title":"Example Domain","url":"http://www.example.com/","width":1282,"windowId":10}    
tabs.onZoomChange                ->  arg[0]= {"newZoomFactor":1,"oldZoomFactor":1,"tabId":411,"zoomSettings":{"mode":"automatic","scope":"per-origin"}}        
webNavigation.onCommitted        ->  arg[0]= {"frameId":0,"processId":107,"tabId":411,"timeStamp":1500403090135.629,"transitionQualifiers":["from_address_bar"],"transitionType":"reload","url":"http://www.example.com/"}        
--->>Here is where you can tell it's a reload ------------------------------------------------------------------------------------------------------------------^^^^^^^^^^^^^^^^^^^^^^^^^
--->>This tells you it was the user hitting [Enter] in the address bar----------------------------------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
history.onVisited                ->  arg[0]= {"id":"42","lastVisitTime":1500403090134.133,"title":"Example Domain","typedCount":1,"url":"http://www.example.com/","visitCount":12}        
webNavigation.onDOMContentLoaded ->  arg[0]= {"frameId":0,"processId":107,"tabId":411,"timeStamp":1500403090144.5688,"url":"http://www.example.com/"}        
webNavigation.onCompleted        ->  arg[0]= {"frameId":0,"processId":107,"tabId":411,"timeStamp":1500403090146.102,"url":"http://www.example.com/"}        
tabs.onUpdated                   ->  arg[0]= 411 :: arg[1]= {"status":"complete"} :: arg[2]= {"active":true,"audible":false,"autoDiscardable":true,"discarded":false,"height":902,"highlighted":true,"id":411,"incognito":false,"index":1,"mutedInfo":{"muted":false},"pinned":false,"selected":true,"status":"complete","title":"Example Domain","url":"http://www.example.com/","width":1282,"windowId":10}    

或者，使用内容脚本告诉后台脚本页面已重新加载

您可以使用在 content_scripts 在您的 manifest.json 中的条目，该条目被注入您希望检测的域已加载/重新加载.每次运行内容脚本时，它都可以使用 runtime.sendMessage()，到后台脚本(在 runtime.onMessage listener) 告诉后台脚本页面已经加载/重新加载.

Alternately, use a content script to tell the background script the page has reloaded

You can use a content script, defined in a content_scripts entry in your manifest.json, which is injected into the domains you desire to detect are loaded/reloaded. Each time the content script is run it can send a message, using runtime.sendMessage(), to the background script (received in a runtime.onMessage listener) telling the background script that the page has been loaded/reloaded.

如果您监控的域数量有限，则最好这样做，因为用户在安装扩展程序时收到的警告只会说明扩展程序将有权访问指定的域，而不是所有域.

If you're monitoring a limited number of domains, this would be preferable, as the warning the user gets upon installing the extension will only state that the extension will have access to the specified domains, instead of all domains.

这篇关于如何检查选项卡是否已在 background.js 中重新加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！