试想一下,如果每天要收集100页网页数据甚至更多。如果采用人工收集会吐血,用程序去收集也就成为一个不二的选择。首先肯定会想到说用java、php、C#等高级语言,但这偏偏又有个登陆和验证码,搞到无所适从。还在为收集web端的数据感到苦恼吗?很高兴,你找对地方了。

  应用场景:

    1、需要每天大量重复收集web端的数据

    2、web页面数据需要登陆后才能采集

    3、web页面存在翻页

  解决方案:

    手工登陆,然后采用chrome插件的方式进行收集。当然你会说用selenium等自动化测试的方法进行收集更cool,而且可以每天自动收集,完全的自动化不用人工参与。但是作为chrome的忠实脑残粉,再者只需要前端的js、服务器端的接收文件、数据库就可以完美解决这一问题。再加上部署和操作简单。 脑残粉总有很多理由的嘛。好吧,就算是一种憋屈的曲线救国和实现方式吧。

  思路:

    

帮助手册:http://open.chrome.360.cn/extension_dev/overview.html

实例:

抓取某电商后台订单数据

1、创建一个项目文件夹并引入所需文件:如D:\tool\chrome_server_plugin

  jquery-2.1.1.min.js、icon.png

2、创建background.html

<html><head>
</head></html>

3、创建配置文件manifest.json文件

{

"name": "获取某电商后台订单信息",
"version": "1.0",
"manifest_version": 2,
"description": "*********获取某电商后台订单信息*********",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"webNavigation",
"tabs",
"contextMenus",
"http://服务器接受数据url/"
],
"background": {
"scripts": ["eventPage.js","jquery-2.1.1.min.js"]
},
"content_scripts": [
{
"matches": ["http://抓取页面url/*"],
"js": ["jquery-2.1.1.min.js", "contentscript.js"]
}
]
}

4、创建前端js文件contentscript.js

var totalPage;
var page = 0;
//注册前台页面监听事件
chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    totalPage = $("input[name=totalPage]").val();
    console.log("totalPage----------" + totalPage);
    //console.log("msg----------contentscript.js" + request.greeting);
    getOrderInfo( sendResponse );
  }); //获取订单信息
