应用于Chrome扩展的Javascript类setAttribute

我试图通过谷歌浏览器的扩展来改变任何谷歌搜索中标题条目的属性。 我所说的标题条目是指以下带红色下划线的条目： 图片： 使用Mozilla Firefox inspector查看随机谷歌搜索的HTML代码： 图片： 我的想法是通过查找类名“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
        }
    ]
}

{
“名称”：“测试1”，
“版本”：“1.0.0”，
“清单版本”：2，
“内容脚本”：[
{
“匹配项”：[
“https://*/*”，
“http://*/*”，
""
],
“js”：[“content_scripts.js”]，
“运行时间”：“文档开始时间”，
“所有帧”：正确
}
]
}

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

var doFilter=function（）{
var classR=document.getElementsByClassName（“rc”）；
对于（var i=0；i

下面是我的扩展如何在我自己的html页面中工作的演示： Image:postimg.org/Image/bdi02zvfl（这是一个指向图像的链接，但系统不允许我发布两个以上的图像）

然而，在谷歌正常搜索时，它却不起作用。每一个“标题条目”都应该是绿色背景，并以演示为中心

我错过了什么

谢谢

您的

doFilter（）

函数仅在页面最初加载时运行一次，这意味着如果Google使用AJAX加载任何结果（通常是这样），您的代码将不会影响这些结果

让您的扩展插件使用您想要的样式向页眉添加一个

元素怎么样

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

.rc{背景色：绿色；文本对齐：居中；}

这样做还有一个额外的好处，即不必删除目标元素可能已经具有的任何

样式

属性

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

而不是：

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

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

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

处理jQuery函数时有很多混乱。据我所知，$（window）.load（）是在完全创建页面后执行的。 参考：

---

感谢@JLRishe的回复。

由于谷歌以异步方式获取结果，您可以使用捕获DOM中的更改并相应地采取行动。有关更详细的解释和示例代码，请参见

下面是上面问题中的代码，经过一些修改以实现您想要的功能。编辑

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);

---

我用您编写的代码创建了一个mystyles.css文件，并在清单中添加了行“css”：[“mystyle.css”]；但它不起作用。然而，在我们遵循这个解决方案之前，我应该说我的最终目标将包括对类“rc”的另一次检查，因此我肯定需要使用javascript对其进行评估。当AJAX代码已经被执行时，有什么方法可以执行脚本吗？在你提到我的线程中，我已经标记为接受你的非常精确的解决方案的可能副本。现在我也标记了这个。非常感谢。