Question

我正在尝试将<img>元素附加到我的Chrome扩展程序的内容脚本中的<span>。但是，如body中所述，当我附加到document的{{1}}时，附加似乎只会产生效果。要重现此，请单击以下链接并打开开发工具：

http://kart.finn.no/?mapType=norge&tab=soek_i_annonser&searchKey=search_id_realestate_lettings&mapTitle=Kart+over+bolig+til+leie+&ztr=1&

搜索content-script.js为<img>的{{1}}。它将在追加到id时定义，但在所有其他情况下追加seenIcon。

body

undefined

manifest.json

{
    "manifest_version": 2,

    "name": "Finn.no Property Blacklist",
    "description": "Hides finn.no property search results that you've marked as \"seen\".",
    "version": "1.0",

    "permissions": [
        "activeTab",
        "http://kart.finn.no/*",
        "storage"
    ],
    "content_scripts": [
        {
            "matches": ["http://kart.finn.no/*"],
            "js": ["content-script.js"]
        }
    ],
    "web_accessible_resources": [
        "*.png"
    ]
}

content-script.js

为什么更改没有反映在DOM中？

Answer 1

该节点由网站重新创建，因此您需要在首次出现后等待一段时间，然后再添加新图像。

我使用MutationObserver的简单用户对其进行了测试，每次.imagePoi添加到文档时都会添加新图标，包括前两次出现以及后续放大/缩小。

setMutationHandler(document, '.imagePoi', function(observer, node) {
  node.parentNode.insertAdjacentHTML('beforeend',
    '<img src="http://www.dna-bioscience.co.uk/images/check-mark.gif">');
});

function setMutationHandler(baseNode, selector, cb) {
  var ob = new MutationObserver(function(mutations) {
    for (var i=0, ml=mutations.length, m; (i<ml) && (m=mutations[i]); i++)
      for (var j=0, nodes=m.addedNodes, nl=nodes.length, n; (j<nl) && (n=nodes[j]); j++)
        if (n.nodeType == 1) 
          if (n = n.matches(selector) ? n : n.querySelector(selector))
            if (!cb(ob, n))
              return;
  });
  ob.observe(baseNode, {subtree:true, childList:true});
}

您可以利用.imagePoi的突变记录target在其班级列表中finnPoiLayer这一事实来简化处理程序。但是当网站布局略有变化时，它很容易破裂。

无法将<img/>附加到Chrome扩展程序的内容脚本中的<span>中

1 个答案: