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

Question

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

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

或其他与 DOM 操作相关的事情，他们都失败了。但如果我只是写

alert('aa')

或者

document.body.style.backgroundColor='green'

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

Answer 1

您是否将 jQuery 添加到 list 中的 content_scripts 中？

如果你使用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);