我有一个chrome扩展程序,可以在网站上进行一些更改(编辑评论)。
在站点上进行了最近更改之后(站点不是我的站点)-使用ajax加载了注释块(之前是简单的发布请求,整个页面都重新加载了)。
现在,如果我第一次加载页面-内容脚本可以工作,但是当我转到下一页时,说页面#2-使用ajax添加注释,并且不再运行扩展脚本。所以评论并没有改变我想要的方式。
有没有简单的方法来监听页面更改DOM并再次应用扩展脚本?
在清单文件中,我有:
{ "name": "Name", "version": "1.0", "description": "Description", "icons": {"16":"16.png", "48":"48.png", "32":"32.png", "128":"128.png"}, "browser_action": { "default_title": "Default title", "default_icon": "48.png", "popup": "popup.html" }, "permissions": [ "tabs", "http://www.site.com/*", "notifications", "unlimitedStorage" ], "options_page": "options.html", "background_page": "background.html", "content_scripts": [ { "matches": ["http://www.site.com/*","https://www.site.com/*"], "js": ["jquery-1.7.1.min.js","content.js"], "run_at": "document_end" }] }
您可以在名为的事件上添加一个侦听器DOMSubtreeModified。将一个函数绑定到它,只要有更改,它就会被调用。
DOMSubtreeModified
在jQuery中:
$('#ContentContainer').bind('DOMSubtreeModified',modifyComments);
更新:
如果事件触发多次,请在第一次时删除事件绑定,并且在一定的超时后,可以调用ModifyComments并重新绑定事件。
function DOMModificationHandler(){ $(this).unbind('DOMSubtreeModified.event1'); setTimeout(function(){ modifyComments(); $('#ContentContainer').bind('DOMSubtreeModified.event1',DOMModificationHandler); },1000); } //after document-load $('#ContentContainer').bind('DOMSubtreeModified.event1',DOMModificationHandler);