chrome扩展，在popup页面，给页面对象绑定点击事件，获取当前tab加载页面的DOM对象信息。本chrome扩展功能主要用于获取百度搜索输入框中用户输入的关键字。效果如下
源代码如下
注意：以下文件全部以utf-8文件编码保存
manifest.json
|
1
2
3
4
5
6
7
8
9
10
|
{
"name"
:
"chrome扩展获取页面dom对象信息"
,
"manifest_version"
: 2,
"version"
:
"1.0"
,
"author"
:
"showbo,http://www.coding123.net"
,
"description"
:
"chrome扩展，在popup页面，给页面对象绑定点击事件，获取当前tab加载页面的DOM对象信息。本chrome扩展功能主要用于获取百度搜索输入框中用户输入的关键字。"
,
"browser_action"
: {
"default_popup"
:
"popup.html"
},
"content_scripts"
: [{
"matches"
: [
"*://*/*"
],
"js"
: [
"baidu.js"
]}],
"permissions"
: [
"*://*/*"
,
"tabs"
]
}
|
popup.html
注意事项：chrome扩展不支持inline-script，绑定事件的代码需要放到外部js文件中，也不能直接在DOM对象上添加click事件
|
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
http-equiv
=
"content-type"
content
=
"text/html;charset=utf-8"
>
<
title
>chrome extension获取页面DOM对象</
title
></
head
>
<
body
><
pre
>browser_action中的default_popup指定的页面<
br
/>
页面中DOM对象如何绑定事件并且获取当前页面的DOM对象信息</
pre
>
<
a
id
=
"a"
href
=
"#"
>点击获取百度搜索输入框中的关键字</
a
>
<
script
src
=
"bindEvent.js"
></
script
></
body
></
html
>
|
bindEvent.js
|
1
2
3
4
5
6
7
8
9
|
var
a = document.getElementById(
'a'
);
a.onclick =
function
() {
//给对象绑定事件
chrome.tabs.getSelected(
null
,
function
(tab) {
//获取当前tab
//向tab发送请求
chrome.tabs.sendRequest(tab.id, { action:
"GetBaiduKeyWord"
},
function
(response) {
alert(response.kw);
});
});
}
|
baidu.js
|
1
2
3
4
5
6
7
|
chrome.extension.onRequest.addListener(
//监听扩展程序进程或内容脚本发送的请求
function
(request, sender, sendResponse) {
if
(request.action ==
"GetBaiduKeyWord"
) {
sendResponse({ kw: document.forms[0].wd.value });
}
}
);
|
注意：chrome.tabs.sendRequest和chrome.extension.onRequest这2个对象在版本的chrome中将被废弃，使用chrome.runtime.sendMessage和chrome.runtime.onMessage代替。
由于本人的chrome版本为25，好像没有支持chrome.runtime对象，chrome.runtime为undefined（据说 chrome.runtime 对象chrome22+就支持了。搞毛。。？），懒得升级chrome，所以就没用chrome.runtime对象。
所以如果chrome扩展出错没有效果，可能是这2个对象的问题。
源代码压缩包下载：chrome扩展获取百度搜索输入框关键字
本文转自问道博客51CTO博客，原文链接http://blog.51cto.com/450236/1852039如需转载请自行联系原作者
crackernet
