过去几天我一直在为一个网站开发 Chrome 扩展程序。进展非常顺利,但我遇到了一个问题,你也许可以帮助解决。
以下是该扩展程序的功能概述(此功能已完成):
- 用户可以在扩展程序弹出窗口中输入用户名和密码 - 并验证其特定网站的用户帐户
- 当用户浏览http://twitter.com时动态包含一个内容脚本,用于操纵 DOM 在显示的每条推文旁边包含一个额外的按钮。
- 当用户单击此按钮时,会出现一个对话框
我已经取得了很多进步,但这是我的问题:
当用户访问 Twitter 时,内容脚本被激活,页面上的所有推文都会获得我的新按钮 - 但如果用户随后单击“更多...”并动态加载接下来的 20 条推文...这些新添加的内容页面 DOM 不受内容脚本的影响(因为它已经加载)。
我可以向“更多...”按钮添加一个事件监听器,以便它再次触发原始内容脚本(并添加新按钮),但我必须预测 twitter 的 ajax 请求响应的长度。 我无法利用他们的 Ajax 请求来获取更多推文,也无法在请求完成后调用我的 addCurateButton() 函数。
您认为最好的解决方案是什么? (如果有的话)
最佳答案
您想要做的是每次 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);
最后一行将添加事件监听器。当页面加载时,事件会经常触发,因此您应该定义一个 bool 值(例如 var isActive),并将其初始化为 false。每当运行注入(inject)函数时,检查是否 isActive == true,然后中止注入(inject),以免同时执行得太频繁。
关于ajax - Google Chrome 扩展 - 如何多次包含内容脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3299594/