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

Getting the page events, tab closed, lost focus?

本文关键字：失去 焦点 选项 事件 获取      更新时间：2023-09-26

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

  • 用户已使用特定的URL加载了选项卡，例如：google.com（我认为最简单的方法是使用chrome.tabs.query，然后您可以获取带有url的活动选项卡）
  • 用户已关闭选项卡
    • 标签
  • 处于非活动状态，就像切换到另一个标签页一样
  • 检查用户是否空闲（还有用于空闲的 chrome api）。
目前，我已经

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

不能在特定选项卡上为此类事件注册侦听器。有不同的方法，但我建议使用 chrome.tabs.* 事件来侦听有关所有选项卡的事件，然后手动进行过滤。

[注意：您需要在清单中请求必要的权限，例如"选项卡"、"空闲"、主机匹配模式等]

用户已使用特定 URL 加载选项卡，例如：google.com

为以下事件附加侦听器：

  • chrome.tabs.onCreated
  • chrome.tabs.on更新

。，然后根据 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.on已删除

。，然后根据 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 事件，并跟踪每个窗口中的活动选项卡。然后，当激活另一个选项卡时，如果先前激活的选项卡指向 google.com，请执行某些操作。（我不打算详细描述一种机制）。
对于这种特殊情况，使用内容脚本并在停用选项卡时通知背景页面可能更简单： 

 /* 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 :( */
    }
});

检查用户是否空闲。

您无法检查用户在特定选项卡方面是否处于非活动状态，但通常处于非活动状态。正如你提到的，你可以使用 chrome.idle API，为 chrome.idle.onStateChanged 事件注册一个侦听器。

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... */
    }
});
相关文章：