chrome插件:提取页面数据

近期在做chrome插件,需要提取页面里的一些数,简单说就是企业版微博的后台数据,因为微博不提供导出功能。最开始是用php完成的,但是每次都需要先把页面代码保存下来,再进行提取,很麻烦。chrome插件可以和页面DOM交互,看起来很方便,所以开始学着写。javascript和jQuery都是边学习边写。

以下代码实现了把需要的数据提出来,需要补充xmlHttpObject部分。

<script type="text/javascript" charset="UTF-8" src="http://chenbinx.cn/kaiguan/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("span.main_title").click(function(){
        console.log("执行了!");
        var m=$("[class=‘S_line2 W_tc fst‘]");
        time=m[0];//选取第一个节点  
        console.log("日期为:"+time.innerText);//why
        var content=nextSibling(time);//获取兄弟节点  
        console.log("博文内容为:"+content.innerText);
        var read=nextSibling(content);
        console.log("博文阅读数为:"+read.innerText);
        var zan=getFirst(nextSibling(read));//获取下一个兄弟的第一个孩子节点 
        console.log("转评赞为:"+zan.innerText);
        var clicknum=nextSibling(zan);//获取这个孩子的下一个兄弟  
        console.log("短链点击为:"+clicknum.innerText);
    })
})

function getFirst(elem){
    for(var i=0,e;e=elem.childNodes[i++];){
        if(e.nodeType==1)
            return e;
    }
}  

        //下一个兄弟节点
        function nextSibling(node) {
            var tempLast = node.parentNode.lastChild;
            if (node == tempLast) return null;
            var tempObj = node.nextSibling;
            while (tempObj.nodeType != 1 && tempObj.nextSibling != null) {
                tempObj = tempObj.nextSibling;
            }
            return (tempObj.nodeType==1)? tempObj:null;
        }
        //前一个兄弟节点
        function prevSibling(node) {
            var tempFirst = node.parentNode.firstChild;
            if (node == tempFirst) return null;
            var tempObj = node.previousSibling;
            while (tempObj.nodeType != 1 && tempObj.previousSibling != null) {
                tempObj = tempObj.previousSibling;
            }
            return (tempObj.nodeType==1)? tempObj:null;
        }
</script>

这里把需要提取数的源代码也附上

