javascript - .prepend() 到动态页面上所有带有 pageMod 和 jQuery 的链接

Question

我正在尝试使用 pageMod 将图像.prepend()添加到每个谷歌搜索结果链接中。它适用于第一个结果页面，但在加载其他页面或编辑搜索词时效果不佳。这是因为我的脚本是在页面末尾加载的，动态内容更改不会再次加载我的脚本。我该如何解决这个问题？

index.js

var self = require("sdk/self");
var pageMod = require("sdk/page-mod");

pageMod.PageMod({
  include: /^https?:\/\/.*\.google\..+/,
  contentStyleFile: self.data.url("style.css"),
  contentScriptFile: [self.data.url("jquery.min.js"), self.data.url("script.js")]
});

script.js

$('.r a').each(function(index) {
  var main = "http://****.***";
  var url = $(this).attr('href');

  $(this).prepend("<img width='16px' height='16px' src='" + main + url + "'> ");
})

Answer 1

您应该在托管搜索结果的父元素上使用 MutationObserver

var Col = document.getElementById('center_col');
if(Col) {
    var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // perform prepend image  
        }                       
    });    
    });                  

    var cfg = { attributes: true, attributeFilter : ['style'], childList: false };                    
    observer.observe(Col, cfg); 
}