JS做谷歌浏览器关闭事件监听

问题:自动化录制插件开发,每次录制结束,如果直接点击关闭而不通过自动化窗口提供的按钮实现,则下一次窗口打开的时候出现错乱,步骤显示、tabid显示等问题。经过排查,窗口新开是在父级框架,同时正常点击录制窗口关闭会有一个chrome.window.remove的操作。
就目前的情况来看,只能先通过监听关闭的方法解决一下。

浏览器监听中刷新和关闭事件有点类似:
页面关闭时先执行onbeforeunload,然后onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。

但是据资料查看,浏览器刷新和关闭执行的时间还是有区别的,在简单页面(也就是不需要加载什么文件的时候),关闭大概也就3ms,而加载至少8ms,用到公司脚本录制页面,关闭事件的onbeforeunload到onunload依然在3ms左右,刷新的时间差却是几百毫秒。网上资料,大概也是如此。

目前是在foreground.js(谷歌插件开发的一个相当远前端js的文件),毕竟录制插件的监听也都在这里。

$(document).ready(function () {
	XXXXXXXXX
	***其他监听方法***
	//监听浏览器异常关闭
	var beginTime =0;//执行onbeforeunload的开始时间
	var differTime = 0;//时间差
	window.onunload = function (){
			differTime = new Date().getTime() - beginTime;
			if(differTime <= 5) {
				console.log("浏览器关闭")
				//触发关闭事件,向后端background.js方法发送信息
				chrome.runtime.sendMessage({
					type: 'removeData'
				}, function (response) {
				})
			}else{
			    console.log("浏览器刷新")
			}

		}
	window.onbeforeunload = function (){
		beginTime = new Date().getTime();
	};
});


### 可用于实现双击关闭标签页功能的Chrome扩展开发 对于希望在Google Chrome浏览器中通过双击来关闭标签页的需求,虽然官方商店内可能没有直接提供这样特定行为的现成插件[^1],但是可以通过编写自定义的Chrome扩展程序来满足这一需求。 创建这样的扩展涉及几个主要部分: #### 注册事件监听器 为了检测用户的鼠标点击动作并判断其是否为快速连续两次点击(即双击),需要注册一个`mousedown`或`dblclick`事件监听器到目标元素上,在此案例里就是每一个标签页对应的DOM节点。由于直接操作标签栏并非易事,通常法是在新页面加载完成之后注入脚本,该脚本负责监控用户交互活动。 ```javascript // background.js chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (changeInfo.status === 'complete') { chrome.scripting.executeScript({ target: {tabId: tab.id}, files: ['content.js'] }); } }); ``` #### 实施双击逻辑判定 一旦成功附加了上述提到的内容脚本至网页环境中,则可以利用JavaScript内置方法去捕捉鼠标的按键状态变化情况,并据此作出响应处理——当识别出有效的一组双击序列时就调用API函数执行关闭当前激活选项卡的动作。 ```javascript // content.js document.addEventListener('dblclick', function(event){ const activeTab = document.querySelector('.tab-selected'); // 假设这是获取选中的标签的方式 if(activeTab && event.target.closest('.tab-container')){ // .tab-container 是假设的包裹单个标签的容器类名 browser.tabs.remove(parseInt(activeTab.dataset.tabid)); // dataset-tabid 应存储真实的tab id } }, true); ``` 值得注意的是以上代码片段仅为示意性质,实际应用时还需要考虑更多细节问题比如不同版本间可能存在差异性的兼容性调整以及安全策略限制等因素影响下的解决方案设计。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值