<body>
<div class="E_PCD_chart2">
    <div class="WB_cardtitle_b S_line2">
      <h4 class="obj_name">
        <span class="main_title W_fb W_f14">博文分析</span>
        <span class="subtitle S_txt2">
          <span class="W_icon icon_askS" action-type="layerIcon" action-data="t=2"></span>
        </span>
      </h4>
          </div>
        <div class="WB_innerwrap" node-type="articlesList">
              <table class="EM_table">
          <colgroup>
            <col width="12%">
            <col width="37%">
            <col width="12%">
            <col>
            <col width="9%">
          </colgroup>
          <thead>
            <tr>
              <th class="S_line2 S_txt2 W_tc fst">发布时间</th>
              <th class="S_line2 S_txt2">博文内容</th>
              <th class="S_line2 S_txt2">博文阅读数</th>
              <th class="S_line2 S_txt2 W_tc">
                <span>互动数</span>
                <i class="ann c1"></i>
                <span>转评赞</span>
                <i class="ann c2"></i>
                <span>短链点击</span>
              </th>
              <th class="S_line2 S_txt2 lst">
                操作
                <span class="W_icon icon_askS" action-type="layerIcon" action-data="t=1"></span>
              </th>
            </tr>
          </thead>
          <tbody>
                          <tr>
                <td class="S_line2 W_tc fst">
                  <p>2015-05-24 21:39</p>
                </td>
                <td class="S_line2">
                  <a href="http://weibo.com/1854902371/CjmjFoKBD" target="_blank" class="S_txt1">#520爱尚我# 呛口同款西班牙芭蕾新履,Pretty Ballerinas大促5折...</a>
                </td>
                <td class="S_line2">7564</td>
                <td class="S_line2">
                  <dl class="EM_stripe clearfix">
                    <dt class="W_fl W_tr">6</dt>
                    <dd class="W_fl">
                      <span class="stripe">
                        <i class="inner c1" style="width:2.52%;"></i>
                      </span>
                    </dd>
                  </dl>
                  <dl class="EM_stripe clearfix">
                    <dt class="W_fl W_tr">12</dt>
                    <dd class="W_fl">
                      <span class="stripe">
                        <i class="inner c2" style="width:5.04%;"></i>
                      </span>
                    </dd>
                  </dl>
                </td>
                <td class="S_line2 lst">
                                      <a class="S_txt1" href="javascript:;" action-type="extension" action-data="url=http%3A%2F%2Fpromote.vip.weibo.com%2Fpromote%3Ffrom%3De_weibo%26mid%3D3846140195899029%26ru%3Dhttp%3A%2F%2Fweibo.com%2Fp%2F1006061854902371%2Fmanage%3Fiframe_url%3Dhttp%3A%2F%2Fe.weibo.com%2Fv1%2Feps%2Fdata%2Farticlestats%26failRu%3Dhttp%3A%2F%2Fweibo.com%2Fp%2F1006061854902371%2Fmanage%3Fiframe_url%3Dhttp%3A%2F%2Fe.weibo.com%2Fv1%2Feps%2Fdata%2Farticlestats" suda-uatrack="key=DataService&amp;value=123">推广</a>
                                  </td>
              </tr>
                          <tr>
                <td class="S_line2 W_tc fst">
                  <p>2015-05-24 17:26</p>
                </td>
                <td class="S_line2">
                  <a href="http://weibo.com/1854902371/CjkEYrqia" target="_blank" class="S_txt1">#520爱尚我# 尚品网5周年大促即将结束,ASH全场4折起!明星款至...</a>
                </td>
                <td class="S_line2">16204</td>
                <td class="S_line2">
                  <dl class="EM_stripe clearfix">
                    <dt class="W_fl W_tr">6</dt>
                    <dd class="W_fl">
                      <span class="stripe">
                        <i class="inner c1" style="width:2.52%;"></i>
                      </span>
                    </dd>
                  </dl>
                  <dl class="EM_stripe clearfix">
                    <dt class="W_fl W_tr">17</dt>
                    <dd class="W_fl">
                      <span class="stripe">
                        <i class="inner c2" style="width:7.14%;"></i>
                      </span>
                    </dd>
                  </dl>
                </td>
                <td class="S_line2 lst">
                                      <a class="S_txt1" href="javascript:;" action-type="extension" action-data="url=http%3A%2F%2Fpromote.vip.weibo.com%2Fpromote%3Ffrom%3De_weibo%26mid%3D3846076526535926%26ru%3Dhttp%3A%2F%2Fweibo.com%2Fp%2F1006061854902371%2Fmanage%3Fiframe_url%3Dhttp%3A%2F%2Fe.weibo.com%2Fv1%2Feps%2Fdata%2Farticlestats%26failRu%3Dhttp%3A%2F%2Fweibo.com%2Fp%2F1006061854902371%2Fmanage%3Fiframe_url%3Dhttp%3A%2F%2Fe.weibo.com%2Fv1%2Feps%2Fdata%2Farticlestats" suda-uatrack="key=DataService&amp;value=123">推广</a>
                                  </td>
              </tr>
                          <tr>
                <td class="S_line2 W_tc fst">
                  <p>2015-05-24 14:05</p>
                </td>
                <td class="S_line2">
                  <a href="http://weibo.com/1854902371/CjjlobuW8" target="_blank" class="S_txt1">#520爱尚我# 尚品网5周年大促,URBAN REVIVO、DAZZLE、d‘zzit等...</a>
                </td>
                <td class="S_line2">13614</td>
                <td class="S_line2">
                  <dl class="EM_stripe clearfix">
                    <dt class="W_fl W_tr">3</dt>
                    <dd class="W_fl">
                      <span class="stripe">
                        <i class="inner c1" style="width:1.26%;"></i>
                      </span>
                    </dd>
                  </dl>
                  <dl class="EM_stripe clearfix">
                    <dt class="W_fl W_tr">16</dt>
                    <dd class="W_fl">
                      <span class="stripe">
                        <i class="inner c2" style="width:6.72%;"></i>
                      </span>
                    </dd>
                  </dl>
                </td>
                <td class="S_line2 lst">
                                      <a class="S_txt1" href="javascript:;" action-type="extension" action-data="url=http%3A%2F%2Fpromote.vip.weibo.com%2Fpromote%3Ffrom%3De_weibo%26mid%3D3846025942740532%26ru%3Dhttp%3A%2F%2Fweibo.com%2Fp%2F1006061854902371%2Fmanage%3Fiframe_url%3Dhttp%3A%2F%2Fe.weibo.com%2Fv1%2Feps%2Fdata%2Farticlestats%26failRu%3Dhttp%3A%2F%2Fweibo.com%2Fp%2F1006061854902371%2Fmanage%3Fiframe_url%3Dhttp%3A%2F%2Fe.weibo.com%2Fv1%2Feps%2Fdata%2Farticlestats" suda-uatrack="key=DataService&amp;value=123">推广</a>
                                  </td>
              </tr>
                      </tbody>
        </table>
</div>
</div>
</body>
时间: 2024-11-08 23:55:21

chrome插件:提取页面数据的相关文章

借助Chrome和插件爬取数据

