获取页面事件、选项卡关闭、失去焦点?

2024-04-01

问题是如何在特定选项卡上查询此类事件:

  • 用户已加载具有特定 URL 的选项卡,例如:google.com(我认为最简单的方法是使用 chrome.tabs.query,然后您可以获取带有 url 的活动选项卡)
  • 用户已关闭选项卡
  • 该选项卡处于非活动状态,例如切换到另一个选项卡
  • 检查用户是否空闲(还有空闲的 chrome api)。

目前,据我研究,检查指定 URL 操作的最简单方法是使用内容脚本,它可以侦听事件,然后使用消息 API 将结果发送到后台脚本。


您无法在特定选项卡上注册此类事件的侦听器。有不同的方法可能,但我建议使用chrome.tabs.* http://developer.chrome.com/extensions/tabs.htmlevents 用于侦听有关所有选项卡的事件,然后手动进行过滤。

[Note:您需要请求必要的权限 http://developer.chrome.com/extensions/declare_permissions.html在你的清单中,例如"tabs" http://developer.chrome.com/extensions/declare_permissions.html#tabs, "idle" http://developer.chrome.com/extensions/declare_permissions.html#idle, the 主机匹配模式 http://developer.chrome.com/extensions/declare_permissions.html#host-permissions etc.]


用户已加载具有特定 URL 的选项卡,例如:谷歌网站

附加以下事件的侦听器:

  • chrome.tabs.onCreated http://developer.chrome.com/extensions/tabs.html#event-onCreated
  • chrome.tabs.on更新 http://developer.chrome.com/extensions/tabs.html#event-onUpdated

...然后根据 URL 进行过滤。例如。:

var urlRegex = /https?:\/\/([^\.]+\.)?google.com/;
chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
    if (info.url && urlRegex.test(info.url)) {
        /* The tab with ID `tabId` has been updated to a URL
         * in the `google.com` domain. Let's do something... */
        ... 
    }
});

用户已关闭该选项卡。

附加以下事件的侦听器:

  • chrome.tabs.onRemoved http://developer.chrome.com/extensions/tabs.html#event-onRemoved

...然后根据 URL 进行过滤。例如。:

var urlRegex = ...;
chrome.tabs.onRemoved.addListener(function(tabId, info) {
    chrome.tabs.get(tabId, function(tab) {
        if (urlRegex.test(tab.url)) {
            /* The tab with ID `tabId`, with a web-page in the
             * `google.com` domain, is being closed. Let's do something... */
            ... 
        }
    });
});

该选项卡处于非活动状态,就像切换到另一个选项卡一样。

不幸的是,这儿没有onFocusLost事件。你可以听听chrome.tabs.onActivated http://developer.chrome.com/extensions/tabs.html#event-onActivated事件并跟踪每个窗口中的活动选项卡。然后,当激活另一个选项卡时,如果先前激活的选项卡指向,则执行某些操作谷歌网站。 (我不会详细描述机制)。
对于这种特殊情况,使用内容脚本可能会更简单通知您的后台页面 http://developer.chrome.com/extensions/messaging.html#simple当选项卡停用时:

 /* In `content.js` */
 window.addEventListener("blur", function() {
     chrome.runtime.sendMessage({ text: "focusLost" });
 })

/* In `background.js` */
chrome.runtime.onMessage.addListener(function(msg, sender) {
    if (msg.text === "focusLost") {
        /* OMG - The user switched to another tab :( */
    }
});

检查用户是否空闲。

您无法检查用户是否在特定选项卡上处于非活动状态,但一般而言。正如您提到的,您可以使用铬.空闲API,注册一个监听器chrome.idle.onStateChanged http://developer.chrome.com/extensions/idle.html#event-onStateChanged event.

chrome.idle.onStateChanged.addListener(function(newState) {
    if (newState == "active") {
        /* The user came back. Let's do something... */
    } else {
        /* The user is not around. Let's wait... */
    }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

获取页面事件、选项卡关闭、失去焦点? 的相关文章

  • require('babel/register') 不起作用

    我在客户端上有一个用 ES6 编写的同构应用程序Babel 转译器 http babeljs io 我希望我的 Express 服务器具有与客户端代码相同的 ES6 语法 很遗憾require babel register 不起作用 服务器
  • 在 Node.js 中包含另一个文件中的 JavaScript 类定义

    我正在为 Node js 编写一个简单的服务器 并且使用我自己的类 名为User看起来像 function User socket this socket socket this nickname null just the typical
  • ES6 类文字中的 IIFE

    在 ES5 中我们都可以这样做 myClass prototype myMethod function return function 我可以对 ES6 类文字执行同样的操作吗 不 至少现在还没有 ES6 类仅支持声明方法 因此任何不直接为
  • 有没有办法将 Google 文档分割成多个 PDF?

    我想在 Google Scripts VBA 代码中复制我为 Word 文档编写的代码 基本上 它通过搜索我插入文档中的标签 将文档 切片 为多个 PDF 文件 目的是允许合唱团使用 forScore 管理乐谱的应用程序 在切片点插入先前注
  • Javascript 无法正确排序 DECIMAL 数字

    我有一些代码可以按字母顺序对名称进行排序 我遇到的问题是它处理小数的方式 它对名称进行排序 如下所示 我宁愿它按数字递增 DOG 1 0510 DOG 1 1031 DOG 11 1792 DOG 12 0920 DOG 12 1170 D
  • 使用 jquery 更改锚文本和图标

    我有一个隐藏或显示 div 的锚标记 但我无法更改它的文本和图标 如何更改文本和图标标签 因为目前它将图标标签解析为常规文本 锚标记 a class collapse info btn i class icon arrow up icon
  • 在Javascript中将RGB数组转换为RGBA数组的快速方法

    我正在使用的模拟器在内部存储 RGB 值的一维帧缓冲区 但是 HTML5 画布在调用 putImageData 时使用 RGBA 值 为了显示帧缓冲区 我当前循环遍历 RGB 数组并以某种方式创建一个新的 RGBA 数组与此类似 https
  • 预加载 javascript 和 css 文件

    我目前正在开发一个移动网站 该网站大量使用图像 CSS 和 JavaScript 例如 它使用未压缩的 150KB 的库 我为图像构建了一个预加载器 效果相当好 function loadImages images var sum 0 fo
  • 如何将OpenLayers多边形坐标转换为纬度和经度?

    我正在使用开放层 https openlayers org en latest examples draw freehand html绘制多边形并保存坐标的技术 这是我的代码 var raster new ol layer Tile sou
  • 如何获取 Spotify API 的访问令牌?

    我已经研究 Spotify api 和示例源代码几天了 但我仍然不知道如何获取访问令牌来访问用户的播放列表数据 我已经到达了拉起登录窗口 用户登录 然后收到授权码的地步 此时 我尝试做这样的事情 window open https acco
  • 将屏幕宽度获取到 javascript 变量中并通过 ajax 将其发送到 php 页面以避免页面加载

    这是JS检测我的页面命名上的屏幕分辨率index html并将其发送到 php 以便可以使用以下方式检索值 GET 这是我的PHP文件命名的内容process php
  • Flask 和 Reactjs 抛出 JSX 转换错误

    我已经开始将 ReactJS 与 Python Flask 后端结合使用 通过 Flask 渲染模板时 我在 Chrome 控制台中收到以下客户端错误 错误 找不到模块 jstransform visitors es6 templates
  • Jquery Ajax 调用返回 403 状态

    我有一个 jquery Ajax 调用来实现会话的 keepalive 这个 keepAlive 方法将每 20 分钟调用一次 function keepAlive ajax type POST url KeepAliveDummy asp
  • redux - 如何存储和更新键/值对

    我正在使用 redux 和 React js 我想存储简单的键 值对 但无法获得正确的减速器语法 在这种情况下 每个键 值对将保持与外部系统的连接 这是正确的做法吗 我刚开始使用 redux 所以这有点神秘 export default s
  • React Router Tabs——保持组件安装

    我使用 React Router 创建了选项卡 每个选项卡都有不同的路线 但是 我想通过保持隐藏选项卡的安装来维护选项卡转换之间的选项卡状态 我该如何实现这一目标 每次路由切换时 React 路由器都会重新安装每个组件 已经有人问过这个问题
  • javascript 闭包和对象引用

    我的情况有点晦涩难懂 主要是因为我认为我已经掌握了闭包 所以基本上我想要的是将集合重置为默认值 假设我有一个集合 它具有带有对象参数数组的构造函数 var c new collection x y z 然后集合定期更新 因为我没有保留数组的
  • 引导网格中的绘图图周围有巨大的空白

    我有一个 Net 应用程序 我试图在其中使用创建一个图表bootstrap js and plotly js 当我创建响应式图表时 我遇到网格中存在巨大空白的问题 我发现问题的一部分是plotly svg container的大小默认高度为
  • 如何使用 Chart.js 版本 3.2.1 在圆环图中添加文本

    我正在使用 Canvas 在 HTML 中使用 如何使用在圆环图中添加文本 这是我的 javascript 代码和 HTML 代码 我使用了图表js版本3 2 1 所以请给出相同版本 3 的解决方案 var overallStatsCanv
  • 为什么 phantomjs 不能在 MacOS Sierra 中工作?

    我们正在使用phantomjs 1 9 1 macosx phantomjs 2 0 0 macosx哪一个工作得很好OS X 埃尔卡皮坦更新后macOS 塞拉利昂它会引发以下错误 phantomjs 1 9 1 macosx phanto
  • 尽管 getBoundingClientRect() 是假的,但如何将事件坐标转换为 SVG 坐标?

    我正在尝试根据鼠标的位置在 SVG 元素上动态绘制内容 不幸的是 我很难将 mousemove 事件中的鼠标坐标转换为 SVG 元素的坐标空间 这是我一直在测试的一个有缺陷的函数 CylinderDemo prototype handleM

随机推荐