谷歌浏览器插件开发详解
谷歌浏览器插件开发详解
永不止步0929 发表于1年前
谷歌浏览器插件开发详解
  • 发表于 1年前
  • 阅读 17
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 浏览器插件

 

      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

 

 

 

 

共有 人打赏支持
粉丝 0
博文 23
码字总数 7155
×
永不止步0929
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: