11

我正在创建一个 Google Chrome 扩展程序,我需要检测页面标题何时更改。该页面的标题更改为 Twitter 中的一样:((num) Twitter请参见下面的屏幕截图) - 当发布新推文时,数字会增加。例子:

在此处输入图像描述

我正在尝试检测加载在我的一个选项卡中的 URL 的标题更改,并在有差异时播放哔声。此检查将在重复的时间间隔内完成,我认为可以使用setTimeOut()函数来完成。

我创建了一个manifest.json如下:

{
  "manifest_version": 2,

  "name": "Detect Page Title Changes",
  "description": "Blah",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "background.html"
  },
  "permissions": [
    "tabs"
  ]
}

然而,我对其余的一无所知。我搜索了文档并在类似的 Stack Overflow 线程上尝试了解决方案,例如,但找不到任何适合我要求的东西。1 2

你有什么建议吗?如果可能,请举一个例子。

4

4 回答 4

18

与其在评论中争论某种方法更好,不如让我更具建设性,并通过展示我自己共同编写的特定实现来添加答案,并解释您可能遇到的一些问题。代码片段指的是与 Twitter 不同的服务,但目标是相同的。实际上,此代码的目标是报告未读消息的确切数量,因此您的可能更简单。

我的方法是基于 SO 上的答案,而不是轮询驱动(以固定间隔检查条件)是事件驱动(被通知条件的潜在变化)。

优点包括立即检测到更改(否则在下一次轮询之前不会检测到),并且在条件不变的情况下不会在轮询上浪费资源。诚然,第二个论点在这里几乎不适用,但第一个论点仍然成立。


架构概览:

  1. 将内容脚本注入相关页面。

  2. 分析标题的初始状态,通过 . 向后台页面报告sendMessage

  3. 为标题更改事件注册一个处理程序。

  4. 每当事件触发并调用处理程序时,分析标题的新状态,通过sendMessage.


第 1 步已经有了问题。正常的内容脚本注入机制,当内容脚本在清单中定义时,将在导航到与 URL 匹配的页面时将其注入页面。

"content_scripts": [
  {
    "matches": [
      "*://theoldreader.com/*"
    ],
    "js": ["observer.js"],
    "run_at": "document_idle"
  }
]

这工作得很好,直到你的扩展被重新加载。这可能发生在开发中,因为您正在应用所做的更改,或者在部署的实例中,因为它是自动更新的。然后发生的事情是内容脚本不会重新注入现有的打开页面(直到发生导航,如重新加载)。因此,如果您依赖基于清单的注入,您还应该考虑在扩展初始化时将编程注入包括到已经打开的选项卡中:

function startupInject() {
  chrome.tabs.query(
    {url: "*://theoldreader.com/*"},
    function (tabs) {
      for (var i in tabs) {
        chrome.tabs.executeScript(tabs[i].id, {file: "observer.js"});
      }
    }
  );
}

另一方面,在扩展重新加载时处于活动状态的内容脚本实例不会终止,而是孤立的:任何sendMessage或类似的请求都会失败。因此,建议在尝试与父扩展通信时始终检查异常,如果失败则自行终止(通过删除处理程序):

try {
  chrome.runtime.sendMessage({'count' : count});
} catch(e) { // Happens when parent extension is no longer available or was reloaded
  console.warn("Could not communicate with parent extension, deregistering observer");
  observer.disconnect();
}

第 2 步也有一个问题,尽管它取决于您正在观看的服务的具体情况。内容脚本范围内的某些页面不会显示未读项目的数量,但这并不意味着没有新消息。

在观察了 Web 服务是如何工作的之后,我得出结论,如果标题更改为没有导航的内容,如果正确,可以假设新值是安全的,但是对于初始标题,“没有新项目”应该被忽略为不可靠。

因此,分析代码说明了它是初始读取还是处理更新:

function notify(title, changed) {
  // ...
  var match = /^\((\d+)\)/.exec(title);
  var match_zero = /^The Old Reader$/.exec(title);

  if (match && match[1]) {
    count = match[1];
  } else if (match_zero && changed) {
    count = 0;
  }
  // else, consider that we don't know the count
  //...
}

在步骤 2 中使用初始标题和changed=调用它。false


第 3 步和第 4 步是“如何观察标题更改”的主要答案(以事件驱动的方式)。

var target = document.querySelector('head > title');

var observer = new window.MutationObserver(
  function(mutations) {
    mutations.forEach(
      function(mutation){
        notify(mutation.target.textContent, true);
      }
    );
  }
);

observer.observe(target, { subtree: true, characterData: true, childList: true });

有关为什么observer.observe设置某些选项的详细信息,请参阅原始答案

请注意,它notify是用changed=调用的true,因此在没有导航的情况下从“(1) The Old Reader”到“The Old Reader”被认为是对零未读消息的“真实”更改。

于 2014-04-10T13:29:33.633 回答
11

放入chrome.tabs.onUpdated.addListener你的后台脚本:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
   console.log(changeInfo);
});

changeInfo是一个包含标题更改的对象,例如这里:

这

changeInfo然后可以对对象进行过滤,以便仅在包含标题更改时才发生操作。对于其他操作,例如响应页面内容/操作的页面标题更改,您可以在满足任何条件后从侦听器内部向内容脚本发送消息。

于 2016-10-20T11:55:38.637 回答
9
  1. 创建活动页面

  2. 创建一个在网页加载时注入网页的内容脚本。

  3. 在内容脚本中,用于setInterval轮询页面以查看是否window.document.title更改。

  4. 如果标题已更改,请使用chrome.runtime.sendMessage向您的活动页面发送消息。

  5. 在您的活动页面上,使用 收听消息chrome.runtime.onMessage播放声音

于 2013-07-27T08:18:15.333 回答
7

在研究了 Chrome 的标签 API 之后,它看起来并没有什么特别的东西可以直接帮助你。但是,您应该能够将事件侦听器附加到您感兴趣的选项卡的标题节点。 DOMSubtreeModified 突变事件在 Chrome 中有效,并且在普通 html 文档中进行快速测试证明对我有用 -应该与扩展内没有什么不同。

var title = document.getElementsByTagName('title')[0];

if (title) {
    title.addEventListener('DOMSubtreeModified', function (e) {
        // title changed
    }, false);
}

于 2013-07-27T16:24:18.277 回答