Google Chrome 扩展程序 - 如何多次包含内容脚本？答案

【问题标题】：Google Chrome Extension - How can I include a content script more than once?Google Chrome 扩展程序 - 如何多次包含内容脚本？
【发布时间】：2010-07-21 13:15:26
【问题描述】：

过去几天我一直在为一个网站开发 Chrome 扩展程序。进展非常顺利，但我遇到了一个问题，您或许可以帮忙解决。

以下是扩展功能的概述（此功能已完成）：

用户可以在扩展弹出窗口中输入他们的用户名和密码 - 并验证他们在特定网站上的用户帐户
当用户浏览 http://twitter.com 时，会动态包含一个内容脚本，该脚本会操纵 DOM，以便在显示的每条推文旁边包含一个额外的按钮。
当用户单击此按钮时，他们会看到一个对话框

我已经取得了很大的进步，但这是我的问题：

当用户访问 Twitter 时，内容脚本被激活，页面上的所有推文都会获得我的新按钮 - 但如果用户随后单击“更多...”并动态加载接下来的 20 条推文...这些新添加到页面 DOM 不受内容脚本的影响（因为它已经加载）。

我可以向“更多...”按钮添加一个事件侦听器，然后它会再次触发原始内容脚本（并添加新按钮），但我必须预测 twitter 的 ajax 请求响应的长度。我无法利用他们的 Ajax 请求来获取更多推文并在请求完成后调用我的 addCurateButton() 函数。

您认为最好的解决方案是什么？（如果有的话）

【问题讨论】：

标签： ajax google-chrome google-chrome-extension

【解决方案1】：

您想要做的是每次更改 DOM 时重新执行您的内容脚本。幸运的是，有一个事件。 Have a look at the mutation event called DOMNodeInserted.

重写您的内容脚本，以便为 DOMNodeInserted 事件将事件侦听器附加到 DOM 主体。请看下面的例子：

var isActive = false;
/* Your function that injects your buttons */
var inject = function() {
  if (isActive) {
    console.log('INFO: Injection already active');
    return;
  }
  try {
    isActive = true;
    //inject your buttons here
    //for the sake of the example I just put an alert here.
    alert("Hello. The DOM just changed.");
  } catch(e) {
    console.error("ERROR: " + e.toString());
  } finally {
    isActive = false;
  }
};
document.body.addEventListener("DOMNodeInserted", inject, false);

最后一行将添加事件监听器。当页面加载时，该事件经常被触发，因此您应该定义一个布尔值（例如 var isActive），将其初始化为 false。每当运行注入函数时，检查 isActive == true 是否，然后中止注入以不同时执行太频繁。

【讨论】：

【解决方案2】：

与 Ajax 交互可能是哄骗内容脚本做的最困难的事情，但我认为您走在正确的轨道上。我采取了几种不同的方法来解决这个问题。不过，在您的情况下，我认为结合使用这两种方法（我将在最后解释）是最好的。

将事件侦听器附加到 DOM 以检测相关更改。这个解决方案就是你建议的，并引入了竞争条件。
从循环内部持续检查 DOM 是否有更改（最好是使用 setInterval 执行的更改）。这种解决方案会很有效，但效率相对较低。

两全其美的方法是仅在按下 more 按钮后启动检查循环。这种解决方案既可以避免时间问题，又可以提高效率。

【讨论】：

【解决方案3】：

您可以在按钮或用于获取更多结果的链接上附加事件处理程序。然后附加一个函数，这样每当单击按钮时，您的扩展程序都会从 DOM 中删除所有按钮并重新开始插入它们，或者检查您的按钮是否存在于该特定类 DOM 元素中，如果不存在则附加一个按钮不。

【讨论】：