function getOrderInfo( sendResponse ){
  var flag = false;   payMoney = [];//货款金额
  orderTime = [];//下单时间
  $("tr[class=head] span").each(function(index){
    spantxt = '';
    spantxt = $(this).text();
    if(spantxt.indexOf('货款金额:') > -1){
      money = spantxt.substr(5);
      //console.log(index + "---------payMoney-------货款金额:" + money);
      payMoney.push(money);
    }else if(spantxt.indexOf('下单时间:') > -1){
      time = spantxt.substr(5);
      //console.log(index + "---------orderTime-------下单时间:" + time);
      orderTime.push(time);
    }
  }); paytype = [];//物流方式
yunfei = [];//运费
$("td[class=p-values]").each(function(index){
  tdtxt = '';
  tdtxt = $(this).text();
  if(tdtxt.indexOf('货到付款') > -1){
    paytype.push('货到付款');
  }else{
    paytype.push('在线支付');
  }   yf_index = tdtxt.indexOf('运费:');
  if(yf_index > -1){
    temp = tdtxt.substr(yf_index);
    temp_yf = temp.substr(3);
    //console.log(index + "---------yunfei-------"+ temp +"===" + temp_yf);
    yunfei.push(temp_yf);
  }else{
    yunfei.push(0);
  }   //console.log(index + "---------tdtxt-------" + tdtxt);
}); orderStatus = [];//订单状态
users = [];//买家账号
remark = [];//备注
$("tr[class=content] td[class=t-c]").each(function(index){
  tdtxt = '';
  tdtxt = $(this).text().replace(/[\r\n]\ +/g,"");//将回车,换行,空格去掉
  temp = index % 5;
  if(1 == temp){
    orderStatus.push(tdtxt);
    //console.log(index + "---------statu-------" + tdtxt);
  }else if(2 == temp){
    users.push(tdtxt);
    //console.log(index + "---------users-------" + tdtxt);
  }else if(3 == temp){
    remark.push(tdtxt);
    //console.log(index + "---------remark-------" + tdtxt);
  }
}); express = [];//快递单号
$("tr[class=content] td div[style='text-align: center;']").each(function(index){
  tdtxt = '';
  tdtxt = $(this).text().replace(/[\r\n]\ +/g,"");//将回车,换行,空格去掉
  express.push(tdtxt);
  //console.log( "============快递单号=======" + tdtxt);
}); orderInfo = [];
splitstr = "@_@";
$("tr[class=head] a[track=orderinfopagebeta]").each(function(index){
  orderid = $(this).text();
  //console.log("---------orderid-------" + orderid);
  mycomment = $("a[id=comment_" + orderid + "]").attr('style').replace(/[\r\n]\ +/g,"");
  if("display: block;" == mycomment){
    mycomment = '已评价';
  }else if('display:none;' == mycomment){
    mycomment = '未评价';
  }   tempshopid = $("img[id=remarkFlag_" + orderid + "]").attr('onclick');
  shopidIndex = tempshopid.indexOf(",");
  shopid = tempshopid.substr(shopidIndex + 1).replace(/[\)\;]/g,"");
  //console.log("---------shopid-------" + shopid);
  orderdesc = shopid + splitstr + orderid + splitstr + mycomment + splitstr + payMoney[index] + splitstr + orderTime[index] + splitstr + paytype[index] + splitstr + yunfei[index] + splitstr + orderStatus[index] + splitstr + users[index] + splitstr + remark[index] + splitstr + express[index];
  console.log("---------orderdesc-------" + orderdesc);
  orderInfo.push(orderdesc);
}); //chrome.extension.sendMessage({"orderInfo": orderInfo}, function(response) {});
page = parseInt($("a[class=current]").text());
totalPage = parseInt($("input[name=totalPage]").val());
console.log(page + "--page-----------totalPage---" + totalPage);
if(page < totalPage && page < 100){
  console.log("---------next-------");
  sendMsg( orderInfo, "next" );
  $('a.next')[1].click();
}else{
  console.log("---------end-------");
  sendMsg( orderInfo, "end" );
}
// } //将获取内容传递给后台文件进行处理
function sendMsg( msg, cmd){
  chrome.extension.sendMessage({"msg": msg, "cmd": cmd}, function(response) {});
}

5、创建后台处理js文件eventPage.js

var flag = false;
var currentTabId;
chrome.browserAction.onClicked.addListener(function(tab) {
  counter = 40;
  console.log('Turning ' + tab.url);
  flag = true;
  currentTabId = tab.id;
  chrome.tabs.getSelected(null, function(tab) {
    sendMsg(tab.id);
  });
}); chrome.webNavigation.onCompleted.addListener(function( tab ){
  console.log('加载完成***' + tab.tabId );
  if( flag ){
    sendMsg( tab.tabId );
  }
}); chrome.extension.onMessage.addListener( function(request, sender, sendResponse) {
  console.log("*******evenPage.js***chrome.extension.onMessage.addListener");
  articleData = request;
  $.ajax({
    url: "服务器接受数据URL/getOrderinfo.php",
    cache: false,
    type: "POST",
    data: {'orderinfo': request.msg.join("#$#")},
    dataType: "json"
    }).done(function(msg) {
      console.log('*******************json*************' + msg.sql );
      chrome.tabs.sendMessage(currentTabId, {"cmd":"end"},
      function(response) {
      console.log(response);
 }); }).fail(function(jqXHR, textStatus) {
  articleData.firstAccess = textStatus;
}); cmd = request.cmd;
if('end' == cmd){
  flag = false;//确保不会自动运行
} }); function sendSku2Info(colores){
  chrome.tabs.query(
    {active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {"cmd":"ok", "sku": colores},
      function(response) {
        console.log(response);
      });   });
} function sendMsg( tabid ){
  console.log(tabid + "--sendMsg()----eventPage.js");
  chrome.tabs.sendMessage(tabid, {greeting: "start working"}, function(response) {
  });
}

