使用Chrome扩展程序修改Google搜索结果页面

Question

我想制作Chrome扩展程序来修改Google搜索结果页面。我知道我可以使用内容脚本来执行此操作，因为它具有执行此操作的能力。但不幸的是它失败了。我写了代码

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

或与DOM操作相关的其他内容都失败了。但如果我刚写了

alert('aa')

或

document.body.style.backgroundColor='green'

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

Answer 1

您是否在清单中的content_scripts中添加了jQuery？

如果您使用jQuery，则必须像这样写manifest.json：

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

好的，在阅读谷歌搜索结果页面的页面源后，我想我知道问题是什么：

Google使用AJAX加载搜索结果，因此，当您更改查询字词并再次搜索时，页面无法刷新，这就是您无法在搜索结果中获取任何DOM元素的原因。

这意味着你必须为DOMNodeInserted添加一个事件监听器。

代码是这样的：

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

}

searchResultArea.addEventListener('DOMNodeInserted', findH3);

Answer 2

将您定位的URL（S）的权限添加到清单文件

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

参考

• Permissions