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

2023-09-06前端开发问题
10

本文介绍了如何检查选项卡是否已在 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 侦听器,它是唯一具有为什么页面正在导航信息的事件 (transitionTypetransitionQualifiers),但 webNavigation.onDOMContentLoadedwebNavigation.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.onCommittedtransitionType 属性,它将显式声明它为 "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 中重新加载?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

JavaScript小数运算出现多位的解决办法
在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301

JavaScript(js)文件字符串中丢失"\"斜线的解决方法
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转...
2024-10-17 前端开发问题
437

layui中table列表 增加属性 edit="date",不生效怎么办?
如果你想在 layui 的 table 列表中增加 edit=date 属性但不生效,可能是以下问题导致的: 1. 缺少日期组件的初始化 如果想在表格中使用日期组件,需要在页面中引入 layui 的日期组件,并初始化: script type="text/javascript" src="/layui/layui.js"/scrip...
2024-06-11 前端开发问题
455

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript
Rails/Javascript: How to inject rails variables into (very) simple javascript(Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript)...
2024-04-20 前端开发问题
5

CoffeeScript 总是以匿名函数返回
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)...
2024-04-20 前端开发问题
13