谷歌插件开发ajax请求,chrome插件 注入js以及发送ajax(message/request)
manifest.json 内容
知识点包含：
* content_scripts注入js，background.scripts用来发送请求(content_scripts禁止发送ajax)
* Message 和 Request 区别
manifest
JavaScript
{
"name":"Catch your Data",
"description":"Catch every data what you need",
"version":"1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*","http://service.miniice.cn/"
],
"browser_action": {
"default_title": "Get this page's Data.",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version":2,
"content_scripts": [
{
"js":["jquery-2.2.0.min.js","content_script.js"],
"matches":["https://sycm.taobao.com/portal/*"]
}
],
"background": {
"scripts": ["jquery-2.2.0.min.js","background.js"]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"name":"Catch your Data",
"description":"Catch every data what you need",
"version":"1.0",
"permissions":[
"tabs","http://*/*","https://*/*","http://service.miniice.cn/"
],
"browser_action":{
"default_title":"Get this page's Data.",
"default_icon":"icon.png",
"default_popup":"popup.html"
},
"manifest_version":2,
"content_scripts":[
{
"js":["jquery-2.2.0.min.js","content_script.js"],
"matches":["https://sycm.taobao.com/portal/*"]
}
],
"background":{
"scripts":["jquery-2.2.0.min.js","background.js"]
}
}
标签脚本(content_script)和背景页(background)交互可以有多种方式
其中我使用过 Message 和 Request
Message用于立即响应消息，多用于读取早已缓存的信息，不适合异步
Request多用于异步请求服务器
Message 要这么写
content_script.js 内容
JavaScript
var jsonarr={
'name':'abc'
}
chrome.extension.sendMessage(jsonarr, function(ret){
console.log(ret);
});
1
2
3
4
5
6
varjsonarr={
'name':'abc'
}
chrome.extension.sendMessage(jsonarr,function(ret){
console.log(ret);
});
background.js 内容
JavaScript
chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){
var send={
"data":objRequest,
"info":"以上是您输入的信息",
"status":1,
}
sendResponse(send);
});
1
2
3
4
5
6
7
8
chrome.extension.onMessage.addListener(function(objRequest,_,sendResponse){
varsend={
"data":objRequest,
"info":"以上是您输入的信息",
"status":1,
}
sendResponse(send);
});
Request 要这么写
content_script.js 内容
JavaScript
var jsonarr={
'version':'abc123'
}
chrome.extension.sendRequest(jsonarr, function(ret){
console.log(ret);
});
1
2
3
4
5
6
varjsonarr={
'version':'abc123'
}
chrome.extension.sendRequest(jsonarr,function(ret){
console.log(ret);
});
background.js 内容
JavaScript
chrome.extension.onRequest.addListener(function(objRequest, _, sendResponse){
$.post("deal.php",objRequest,function(ret){
sendResponse(ret);
})
});
1
2
3
4
5
chrome.extension.onRequest.addListener(function(objRequest,_,sendResponse){
$.post("deal.php",objRequest,function(ret){
sendResponse(ret);
})
});