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

【问题标题】：.prepend() to all links with pageMod and jQuery on dynamic pages.prepend() 到动态页面上带有 pageMod 和 jQuery 的所有链接
【发布时间】：2015-11-19 18:58:27
【问题描述】：

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

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 + "'> ");
})

【问题讨论】：

标签： javascript jquery dom firefox-addon-sdk

【解决方案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); 
}

【讨论】：

尽快测试一下！非常感谢您！