一起来做chrome扩展《AJAX请求》
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": [{
"matches": [
"http://*.jgb.cn/*"
],
"css": ["css/common.css"],
"js": [
"include/jquery-1.11.0.min.js",
"scripts/main.js"
]
}]
如果还要匹配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,操作方法:
1、右键chrome快捷方式,选择属性
2、在目标的最后,输入--allow-running-insecure-content,中间有个空格
这样chrome就可以允许你在https页面向http发起ajax请求了。这个方法可以达到目的,但不推荐,因为不科学。
一起来做chrome扩展《AJAX请求》的更多相关文章
- 一起来做chrome扩展《页面右键菜单》
本文主要内容 contextMenus的设置 打开权限 创建菜单 点击菜单 background script向content script发送消息 1. contextMenus的设置 1.1 打开 ...
- 一起来做chrome扩展《本地存储localStorage》
chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...
- 一起来做chrome扩展《可配置的代理》
一.本文主要涉及相关内容: chrome.proxy pacScript browser_action popup localStroage 二.预览 (代理运行截图,图中的代理服务器有防火墙,暂不对 ...
- 一起来做chrome扩展《基础介绍》
首先说明,chrome的扩展并不它的插件,网上很多说写插件,其实都是说的扩展.写扩展并不复杂,只要根据chrome提供的一系列的API进行就可以实现很多的功能.只是对API的学习是有代价的,加上国内访 ...
- 解决高版本 Google Chrome 扩展程序强制停用问题 -摘自网络
1]前往这里下载你喜欢的语言的组策略模板 后缀为.adm (其他的文件自己看 https://docs.google.com/viewer?a=v&pid=sites&srcid=Y2 ...
- chrome扩展,如何阻止浏览自动关闭桌面通知.
(!!!!以前的好用的, 现在不行了~) 做chrome扩展桌面通知, 可能不想让浏览器自动关闭某个重要的桌面通知.那就不要使用 chrome.notifications.create 可以用 Web ...
- 清除页面广告?身为前端,自己做一款简易的chrome扩展吧
大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...
- 自己做一款简易的chrome扩展--清除页面广告
大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...
- 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...
随机推荐
- linux下编译安装vim7.4并安装clang_complete插件
linux下编译安装vim7.4并安装clang_complete插件 因为debian里软件仓库中下载安装的vim是不支持python写的插件的(可以打开vim,在命令模式先输入:py测试一下),导 ...
- Types of CQRS
Types of CQRS By Vladimir Khorikov CQRS is a pretty defined concept. Often, people say that you eith ...
- MySQL源码分析:源码文件结构及主要数据结构
原文地址:http://blog.itpub.net/30186219/viewspace-1481125/BUILD: 内含在各个平台.各种编译器下进行编译的脚本.如compile-pentium- ...
- 第二十七篇:SOUI中控件属性查询方法
SOUI项目的SVN根目录下有一个doc目录,下面有一份控件属性表.包含了大部分控件的大部分属性,不过也不一定完全准确.最保险的办法还是查源代码. SOUI对象包含控件及ISkinObj等从SObje ...
- 好用的px转rem的插件
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 下载地址: https://github.com/flashlizi/cssrem 安装 下载本项目,比如:git clone ...
- ubuntu更新软件源
更新源方法: 1. 打开终端.单击主菜单中的“应用程序 - 附件 - 终端”. 2. 修改更新服务器列表.请在终端中执行下面的两条命令: sudo cp /etc/apt/sources.list / ...
- 分布式缓存技术memcached学习(四)—— 一致性hash算法原理
分布式一致性hash算法简介 当你看到“分布式一致性hash算法”这个词时,第一时间可能会问,什么是分布式,什么是一致性,hash又是什么.在分析分布式一致性hash算法原理之前,我们先来了解一下这几 ...
- Superslide插件无效的问题
用Superslide像往常那样导入JQ和SuperSlide后,首页焦点图不会变,就像SuperSlide失效了一样,为什么??? 排查了一圈最后发现是JS导入顺序的问题,必须先导入JQ,再导入Su ...
- Create a REST API with Attribute Routing in ASP.NET Web API 2
原文:http://www.asp.net/web-api/overview/web-api-routing-and-actions/create-a-rest-api-with-attribute- ...
- ggplot2包的说明文档[分享]