Google chrome extension 使用Chrome扩展修改Google搜索结果页面
我想做一个Chrome扩展来修改谷歌搜索结果页面。我知道我可以使用内容脚本来做这件事,因为它有能力做到这一点。但不幸的是,它失败了。代码是我写的Google chrome extension 使用Chrome扩展修改Google搜索结果页面,google-chrome-extension,Google Chrome Extension,我想做一个Chrome扩展来修改谷歌搜索结果页面。我知道我可以使用内容脚本来做这件事,因为它有能力做到这一点。但不幸的是,它失败了。代码是我写的 $('h3.r').append('<b>a</b>') 或 ,它起作用了。为什么? 顺便说一句,我想进行调试,但是当我打开开发工具时,我找不到扩展内容脚本。我可以看到其他扩展的内容脚本。您是否将jQuery添加到清单中的内容脚本中 如果使用jQuery,则必须像这样编写manifest.json: "content_scr
$('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);
函数findH3(){
$('h3.r')。追加('a'))
}
searchResultArea.addEventListener('DomainNodeInserted',findH3);
将目标URL的权限添加到清单文件
{
---
"permissions": [
"https: //www.google.co.in/*"
]
---
}
参考文献