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