覆盖纯色或图像的div Chrome扩展程序

Question

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

我尝试为div添加背景颜色，但在尝试使div显示或隐藏时，我无法用消息覆盖它或将其变黑。

这是我能够实现的最佳目标：

第一个搜索字词包含关键字I＆＃39; m，因此会添加黑色背景。但我想隐藏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＆＃39;解决方案几乎工作，但失败了因为函数被调用太多次：

Answer 1

尝试使用jquery＆＃39; $.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);