Chrome插件开发基础

来自技术开发小组内部wiki
跳转至: 导航搜索

插件开发说明

插件开发就是以浏览器本身作为执行环境,通过浏览器提供的接口来执行一些自定义的功能,从而达到扩展浏览器的目的!
例如大家熟悉的firebug就是在火狐浏览器下面很著名的一个插件,还有大家春运抢票用到抢票浏览器插件

插件开发语言

不同的浏览器插件使用达到的开发语言也不一样,有些需要用到c++,比如IE与火狐,有些需要用到python,这里重点以chrome
来进行说明,其依赖的开发语言很简单,就是大家日常熟悉的脚本编程语言,javascript

插件脚本构成

  1. 一个manifest文件
  2. 一个或多个html文件(除非这个应用是一个皮肤)
  3. 可选的一个或多个javascript文件
  4. 可选的任何需要的其他文件,例如图片

参考文档

  1. 开发参考文档
  2. 具体实例

插件优势

  1. 解决验证码登陆问题,可以采取人工识别登陆,然后插件执行
  2. 解决页面JS解析执行问题,浏览器能够很好解析js执行效果,一般的命令行执行获取页面无法进行有效解析
  3. 解决部分网站页面关键数据加密处理
  4. 解决部分网站进行反爬取处理
  5. 解决传统抓取网站地址参数复杂拼接

应用场景

需要抓取去哪网的五星酒店数据,去哪网翻页结构复杂,数据接口动态加载,接口数据加密处理,反爬取机制严重

开发作品

manifest.json 文件 负责项目各项配置

<source lang="javascript"> { "name": "测试浏览器插件获取网页信息", "version": "1.0", "manifest_version": 2, "description": "通过浏览器插件获取网页信息,能够突破验证码限制,突破加密限制,突破登陆限制", "browser_action": { "default_icon": "icon.png" }, "permissions": [ "webNavigation", "tabs", "contextMenus", "http://www.fumubang.com/receive_data/" ], "background": { "scripts": ["event_script.js","jquery-2.1.4.min.js","jquery.xpath.min.js"] }, "content_scripts": [ { "matches": ["http://hotel.qunar.com/city/beijing_city/*"], "js": ["jquery-2.1.4.min.js", "content_script.js","jquery.xpath.min.js"] } ] } </source>

content_script.js  负责前台js执行调用处理

<source lang="javascript"> //注册前台页面监听事件 chrome.extension.onMessage.addListener(   function(request, sender, sendResponse) { //这里的request来自后台发送的message内容 if(request.message=="start"){ console.log("start to work......"); //下面是基于xpath来进行节点过滤 //console.log("曝光量:"+$(document.body).xpath("//p[@class='data_overview_desc jsTotal' and @data-type='show']").text()); //console.log("点击量:"+$(document.body).xpath("//p[@class='data_overview_desc jsTotal' and @data-type='click']").text()); console.log($(document.body).xpath("//div[@class='hotel_baseinfo']/div[@class='title_name clrfix']/span[@class='hotel_item']/a[1]")); //开始进行遍历,获取酒店的标题信息 $(document.body).xpath("//div[@class='hotel_baseinfo']/div[@class='title_name clrfix']/span[@class='hotel_item']/a[1]").each(function(){ console.log("标题:"+$(this).attr("title")); }); //开始获取酒店的档次 $(document.body).xpath("//div[@class='hotel_baseinfo']/div[@class='title_name clrfix']/span[@class='hotel_item']/em[@class='sort dangci']").each(function(){ console.log("档次:"+$(this).text()); }); //开始将收集好的信息发送给后端处理 chrome.extension.sendMessage({"msg": "testdata", "cmd": "next"}, function(response) {}); //考虑下如何翻页,下一页的点击,这个地方不知道为什么要使用原生的方法来进行触发,这是一个让人很纠结的地方 document.querySelector("li.next > a").click(); }else{ console.log("ready to work......"); } });

</source>

event_script.js 负责后端js执行调用处理

<source lang="javascript"> var flag = false;//是否启动的标记 //定义点击图标之后的动作 chrome.browserAction.onClicked.addListener(function(tab) { flag=true;//标记为真 //被选择tab chrome.tabs.getSelected(null, function(tab) { console.log("start working"); //通过tab进行消息的发送     chrome.tabs.sendMessage(tab.id, {message: "start"}, function(response) {});    }); });

//后台处理前台发送过来的消息 chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {    //被选择tab chrome.tabs.getSelected(null, function(tab) { console.log("receive data"); setTimeout(function(){ //通过tab进行消息的发送      chrome.tabs.sendMessage(tab.id, {message: "start"}, function(response) {}); },5000);    }); }); </source>


后续完善

上面的例子只是基本完善了一个插件开发的整个流程,针对更加复杂的插件(诸于抢购火车票类似),需要花费更多的时间与精力去研究!

demo下载

媒体文件:Web_spider.rar