目录
chrome 在一次更新之后,出于安全考虑,完全的禁止了 content_script 从 https 向 http 发起 ajax 请求,即使正常情况下也会在 console 里给出提示。这对于 WEB 来讲是好事,但对于扩展来讲就是坏事。平时可以很容易的请求数据,现在就没那么容易了。好在 chrome 还提供了 background_script,利用 content_script 和 background_script 之前的通信来实现 ajax 的请求,就跳过了 chrome 的这一限制。
content_script
从名字里就知道,content_script 是植入型的,它会被植入到符合匹配的网站页面上。在页面加载完成后执行。content_script 最有用的地方是操作网站页面上的 DOM。一切平时做前端的一些操作它都可以做,像什么添加、修改、删除 DOM,获取 DOM 值,监听事件等等,都可以很容易的做到。所以,如果想获取人家的登录帐户和密码,就是件非常容易的事,只需要添加 content_script,监听帐户和密码的文本框,获得值后将数据发送到自己的服务器就可以了。因此,特别说明,别乱装扩展,特别是不从官方扩展库里下载的扩展。
使用 content_script
要使用 content_script,需要在 manifest.json 中配置,如下:
{
"manifest_version": 2,
"name": "My Extension",
"description": "Extension description",
"version": "1.0",
"content_scripts": {
"js": [
"content.js"
]
}
}
这样,在页面加载完成后,就会加载 content.js,在 content.js 里,就可以控制页面元素。如果要在 content.js 中使用 jquery,需要将 jquery 文档加到 content.js 前面,如:
content_script 使用 jquery
{
"content_scripts": {
"js": [
"jquery.js",
"content.js"
]
}
}
除了可以加载 js,content_scripts 里还可以加载 CSS 文档,这样可以让你的扩展漂亮一点,如:
content_script 使用 CSS
{
"content_scripts": {
"js": [
"content.js"
],
"css": ["style.css"]
}
}
在 content_scripts 中,还有一项重要的设置就是 matches,它是用来配置,符合扩展使用的网址,如:我只想这个扩展在打开www.jgb.cn时才启用,那么 matches 就要这样写:
设置匹配网站
{
"content_scripts": {
"js": [
"content.js"
],
"css": ["style.css"]
},
"matches": [
"http://*.jgb.cn/*"
]
}
如果还要匹配 www.amazon.com,那就加上:
{
"matches": [
"http://*.jgb.cn/*",
"http://*.amazon.com/*"
]
}
注意,http 只适用于 http,像 amazon.com 这样的站即有 http 也有 https,所以得把 https 也加上,如下:
{
"matches": [
"http://*.jgb.cn/*",
"http://*.amazon.com/*",
"https://*.amazon.com/*"
]
}
background_script
它在 chrome 扩展启动的时候就启动了,做着它的事,而且等待着你给他的命令。它没办法控制页面元素,但可以通过 content_script 告诉它。ajax 同理,如果要在页面打开时向别的服务器请求数据,这时就可以告诉 background_script,让它去请求,然后把返回的数据发送给 content_script。这样就不会受到浏览器的安全限制影响。
使用 background_script
要使用 background_script,需要在 manifest.json 中配置,如下:
{
"manifest_version": 2,
"name": "My Extension",
"description": "Extension description",
"version": "1.0",
"background": {
"scripts": [
"background.js"
]
}
}
使用 jquery 和 content_scripts 同理,需要把 jquery 文档加到 background.js 前面,如:
在 background_script 中使用 jquery
{
"background": {
"scripts": [
"jquery.js",
"background.js"
]
}
}
跨域
默认情况下 Ajax 是不允许跨域的,但扩展提供了跨域的配置,在前一篇《基础介绍》中提到过,那就是 permissions,它除了可以让扩展使用 chrome 的一些功能外,还可以允许 JS 实现对目录网站的跨域访问,如:
{
"permissions": [
"http://www.jgb.cn/" // 允许跨域访问www.jgb.cn
]
}
有了以上的配置,这时候就可以来看看怎样通过 background_scripts 来实现 Ajax 请求了。
向 background 发送请求
在 content_script 中向 background_script 发送请求有好几种方式,这里只列出我常的一种,应该来讲,能满足大多数情况的使用,其它方法,请查询文档,方法如下:
chrome.extension.sendMessage({}, callBack);
sendMessage() 方法,它有两个参数,第一个要发送的数据,就像 post 请求一样,第二个是回调函数。如在 content_script 中,点击一个按钮,将一个字符串发送到 background_script
$(function(){
$("#button").click(function(){
chrome.extension.sendMessage({'txt': '这里是发送的内容'}, function(d){
console.log(d); // 将返回信息打印到控制面板里
});
});
})
在 background 中监听 content 请求
在 background 中监听 content 请求,使用 chrome.extension.onMessage.addListener(),示例如下:
chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){});
objRequest,即为请求的参数,在上一个例子就是{'txt': '这里是发送的内容'},可以通过 objRequest.txt 来获取内容。其实就是一个字典。
sendResponse,为返回值方法,可以将数据返回给 content_script,那么一个简单的例子就是:
chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){
var strText = objRequest.txt;
// 将信息能过Ajax发送到服务器
$.ajax({
url: 'http://www.jgb.cn/',
type: 'POST',
data: {'txt': strText},
dataType: 'json',
}).then(function(){
// 将正确信息返回content_script
sendResponse({'status': 200});
}, function(){
// 将错误信息返回content_script
sendResponse({'status': 500});
});
});
这样一去一来,也就实现 content_script 向 background_script 发送请求,并使用 background_script 执行 ajax 请求的目的,非常的简单好用
在此基础上,增加一些条件和数据,就可以很好的实现接收,发送数据的操作。比如向自己的服务器请求或发送数据。
通过修改 chrome 启动参数,实现可在 https 页面向 http 页面发起 ajax 请求
除了使用 background_script 来发起 Ajax 请求外,还可以通过修改 chrome 的启动参数来达到这个目的。参数为:--allow-running-insecure-content,操作方法:
这样 chrome 就可以允许你在 https 页面向 http 发起 ajax 请求了。这个方法可以达到目的,但不推荐,因为不科学。