4、创建服务器接收文件getOrderInfo.php(放在服务器哦,亲!)

<?php

header("Content-type:text/html; charset=utf-8");
//include("./includes/global.php");
echo "***********************";
$con = mysql_connect("localhost","root","root");
echo "==============";
if (!$con)
{
  die('Could not connect: ' . mysql_error());
}
mysql_select_db("test", $con);
//var_dump($_REQUEST);
$orderinfo = $_POST['orderinfo'];
$orderArr = explode('#$#', $orderinfo);
print_r($orderArr);
$sql_value = array();
$split = "', '";
foreach($orderArr as $myorder){
  $value = explode('@_@', $myorder);
  echo "===========" . $value[10] ."</br>";
  $sql = "INSERT INTO test(venderId, orderid, pingjia, money, ordertime, paytype, yunfei, orderstatu, user, remark, express) VALUES ";
  $sql .= "('" . $value[0] . $split . $value[1] . $split . $value[2] . $split . $value[3] . $split . $value[4] . $split . $value[5] . $split . $value[6] . $split .     $value[7] . $split . $value[8] . $split . $value[9] . $split . $value[10] . "') ON DUPLICATE KEY UPDATE remark = '" . $value[9] . "', pingjia = '" .     $value[2] . "', orderstatu = '" . $value[7] . "', express = '" . $value[10] . "'";
  mysql_query($sql);
}
mysql_close($con); ?>

5、创建数据库表

CREATE TABLE `test` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'id',
`venderId` int(10) NOT NULL DEFAULT '' COMMENT '商家ID',
`orderid` bigint(20) NOT NULL DEFAULT '' COMMENT '订单ID',
`pingjia` varchar(100) NOT NULL DEFAULT '' COMMENT '订单发出后的状态(是否评价)',
`money` decimal(10,2) NOT NULL DEFAULT '0.00' COMMENT '订单金额',
`ordertime` varchar(100) NOT NULL DEFAULT '' COMMENT '下单时间',
`paytype` varchar(100) NOT NULL DEFAULT '' COMMENT '付款方式',
`yunfei` decimal(10,2) NOT NULL DEFAULT '0.00' COMMENT '运费',
`orderstatu` varchar(100) NOT NULL DEFAULT '' COMMENT '订单状态',
`user` varchar(255) NOT NULL DEFAULT '' COMMENT '订单用户',
`remark` varchar(255) NOT NULL DEFAULT '' COMMENT '备注',
`express` varchar(255) NOT NULL DEFAULT '' COMMENT '物流方式和运单号',
`shop_id` int(10) unsigned NOT NULL DEFAULT '' COMMENT '店铺表ID',
`shop_name` varchar(255) NOT NULL DEFAULT '' COMMENT '店铺名称',
`stattime` int(11) NOT NULL DEFAULT '' COMMENT '下单年月日',
PRIMARY KEY (`id`),
UNIQUE KEY `orderid` (`orderid`)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT=''

注意:各文件中红色部分需要手工修改,此外如果修改js文件名,请在manifest.json中修改相应的配置信息即可。

插件加载步骤:

  

示例代码:https://github.com/jackgitgz/chrome_server_plugin

此示例仅供参考,有理解不到位或错误的还请指出。

利用chrome插件批量读取浏览器页面内容并写入数据库的更多相关文章

  1. 利用Chrome插件向指定页面植入js,劫持 XSS

    资源来自:http://www.2cto.com/Article/201307/225986.html 首页 > 安全 > 网站安全 > 正文 利用Chrome插件向指定页面植入js ...

  2. 利用Chrome的Performance工具排查页面性能问题(原叫timeline)

    当页面中发生卡顿,最先考虑的是swf文件造成的卡顿,经过排查发现不是swf造成的影响,利用Chrome的Performance工具发现页面中的一些元素不断在重新布局,造成潜在的性能瓶颈. 首先在Chr ...

  3. 利用webBrowser获取框架内Html页面内容

    原文:利用webBrowser获取框架内Html页面内容 利用webBrowser获取页面比较简单,MSDN下有示例,在这里不必多说. 可是一些 HTML 文档由“框架”构成,或可以存放它们自己独特 ...

  4. 将RichTextBox的内容直接写入数据库:

    将RichTextBox的内容直接写入数据库: private void button1_Click(object sender, EventArgs e) {    System.IO.Memory ...

  5. java批量读取多个文件并存入数据库

    有时候服务运行的日志文件,需要统计分析,但数据量很大,并且直接在文件中看很不直观,这时可以将文件中的内容导入到数据库,入库后的数据就可以按照需求进行统计分析了. 这个是以服务器的访问日志作为示例,一个 ...

  6. jxl读取excel实现导入excel写入数据库

    @RequestMapping(params = "method=import", method = RequestMethod.POST) @ResponseBody publi ...

  7. 利用chrome console批量下载文件

    因工作需要,需要定期从某页面下载多个文档,是体力活. 想用chrome扩展,找了几个不行.原因是: 1.有的扩展识别不了链接,因为链接是形如:jsp?XXX=XXX的形式 2.有的扩展能批量打开链接, ...

  8. c# 读取 excel文件内容,写入txt文档

    1 winform 读取excel文档 1)点击button按钮,弹出上传excel窗口 private void button_headcompany_Click(object sender, Ev ...

  9. Yii 读取CVS文件内容插入到数据库

    这个方法和上次写的读取txt文件的方法基本上差不多,直接贴代码,需要的直接拿走 function ImportExcel(){ $file = fopen('test.csv','r'); //输出文 ...

随机推荐

  1. 【C#】析构函数

    MSDN paper 析构函数 析构函数(destructor) 与构造函数相反,当对象脱离其作用域时(例如对象所在的函数已调用完毕),系统自动执行析构函数. 析构函数往往用来做“清理善后” 的工作( ...

  2. Medial Queries的另一用法——实现IE hack

    众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用"\0","\"和"\9"来 ...

  3. caffe中卷积层和pooling层计算下一层的特征map的大小

    pool层,其中ceil是向上取整函数 卷积层:

  4. Xftp连接linux(ubuntu)时提示ssh服务器拒绝了密码,请再试一次

    用xftp root连接时显示ssh服务器拒绝了密码,请重新连接.由于sshd的设置不允许root用户用密码远程登录,修改/etc/ssh/sshd_config文件,但必须是安装了openssh才会 ...

  5. 【配置】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为【经典】模式)。

      ×   检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 5 ...

  6. Bootstrap JavaScript插件

      在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...

  7. Gc.Db之循序渐进

    距离上次写Gc.Db框架已经有一段时间了,最近默默对框架代码已经做了不少优化和功能,且已经提交至nuget,大家如果想使用此框架,可以通过nuget搜索:Gc.Db进行下载和安装包. 本篇文章主要是介 ...

  8. Sublime Text编辑器的12个技巧和诀窍

    本文为您提供Sublime Text编辑器的12个技巧和诀窍,深入挖掘这个看似简洁的代码编辑器,背后所隐藏的实现各种高级功能的无限可能. 1) 选择 以下是一些Sublime Text选择文本的快捷键 ...

  9. 《Javascript高级程序设计》读书笔记(1-3章)

    第一章 JavaScript简介 1.1 JavaScript简史 略 1.2 JavaScript实现 虽然 JavaScript 和 ECMAScript 通常都被人们用来表达相同的含义,但 Ja ...

  10. canvas流星月亮星星银河

    这是页面的特效,首先月亮直接出现,然后星星和银河渐渐的出现(一闪一闪),最后流星划过,留下完美的句点. 所有的动画都是通过帧来实现的. 星星的代码分为2部分,首先是随机生成星星,然后是绘制星星,最后是 ...