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

时间:2017-07-17 09:00:45

标签: javascript google-chrome google-chrome-extension listener frontend

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

我想知道我怎么能得到这个" is_reload"布尔值?我尝试使用windows.performance.navigation.type,但它在 background.js 中没有任何效果。

2 个答案:

答案 0 :(得分:3)

使用webNavigation

要在后台上下文中使用脚本来确定页面实际重新加载的时间是webNavigation,而不仅仅是在没有导航的情况下在页面中更新的URL。您可能需要一个webNavigation.onCommitted监听器,这是唯一一个包含为什么该网页正在导航(transitionTypetransitionQualifiers)的信息的事件,但是{{ 3}}或webNavigation.onDOMContentLoaded也可以使用,具体取决于您的实际需求。

如果您的目标确实是确定它是否重新加载,而不仅仅是加载,您需要保留每个标签的当前网址记录,并将新网址与旧网址进行比较,或者使用webNavigation.onCommitted transitionType属性中包含的webNavigation.onCompleted对象,该属性将明确声明为"reload"

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

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 的事件:

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}    

或者,使用内容脚本告知页面已重新加载的后台脚本

您可以使用在TransitionType中的content_scripts条目中定义的内容脚本,该脚本会注入您希望检测的域中加载/重新加载。每次运行内容脚本时,它都可以使用manifest.json向后台脚本(在runtime.sendMessage()侦听器中收到)发送消息,告知后台脚本页面已加载/重新加载。

如果您正在监控有限数量的域,那么这将是更可取的,因为用户在安装扩展程序时获得的警告将仅表明该扩展程序将有权访问指定的域,而不是所有域。

答案 1 :(得分:0)

Makyen 的回答很好! 只是一些对我有用的代码片段!

// --- On Reloading or Entering example.com --- 
chrome.webNavigation.onCommitted.addListener((details) => {
    if (["reload", "link", "typed", "generated"].includes(details.transitionType) &&
        details.url === "http://example.com/") {

        codeAfterReload();

        chrome.webNavigation.onCompleted.addListener(function onComplete() {

            codeAfterReloadAndFinishSomeLoading();

            chrome.webNavigation.onCompleted.removeListener(onComplete);
        });
    }
});

更多过渡类型: https://developer.chrome.com/docs/extensions/reference/history/#transition_types

享受:)