工具 Chrome浏览器 TamperMonkey ReRes Chrome浏览器 chrome浏览器是目前最受欢迎的浏览器,没有之一,它兼容大部分的w3c标准和ecma标准,对于前端工程师在开发过程中提供了devtools和插件等工具,非常方便使用.在爬取数据的过程中,最常用的应该是开发工具中的Element.Source和Network功能,分别查看DOM结构,源码和网络请求.同时,有很多基于Chrome浏览器的插件又给我们赋予了浏览器级别的能力,来处理数据. TamperMonkey Ta

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

资源来自:http://www.2cto.com/Article/201307/225986.html 首页 > 安全 > 网站安全 > 正文 利用Chrome插件向指定页面植入js,劫持 XSS,一些猥琐的想法与实践 2013-07-08      0个评论       收藏    我要投稿 0x00 Chrome插件--------------------------这个想法是昨天看到@紫梦芊 的帖子想起来的.想法如下:Chrome插件是可以通过manifest.json的控制,向指

chrome 浏览器插件开发(二)—— 通信 获取页面 编写chrome插件专用的库

在chrome插件的开发过程中,我遇到了一些问题,在网上找了不少文章,可能是浏览器升级的原因,有一些是有效的也有无效的.下面我简单的分享一下我遇到的坑,以及我把这些坑的解决方案整理而成的js库 —— crxTool . 一.坑和铲子 1.browser action或page action与content script通信 在网上找了不少方法,最后选择的方法如下: 发送消息: 1 var send= function(data, cb){ 2 chrome.tabs.query({active:

利用chrome插件批量读取浏览器页面内容并写入数据库

试想一下,如果每天要收集100页网页数据甚至更多.如果采用人工收集会吐血,用程序去收集也就成为一个不二的选择.首先肯定会想到说用java.php.C#等高级语言,但这偏偏又有个登陆和验证码,搞到无所适从.还在为收集web端的数据感到苦恼吗?很高兴,你找对地方了. 应用场景: 1.需要每天大量重复收集web端的数据 2.web页面数据需要登陆后才能采集 3.web页面存在翻页 解决方案: 手工登陆,然后采用chrome插件的方式进行收集.当然你会说用selenium等自动化测试的方法进行收集更co

Chrome,本地页面和插件

今天测试一款Chrome插件,这款插件提供了一些本地页面做测试用,在解决一些技术问题之后,在插件的官网上可以测试成功了,但是在本地页面上测试时Chrome始终会拦截插件,即使在右上角的地址栏中允许该本地页面始终使用插件也不行 后来查了一下,这样做可以解除对插件的拦截: 在Chrome地址栏中输入“chrome://plugins”,进入Chrome的插件管理页面,在页面上找到需要使用的插件,勾上“始终允许运行”,这样即使在本地页面上也不再会拦截插件了,测试顺利进行!

这是一款借助chrome 插件的微信机器人

1.chrome kit微信机器人简介(github:https://github.com/LinuxForYQH/chrome_kit) 借助chrome 插件 js注入来实现消息的发送 chrome devtool api的调用来监听https请求 打开微信登录界面,在扫码登录前必须先打开toolbar(F12 或者 鼠标右键检查),如上所说因为借助了chrome devtool api所以需要打开toolbar才能执行相关dev域的js. 2.相关开发原理介绍 https://develo

chrome浏览器提取网页视频

在我们平时上网看视频听音乐时都会产生缓存,但是我们很难通过一些软件把其中的视频和音乐文件提取出来 关于本文中提及的chrome浏览器,已在上一篇博文中提及,请自行翻阅:http://blog.sina.com.cn/s/blog_6fa5aa4a010136l5.html 在chrome浏览器中,可以利用F12键审查元素的功能查出原视频或音乐的源地址,可以通过源地址下载下来 先说抓取视频的方法: 1.打开视频地址,如:http://www.tudou.com/albumplay/BDG9NP__

Chrome 插件: 起动本地应用 (Native messaging)

Chrome 插件: 起动本地应用 (Native messaging) www.MyException.Cn  网友分享于:2014-08-01  浏览:3次 Chrome 插件: 启动本地应用 (Native messaging) 最近碰到了一个新问题,需要利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地C#应用,同时给这个应用传值来进行不同的操作. 在这里记录下解决的过程,以便以后查找 首先我们需要新建一个google的插件 这个插件包含了三个文件 manifest.jso

29个前端工程师和设计师必备的Chrome插件

Google Chrome是最好用的几个浏览器之一,自从2011年11月份赶超Firefox之后,已成为当今互联网的主流浏览器.今天,我来分享下自己收集的一系列Chrome插件,希望能够提高大家的工作效率. Devtools Terminal—嵌在浏览器中的终端.开发调试利器! LiveReload—集成LiveReload官方应用(Mac和Windows)以及guard-livereload.yeoman等第三方工具.帮助开发者快速构建Web应用. · BrowserStack Local?—