文档章节

谷歌浏览器插件开发详解

永不止步0929
 永不止步0929
发布于 2016/12/06 15:03
字数 472
阅读 31
收藏 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成为开发利器!

本文作者:TheBeauty 原文地址:www.cnblogs.com/thebeauty/p… 前言 Chrome浏览器无论是作为浏览器市场的NO1还是其强大的跨平台能力以及丰富的扩展插件,一直是许多开发者的首要选择的浏览器...

codeGoogle
10/16
0
0
chrome浏览器jsonView插件安装

chrome 应用商店打不开,想装插件愁死人了。 今天想到一个好方法,以 jsonView插件为例分享一下。 1、打开 https://github.com ; 2、搜索 jsonView 链接:https://github.com/search?utf8=...

hengbao5
08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spark Load Data and Export Data

Load_Data_Command 一、导入数据-加载csv文件数据作为spark 临时表DataSource(不需要提前创建表,方便数据分析) 该命令将csv文件导入到临时表中,命令格式为 load data '文件路径' table [...

Avner
3分钟前
0
0
CDH5.13离线安装Spark2.3详细步骤

简介: 在我的CDH5.13集群中,默认安装的spark是1.6版本,这里需要将其升级为spark2.x版本。经查阅官方文档,发现spark1.6和2.x是可以并行安装的,也就是说可以不用删除默认的1.6版本,可以直...

hblt-j
6分钟前
0
0
Add XSS protection headers on Nginx

Add XSS protection headers on Nginx Add the following line in the http or server part of your Nginx configuration : ... # XSS Protection add_header X-Frame-Opt......

idoz
7分钟前
0
0
cmake windows 配置xp toolset

MPRO
13分钟前
0
0
day125-20181023-英语流利阅读-待学习

外卖员不要哭,打零工不容易 雪梨 2018-10-23 1.今日导读 上期我们讲到,有人认为:“零工经济”虽然没有占领全世界,但它剥夺了劳动者的合法权利,加剧了工作的不稳定性,那么“零工经济”是...

飞鱼说编程
25分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部