应用于 Chrome 扩展的 Javascript 类 setAttribute

Question

我正在尝试通过 Google Chrome 扩展程序更改任何 Google 搜索中标题条目的属性。我所说的标题条目是指这些带红色下划线的条目:图片:http://postimg.org/image/sgsyccbpf/使用 Mozilla Firefox 检查器查看随机 Google 搜索的 HTML 代码:图片:http://postimg.org/image/gsywhsmkj/我的想法是通过查找类名“rc”来获取每个元素。也许这不是一个好主意，但我认为它会奏效。

为了开发 Chrome 扩展程序，我编写了这些文件:

list .json

{
    "name": "Test  1",
    "version": "1.0.0",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "https://*/*",
                "http://*/*",
                "<all_urls>"
            ],
            "js":         ["content_scripts.js"],
            "run_at":     "document_start",
            "all_frames": true
        }
    ]
}

content:scripts.js

var doFilter = function() { 
    var classR = document.getElementsByClassName("rc");

    for(var i=0; i < classR.length; i++) { 
        classR[i].setAttribute("style", "background-color:green"); 
        classR[i].setAttribute("align", "center");
    }
}

window.addEventListener("DOMContentLoaded", function() {
    doFilter(document.body);
});

这是我的扩展如何在我自己的 html 页面中工作的演示:图片:postimg.org/image/bdi02zvfl(这是一张图片的链接，但系统不允许我发布超过两张图片)

但是，在 Google 中正常搜索时它不起作用。每个“标题条目”都应该像演示中那样以绿色为背景并居中。

我错过了什么？

谢谢!

Answer 1

由于 Google 异步获取结果，您可以使用 MutationObserver 捕捉 DOM 中的变化并采取相应的行动。参见 this answer 以获得更详细的解释和示例代码。

下面是上述问题的代码，经过一些修改可以实现您想要的。编辑 modifyElem() 函数，几乎任何修改都应该很容易实现。

content.js:

console.log("Injected...");

/* MutationObserver configuration data: Listen for "childList"
 * mutations in the specified element and its descendants */
var config = {
    childList: true,
    subtree: true
};

/* Traverse 'rootNode' and its descendants and modify '.rc' elements */
function modifyElems(rootNode) {
    var nodes = [].slice.call(rootNode.querySelectorAll('.rc'));
    if (rootNode.className === 'rc') {
        nodes.push(rootNode);
    }
    while (nodes.length > 0) {
        var st = nodes.shift().style;
        st.backgroundColor = 'green';
        st.textAlign = 'center';
    }
}

/* Observer1: Looks for 'div#search' */
var observer1 = new MutationObserver(function(mutations) {
    /* For each MutationRecord in 'mutations'... */
    mutations.some(function(mutation) {
        /* ...if nodes have beed added... */
        if (mutation.addedNodes && (mutation.addedNodes.length > 0)) {
            /* ...look for 'div#search' */
            var node = mutation.target.querySelector("div#search");
            if (node) {
                /* 'div#search' found; stop observer 1 and start observer 2 */
                observer1.disconnect();
                observer2.observe(node, config);

                /* Modify any '.rc' elements already in the current node */
                modifyElems(node);

                return true;
            }
        }
    });
});

/* Observer2: Listens for element insertions */
var observer2 = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes) {
            [].slice.call(mutation.addedNodes).forEach(function(node) {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    modifyElems(node);
                }
            });
        }
    });
});

/* Start observing 'body' for 'div#search' */
observer1.observe(document.body, config);