使用Chrome扩展程序修改Google搜索结果页 [英] Use Chrome Extension to Modify Google Search Result Page

问题描述

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

  $（'h3.r'）。append（'< b> a< / b>' ）
  

或其他与DOM操作相关的东西都是失败的。但如果我只写了

$ p $ alert（'aa'）


或

  document.body.style.backgroundColor ='green' 
  

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

解决方案

您是否在清单中将jQuery添加到content_script中？
$ b

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

I wanna make a Chrome extension to modify Google search result page. I know I can use content script to do this because it has the ability to do this. But unfortunately it fails. I wrote the code

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

or something else related to DOM operations they all failed. But if I just wrote

alert('aa')

or

document.body.style.backgroundColor='green'

, it works. Why? By the way, I want to have a debug but when I open the development tools I can not find my extension content script. I can see other extensions' content scripts.

解决方案

Did you add jQuery to your content_scripts in manifest?

If you use jQuery, you must write manifest.json like this:

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

OK, after read page source of google search result page I think I know what the problem is:

Google loads search result with AJAX, so, when you change query words and search again, the page DOES　NOT refresh, that's why you can not get any DOM elements in search result.

That means you have to add a event listener for DOMNodeInserted.

Code is like this:

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

}

searchResultArea.addEventListener('DOMNodeInserted', findH3);

这篇关于使用Chrome扩展程序修改Google搜索结果页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！