chrome.tabs.onUpdated.addListener的应用

最新推荐文章于 2024-06-18 19:35:50 发布
原创 最新推荐文章于 2024-06-18 19:35:50 发布 · 7.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web #chrome #chrome插件 #javascript

在编写Chrome插件时，通过监听tabs.onUpdated事件来响应页面加载变化，但发现页面会在加载过程中多次触发。文章详细解释了这种现象的原因，并提供了在事件处理函数中加入判断条件（status为'loading'或'complete'）的方法，以确保事件仅执行一次，避免不必要的页面刷新。
编写chrome插件时，需要监听页面刷新事件，用
<span style="font-family:KaiTi_GB2312;font-size:18px;">chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
//代码段
}</span>
如果代码段用alert，你会发现页面会刷新两次到三次。这是因为

所以在tab更新url的时候，会有下面两种情况

1、访问url，触发事件，loading

2、访问url结束，触发事件，complete

所以可以在代码段添加一个限定条件：if (changeInfo.status == "loading"）或者if (changeInfo.status == "complete"），这样就可以执行一次了

Chrome 插件 onRequestFinished addListener removeListener 事件踩坑指南
weixin_40795574的博客
09-04 1627
Chrome 插件 onRequestFinished addListener removeListener 事件踩坑指南
CHROME扩展开发文档之单页面路由变化监控
slongzhang的博客
06-06 1534
在浏览器扩展开发中，传统的页面跳转是最简单的，每次页面更新就会重新注入新脚本，而单页面网站利用H5的history路由接口，页面变化了但扩展并不会自动更新脚本，这时候就需要我们自己判断处理了
Chrome扩展程序开发新手指南：事件监听器的应用技巧
Yong.Sunshine
06-18 3057
最近我在开发Chrome浏览器插件时，遇到了一个需要脚本初始化的问题。在插件被安装后或浏览器标签页被刷新时，我需要重新初始化插件。为了实现这一点，我研究了Chrome提供的几个API接口，它们分别是`chrome.runtime.onInstalled.addListener`、`chrome.runtime.onStartup.addListener`以及`chrome.tabs.onUpdated.addListener`。在本文中，我将对这三个关键事件监听器进行梳理，并详细说明它们之间的区别。
Chrome 插件页面加载完成事件后注入js
qq_18882253的博客
03-16 6226
chrome在页面加载完成后注入JavaScript
chrome扩展 tab的onupdate事件
东升红日辉万里，明泽润物彻古今
10-13 1053
最近在写一个小东西，发现以前知道的一些小细节竟然忘记了，很多恍然大悟之后感觉很幼稚的东西还是挺打击人的，小记于此，便于查询 chrome的开发环境提供了tab的一系列监听事件其中一个是 onUpdate事件 [url]https://developer.chrome.com/extensions/tabs.html#event-onUpdated[/url] 官方api的写法对我来讲还是...
chrome扩展 检测页签变化之onUpdated
东升红日辉万里，明泽润物彻古今
11-16 829
做了一个功能，要根据chrome的当前页签tab的变化来执行一段代码 查看api，找到了下面这个方法 [code="js"]chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab) { var url = tab.url; alert(url); });[/code] 但是在程序运行的时候（在地...
如何安全地处理 `chrome.tabs.sendMessage` 的错误情况？
最新发布
11-22
chrome.tabs.onUpdated.addListener(listener); } }); function sendMessageToTab(tabId) { chrome.tabs.sendMessage(tabId, { action: 'myAction' }, (response) => { if (chrome.runtime.lastError) { ...
Uncaught TypeError: chrome.tabs.executeScript is not a function
03-13
接下来，根据用户提供的引用内容，引用[3]提到了使用chrome.proxy和chrome.tabs.onUpdated，这说明用户可能在开发涉及标签页和代理切换的扩展。可能用户尝试在标签页更新时注入脚本，但未正确配置权限或参数，导致...
chrome插件API中文版
12-24
9. **事件监听**：许多API提供了事件监听功能，比如`chrome.tabs.onUpdated`可以监听标签页状态的变化。 10. **权限检查**：在插件运行时，Chrome会根据manifest.json中的权限声明进行检查，防止不安全的操作。 ...
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist. 上下文 extension://fphjgeldnmogpddakiphkcpdnibnccoj/popup.html
08-13
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { // 确保页面加载完成 if (changeInfo.status === 'complete') { // 发送消息 chrome.tabs.sendMessage(tabId, {...}, ...); } }); ``` ...
background.js中调用页面事件
09-26
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (changeInfo.status === 'complete') { // 页面加载完成 chrome.tabs.sendMessage(tabId, { event: 'pageLoaded' }); } }); chrome....
google控件-错误：tabs.onUpdated 重复调用-1.1
caishu1995的博客
01-11 637
    先说下是在哪的。在background.js里面 chrome.tabs.onUpdated.addListener(initialize); function initialize(tabId, changeInfo, tab){}     不过很郁闷的是，这个页面是在后台自行运行的。所以我无法通过console.log输出任何东西。。。幸好我们还有alert能弹出一点东西。。。...
chrome插件开发
weixin_34294649的博客
04-21 131
开发Chrome插件，如抢票、秒杀、页面数据抓取等，可以搜集一些数据。 开发插件需要的东西：manifest.json popup.html popup.js content-script.js background.js 配置文件：manifest.json { "name": "webtrendsTool", "manifest_version": 2, ...
html tabs改变长宽,将HTML内容从chrome.tabs. onupdates中更改为HTML内容
weixin_34145350的博客
06-26 243
3The problem:You are injecting background.js as a content script. (Chrome does not care what you name it, just that you put it in content_scripts's js array) So, basicaly, you can use jQuery to direct...
chrome插件-标签页更新事件总是连续发生两次
LUCKYOJ
12-18 3040
web初学者，很多都没遇到过。 编写chrome插件的时候，在background.js中监控标签页刷新事件的时候，发现总是一下子调用两次回调函数。 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){ // 做事情 }); 原来是因为，在整个页面的重新加载过程中，changleInfo会发生变化，一次
chrome.extension tabs.onUpdated执行两次的问题
weixin_33757911的博客
04-15 415
2019独角兽企业重金招聘Python工程师标准>>> ...
CHROME扩展笔记之页面更新监听
热门推荐
slongzhang的博客
08-15 14万+
/** * 监听tab页面变化(用于处理页面logo问题) */ chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){ if( changeInfo.url == undefined){return false;} // 检查是否是wish页面的tab if(tab.url.indexOf('pinterest.com') > 0){ // 通知对应的tab页面url变化了,需要优化为离开立即移除，进入则加载完毕再
chrome扩展
xuyongblog
11-09 1047
【代码】chrome扩展。
如何在谷歌浏览器插件中监控页面的打开关闭
m0_57236802的博客
08-25 2527
在谷歌浏览器插件中，您可以使用 Chrome Extensions API 来监控标签页的打开和关闭。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值