黄聪: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": {
        "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,操作方法:

1、右键chrome快捷方式,选择属性
2、在目标的最后,输入--allow-running-insecure-content,中间有个空格

这样chrome就可以允许你在https页面向http发起ajax请求了。这个方法可以达到目的,但不推荐,因为不科学。

原文:http://www.cnblogs.com/onlyfu/p/4458025.html

时间: 2024-07-29 18:41:37

黄聪:chrome扩展开发《AJAX请求》的相关文章

一起来做chrome扩展《AJAX请求》

chrome在一次更新之后,出于安全考虑,完全的禁止了content_script从https向http发起ajax请求,即使正常情况下也会在console里给出提示.这对于WEB来讲是好事,但对于扩展来讲就是坏事.平时可以很容易的请求数据,现在就没那么容易了.好在chrome还提供了background_script,利用content_script和background_script之前的通信来实现ajax的请求,就跳过了chrome的这一限制. content_script 从名字里就知道

Chrome扩展开发之四——核心功能的实现思路

目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式 3.Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载 4.Chrome扩展开发之四——核心功能的实现思路 如果你对GmailAssist感兴趣,可以在chrome商店中搜索“Gmail助手”,或点击这里直接访问商店来安装试用:如果你对GmailAssist的源码感兴趣,

Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载

目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式 3.Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载 4.Chrome扩展开发之四——Gmail API的简单介绍 5.Chrome扩展开发之五——OAuth2的理解 6.Chrome扩展开发之六——GmailAssist核心功能的实现(包括Gmail API的使用中的

Chrome扩展开发——Gmail附件管理助手

零.为什么会有这一套博文 2014年底虽然已经基本完成GmailAssist这一chrome扩展开发(当时也是作为软件工程课程的实践项目),但该扩展程序对于邮箱内邮件数目较多(大约五位数的数量级上)的情况,就很难正常工作了,这显然不是一个合格的软件,当时虽然终期验收顺利“交差”了,但这个软件的“不合格”却一直是我的一个心病.经过一年的学习,尽管对于前端开发的知识没有什么更进一步的掌握,但对软件工程的思想等等有了比起当时来说更深一层的认识.同时,当时虽然是一定程度上遵循敏捷开发的原则来进行的开发,

chrome扩展开发

http://open.chrome.360.cn/extension_dev/overview.html chrome扩展开发,使用html,js,css.和开发一个页面类似. chrome扩展中的文件: manifest.json:该文件是chrome扩展必须的文件,类似于配置文件或者入口文件,里面描述了chrome扩展的信息和包含的一些文件的信息. 其他文件其实都是根据需要自己添加,有时可以不需要的. 扩展要一定的功能,一般还会包括:content scripts,可以在manifest.

使用ClojureScript进行chrome扩展开发

*/--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src {background-color: #292b

黄聪:VS2010开发如何在c#中使用Ctrl、Alt、Tab等全局组合快捷键

1.新建一个类 HotkeyHelper  using System; using System.Runtime.InteropServices; using System.Windows.Forms; using System.Collections; namespace 黄聪 { public delegate void HotkeyEventHandler(int hotKeyID); public class HotkeyHelper : IMessageFilter { public

黄聪:C# 开发Chrome内核浏览器(WebKit.net)

WebKit.net是对WebKit的.Net封装,使用它.net程序可以非常方便的集成和使用webkit作为加载网页的容器.这里介绍一下怎么用它来显示一个网页这样的一个最简单的功能. 第一步: 下载WebKit.net 的bin文件.别小看这一步,你不一定能下载成功,原因你懂的. WebKit.net 的主页是http://webkitdotnet.sourceforge.net/ 直接下载0.5版本的windows bin文件地址为:https://sourceforge.net/proje

在chrome 怎么通过ajax请求加载本地文件

在chrome下面用Jquery 的load方法加载本地的html文件时会报错 我百度了一下是因为 谷歌浏览器内核为了安全机制,不允许这样方式访问其他页面,但是可以通过加 --enable-file-cookies --allow-file-access-from-files命令  加命令时 注意与前面的内容要用一空格隔开 然后重启浏览器,如果还是不行就重启电脑 原文地址:https://www.cnblogs.com/Dainney/p/10295691.html