文档章节

谷歌浏览器插件开发详解

永不止步0929
 永不止步0929
发布于 2016/12/06 15:03
字数 472
阅读 37
收藏 2

 

      chrome 插件: 就是一个html + js +css + image的一个web应用 ;不同于普通的web应用, chrome插件除了兼容普通的js,json,h5等api,还可以调用一些浏览器级别的api,例如收藏夹,历史记录cookie等 以及js页面间的消息传递

注:每一个插件都有一个唯一的插件号

1.创建配置文件manifest.json文件

{

"name": "永不止步",     //插件名称
"version": "1.0",          //必填,版本号
"manifest_version": 2,     //必填,
"description": "*********永不止步*********",

"icons": {                  //图标
            "48": "icon.png",
            "16": "icon.png"
        },

//浏览器弹窗 
"browser_action": {
    "default_icon": "icon.png",    //图标
    "default_popup": "test.html"   //点击弹出来的窗口
},
"permissions": [           //插件的全新啊
"webNavigation",
"tabs",
"cookies",
"background",
"notifications",
"contextMenus",
"https://*/*",
"http://www.baidu.com/"          //服务器接收数据url
],
 "background": {                          //全局执行的js
 "scripts": ["eventPage.js","jquery-2.1.1.min.js"]
},
"content_scripts": [
{            
"matches": ["http://www.taobao.com/"],//抓取页面的url
"js": ["jquery-2.1.1.min.js", "contentscript.js"]     //定义抓取页面的js,可加多个
}
]

}

2.创建contentscript.js文件

①此文件可以通过DOM获取当前页面的所有元素,换句话说就是可以获取当前页面的所有内容,②也可以操作test.html(当然test.html必须先引入contentscript.js)。

③通过ajax将所需的数据传入后台服务器方式为json (必须在权限中将后台服务器url引入,否则会出现跨域问题)

 

 

常用的功能:

①通过chrome.cookies.get(details, function(cookie) {
                    //console.log(cookie);
                })

可以获取需请求后台的cookie信息,用于判断登陆。。。

 

②页面的消息传递

//发送消息

chrome.extension.sendMessage({cmd: "showPage"},function(response) {
      console.log("request:");

});

chrome.extension.sendMessage({cmd: "getPage"},function(response) {
        console.log("request:");
        // if(response.page){
        //     console.log("request:"+request.page);
        // }
    });

//接受消息   监听事件
chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    totalPage = $(".J_Input").val();
    console.log("totalPage----------" + totalPage);
        console.log(request);
        if(request.cmd=='getPage'){
            console.log("getPage");
            //console.log(request.page);
            sendResponse({"arr":3});
            ext_page=3;
            //g_newsArr=request.arr;
        }
        if(request.cmd=='showPage'){
            console.log("showPage");
            sendResponse({"arr":ext_page});
        }
    //console.log("msg----------contentscript.js" + request.greeting);
    //getOrderInfo( sendResponse );
  });

 

参考文档   http://open.chrome.360.cn/extension_dev/cookies.html

实例  http://www.cnblogs.com/rwxwsblog/p/4490530.html

        http://www.cnblogs.com/champagne/p/4826611.html

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
永不止步0929
粉丝 0
博文 29
码字总数 7592
作品 0
海淀
程序员
私信 提问
实用的Laravel Debug调试工具

转载请注明: 转载自Yuansir-web菜鸟 | LAMP学习笔记 本文链接地址: 实用的Laravel Debug调试工具 主要推荐laravel几个适合开发调试用的工具 1.Clockwork 首先Chrome 插件 Clockwork 安装 Co...

Yuansir
2015/01/19
0
2
Masonry:一款很好用的jquery网页瀑布流布局插件

类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的“哇哦” 等等。通常,随着页面滚动...

mickelfeng
2013/05/28
0
0
离线Chrome插件安装文件(crx)的安装方法

离线Chrome插件安装文件(crx)的安装方法 一、正常安装方法 1.开发谷歌浏览器,设置->扩展程序 在打开的谷歌浏览器的扩展管理器中用户可以看到一些已经安装程序的Chrome插件,或者一个Chrom...

曾将
07/10
0
0
将 Chrome 变成开发利器,开发者们在用这些插件

Chrome 浏览器具有强大的跨平台能力以及丰富的扩展插件,一直是许多开发者的首要选择。而利用许多 Chrome 插件,开发者们在开发流程中能够极大地提高开发效率。我们就整理了十款开发者常用的...

oschina
2016/07/01
12.7K
30
本地安装谷歌的插件之 CRX格式插件离线安装

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/82885552 方法一 :开发模式安装 [亲测] 1.把下载后的.crx扩展名的离线Chrome插件的...

杨校
09/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java中前台接收后台List数据并循环打印

在Java后端获取到了数据,然后我们需要传到前端页面展现出来。 方法有两种: 方法一: 后端: request.setAttribute("list",list); 前端: <%ArrayList list = (ArrayList) request.get...

小_橙_子
6分钟前
0
0
Java:字节流和字符流(输入流和输出流)

什么是流 如果想学习Java工程化、高性能及分布式、深入浅出。微服务、Spring,MyBatis,Netty源码分析的朋友可以加我的Java高级交流:854630135,群里有阿里大牛直播讲解技术,以及Java大型互...

编程SHA
6分钟前
0
0
zookeeper收尾+dubbo前瞻

zookeeper是一个开源的分布式协调框架:数据发布订阅,负载均衡,集群,master选举。 原子性:要么同时成功,要么同是失败(分布式事务) 单一视图:无论客户端连接到哪个服务器,所看到的模...

微笑向暖wx
6分钟前
0
0
oracle11g 修改字符集 修改为ZHS16GBK

oracle11g 修改字符集 修改为ZHS16GBK 1.cmd下,cd到oracle数据库软件的服务器端 如:D:\app\Administrator\product\11.2.0\dbhome_1\BIN 2.输入set ORACLE_SID=你想进入的数据库的那个sid 3...

xiaoxin
7分钟前
0
0
图片缓存

Kxvz
8分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部