Google chrome extension 使用Chrome扩展修改Google搜索结果页面

我想做一个Chrome扩展来修改谷歌搜索结果页面。我知道我可以使用内容脚本来做这件事，因为它有能力做到这一点。但不幸的是，它失败了。代码是我写的

$('h3.r').append('<b>a</b>')

或

，它起作用了。为什么？

---

顺便说一句，我想进行调试，但是当我打开开发工具时，我找不到扩展内容脚本。我可以看到其他扩展的内容脚本。

您是否将jQuery添加到清单中的内容脚本中

如果使用jQuery，则必须编写manifest.json，如下所示：

 "content_scripts":[
        {
            "matches":["http://www.google.com/*"],
            "js":["jquery-1.9.1.min.js", "contentscripts.js"]
        }
]

function findH3(){
  $('h3.r').append('<b>a</b>')

}

searchResultArea.addEventListener('DOMNodeInserted', findH3);

好的，在阅读了Google搜索结果页面的页面来源后，我想我知道问题出在哪里了：

Google使用AJAX加载搜索结果，因此，当您更改查询词并再次搜索时，页面会这样做　不刷新，这就是为什么不能在搜索结果中获取任何DOM元素

这意味着您必须为DomainNodeInserted添加一个事件侦听器

代码如下：

 "content_scripts":[
        {
            "matches":["http://www.google.com/*"],
            "js":["jquery-1.9.1.min.js", "contentscripts.js"]
        }
]

function findH3(){
  $('h3.r').append('<b>a</b>')

}

searchResultArea.addEventListener('DOMNodeInserted', findH3);

---

将目标URL的权限添加到清单文件

{
 ---
    "permissions": [
        "https: //www.google.co.in/*"
    ]
 ---
}

参考

---

是的，我有。现在绝对的问题是，我无法获得页面的任何DOM节点。虽然我添加了run_at:document，但脚本似乎是在加载DOM之前运行的_end@user2086454：您是否向清单添加了权限，共享了相关代码，这将非常有用。谢谢。我自己也弄明白了原因。我使用windows.onload来实现这一点，但我认为您的解决方案要好得多。但是这里出现了一个新问题：现在我可以获取DOM元素了，我已经将文本发出了警报。但我无法为它们指定样式属性。例如，我写了$'h3.r'。css'background-color'，'red'，什么都没发生。我已经解决了这个问题。似乎您应该先删除扩展，然后重新安装它，而不仅仅是刷新它。我不知道为什么，但它是有效的。重新加载并不那么漂亮：）