javascript - 用纯色或图像覆盖 div Chrome 扩展

Question

我目前正在构建一个 Chrome 扩展程序，旨在阻止 Google 搜索中的某些内容。如果搜索结果包含特定关键字，我的目标是将其涂黑并警告用户搜索结果中存在特定关键字。

我尝试向 div 添加背景颜色，但在尝试使 div 可见或隐藏时，我无法用消息覆盖它或将其涂黑。

这是我所能达到的最好成绩:

第一个搜索词包含我要查找的关键字，因此向其添加了黑色背景。但我想隐藏 div 并只显示带有一些警告消息的黑色背景。此外，当用户单击警告消息时，他们应该能够查看被阻止的内容。

有什么简单的方法可以做到这一点吗？

我已经尝试将另一个 div 添加到具有关键字的 div 之前，然后使用关键字隐藏 div。此方法不起作用，因为我正在使用事件监听器来检查何时加载了搜索的所有 DOM 元素，因此使用此方法会导致多次创建 div 并导致调用堆栈溢出。

这是我的 manifest.json 文件:

{
    "manifest_version": 2,
    "name": "Replace Text",
    "version": "1.0", 

    "browser_action": {
        "default_popup": "popup.html"
    },

    "web_accessible_resources": [
        "googlestyles.css"
    ],

    "content_scripts": [ {
        "css":        ["googlestyles.css"],
        "js": [ "jquery-1.12.3.js", "content.js" ],
        "matches": [ "<all_urls>" ],
        "run_at": "document_end"
    } ]
}

这是我的 content.js 文件:

function replaceDivs() {
    var divs = document.getElementsByClassName("g");
    console.log(divs);
    for (var i = 0; i < divs.length; ++i) {
        var string = divs[i].innerText;
        var substr = "information"; //keyword to look for, in this case I picked a word that showed up on the first result.
        //            console.log(divs[i].getAttribute('id'));
        if (string.indexOf(substr) > -1) {
            divs[i].id = "num" + i.toString();
            $('#num' + i.toString()).addClass("black-bg");
            //$('#num' + i.toString()).prepend("<p>Test</p>") This is the part that went horribly wrong when I tried it.
        }
    }
}

$(document).ready(function () {
    console.log("test");
    document.addEventListener('DOMNodeInserted', replaceDivs);
});

最后，我的自定义 css 添加黑色背景:

.black-bg {
    width: 100%;
    height: 100%;
    background: black !important;
}

我需要做的就是能够用图像或颜色完全覆盖现有的搜索结果，然后在单击图像或颜色时将其完全显示出来。但是我已经为这部分苦苦挣扎了一段时间。

如能提供有关如何解决此问题的任何帮助，我们将不胜感激。

编辑:Paradoxis 的解决方案几乎可以工作，但失败了，因为该函数被调用了太多次:

Answer 1

尝试使用 jquery 的 $.append()，看看这个 jsfiddle我做的真快

var width = $("#result").outerWidth();
var height = $("#result").outerHeight();

var $cover = $("<div class='coverme'></div>");
    $cover.width(width);
    $cover.height(height);
    $cover.css("top", $("#result").offset().top);
    $cover.css("left", $("#result").offset().left);

$("body").append($cover);