我正在创建一个 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"
  ]
}

但是，我对其余部分一无所知。我搜索了文档 ^{1 2} 并在类似的 Stack Overflow 线程上尝试了解决方案，例如 this one我却找不到适合我要求的东西。

您有什么建议吗？如果可能，请提供示例。

最佳答案

与其在评论中争论某种方法更好，不如让我更具建设性并通过显示 particular implementation 添加答案。我与人合着，并解释了一些您可能会遇到的问题。 代码片段指的是与 Twitter 不同的服务，但目标是相同的。事实上，这段代码的目标是报告未读消息的确切数量，因此您的可能更简单。

我的方法基于 an answer在 SO 上，轮询驱动(按固定时间间隔检查条件)是事件驱动(通知条件的潜在变化)。

优点包括立即检测到变化(否则直到下一次轮询才会检测到)，并且在条件未发生变化时不会在轮询上浪费资源。诚然，第二个论点在这里几乎不适用，但第一个论点仍然成立。

架构一览:

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

2. 分析标题初始状态，通过sendMessage上报给后台。

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

4. 每当事件触发并调用处理程序时，分析标题的新状态，通过sendMessage报告给后台页面。

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

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

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

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 步也有一个陷阱，尽管它取决于您正在观看的服务的具体情况。 content script范围内的部分页面不会显示未读条数，但不代表没有新消息。

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

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

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 某些选项的具体原因，请参阅 original answer .

请注意，notify 是通过 changed = true 调用的，因此从“(1) The Old Reader”变为“The Old Reader” "没有导航被认为是对零未读消息的“真正”更改。

关于javascript - 如何从扩展程序检测 Google Chrome 中的页面标题更改？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17894594/