使用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"]
        }
]

OK，看了谷歌搜索结果页面的页面源码，我想我知道问题所在了：

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

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

代码是这样的：

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

}

searchResultArea.addEventListener('DOMNodeInserted', findH3);