Question

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

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

的manifest.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
        }
    ]
}

内容：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);

Answer 2

您的doFilter()功能仅在网页初次加载时运行一次，这意味着如果Google使用AJAX加载任何结果（通常情况下），则代码不会影响它们。

如何让您的扩展程序向页眉添加<style>元素并使用您想要的样式？

<style>
.rc { background-color: green; text-align: center; }
</style>

这样做的另一个好处是不会消除目标元素可能已有的任何style属性。

Answer 3

$(window).load(function() {
    doFilter(document.body);;
});

而不是：

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

解决了我的问题。我还必须下载jquery.js库文件并在清单中引用它：

"js":         ["jquery.js", "content_scripts.js"],

处理jQuery函数存在很多困惑。据我所知，$（window）.load（）是在页面完全创建后执行的那个。参考：jQuery - What are differences between $(document).ready and $(window).load? 谢谢@JLRishe的回复。

应用于Chrome扩展程序的Javascript类setAttribute

3 个答案: