问题描述

先说一下项目的需求：使用Chrome插件对bug提交系统的数据信息进行统计，bug提交系统大概长这个样子：
由于这个页面中只是包含部分信息，详细信息仍需要点击链接进入查看详情。详情类似于这样：
采用Chrome插件循环获取每一条数据信息的详细内容，对获取的内容进行单独存储，以方便后续插件添加按条件筛选功能

问题分析

Chrome插件开发过程中，需求是对某一数据系统的每一条内容进行获取与统计，这就涉及到一个问题——需要循环获取列表中每一条数据的详情链接，并且加载链接中的HTML文件以进行DOM操作
显然在网页中创建一个1px-1px的iframe用来循环加载各个网页的url在数据量较小的情况下是可行的，但是当数据量以千、甚至以万为单位时，上述方法显然不会有很好的效率可言
为此，考虑到采集数据时均为对DOM的操作，如果仅仅请求每条数据链接的HTML文件并转换为DOM文件进行操作 来取代 采用浏览器创建iframe渲染HTML再加载DOM的方式 是否能够缩短处理每一条数据的时间，为此，作者进行了一次尝试。开发框架和流程如下：
- 采用popup作为控制窗口，向background和content发送动作信号
- background作为数据存放仓库，以json的形式存放获取的数据
- content嵌入目标网页中，用于获取网页中的数据信息
- 运行流程为：
  - 1.popup发送数据采集信号->content获得信号并开始采集数据信息->content采集的数据信息发送给background中进行存储
  - 2.popup发送数据获取信号->background获得信号并将对应数据返回给popup

涉及技术

使用js操作网页的cookies以达到更改网页中某些布局显示的功能：

// 创建一个时间对象
var d = new Date();
// 设置一个1天的有效期，防止浏览器会自动清除超时的cookie的值
d.setTime(d.getTime() + (24*60*60*1000));
// 添加参数
var expires = "expires="+d.toUTCString();
// 将关键参数注入到网页的cookies中
document.cookie = 'pagerBugBrowse' + "=" + request.pagerBugBrowse + "; " + expires;
// 刷新网页，使刚刚的更改生效
window.location.reload(true)

通过修改cookies来让网页能够以一个页面加载超多条数据的方式进行显示，方便后续数据获取的操作

利用XMLHttpRequest实现依靠url链接仅仅获得网址中的HTML信息：

function makeHttpObject() {return new XMLHttpRequest();
}var request = makeHttpObject();request.open("GET", "http://www.baidu.com", true);request.send(null);request.onreadystatechange = function() {console.log(request.responseText)
};

创建一个新的Element，将步骤2中获得的HTML字符串添入

var wrapper = document.createElement('html')
wrapper.innerHTML = request.responseText

此时便可以通过常规的js获取DOM元素的方法获得目标元素了

耗时测试

有对比才有说服力，本文在此对创建iframe加载html的方法 和 直接通过加载html的方法进行测试
采用直接通过加载html的方法采集单个信息平均用时xxx
采用创建iframe加载html的方法采集单个信息平均用时xxx
方法完善且可以提供参考作用，但是我的实验不完善，耗时测试等后续实验完成再更新
（持续更新中）

用Chrome插件实现网页数据统计功能相关推荐

微信公众平台数据统计功能的作用是什么？
2013年8月29日晚,微信产品团队通过服务号"微信公众平台"发布信息,宣布"微信公众平台增加数据统计功能"."数据统计功能'"菜单分为用户 ...
CSDN产品公告第3期：博客数据统计功能上线，OFFER大挑战等你来！
各位小主,咱们又见面了!在前两期的公告中,CSDN产品组已感受到大家对我们深沉的爱,再此谢谢大家的褒贬.服务好每一位用户,是我们一直不变的初心. 在过去一周,开发在产品的鞭策下,又带来了哪些功能呢? ...
SpringBoot+LayUI+MybatisPlus+Echarts图表前后端分离实现数据统计功能
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 首先给各位粉丝朋友 ...
1 微信公众平台数据统计功能的作用是什么？
1 微信公众平台数据统计功能的作用是什么? 1.用户消息分析通过微信公众平台的后台提供的用户消息的数据分析来查看针对用户发送的消息的统计,包括消息发送人数.次数等分析.进而更好的管理用户,把用户进行 ...
微信公众平台推数据统计功能商业价值可量化
8月29日晚,微信产品团队通过服务号"微信公众平台"发布消息,宣布"微信公众平台增加数据统计功能".与此同时,细心的用户发现登陆微信公众平台,后台界面上增加了& ...
云展网教程 | 数据统计功能
数据统计功能仅限于付费用户使用,即不管是个人版/黄金版/企业版都可以使用这个功能.数据统计主要统计两方面:一是总的书籍阅读量,下载量,分享次数,关注粉丝数量,二是每本杂志的阅读量,下载量以及分享次数. ...
乌龟php微信复制统计系统,微信公众平台再次更新：强化后台数据统计功能
微信公众平台再次进行了更新,比之前更加强化后台的数据统计功能,在单纯的阅读数据.粉丝数据统计基础上,新增了终端机型统计.阅读渠道统计等指标.具体更新如下: 1)用户增长页增加增长来源统计,可按来源查看 ...
国内无代码平台数据统计功能对比
数据统计是为了可以分析你的店铺,上个月与本月的对比,去年与今年的对比,从数据可以看出昨天的生意怎么样,做活动有没有效果,效果怎么样,这些都是用数据说话的.根据数据分析并做出调整是一个企业必不可少的环节 ...
chrome插件获取页面html,chrome扩展实现获取网页数据的功能
场景:某网站后台管理员页面,有几万会员数据,但列表页面每次只能显示20个,通过F12可以得知列表是通过RPC调用,然后解析Json串在前端进行展示渲染的,现要获取所有会员信息,因后台没有导出功能,如果 ...

用Chrome插件实现网页数据统计功能

用Chrome插件实现网页数据统计功能

问题描述

问题分析

涉及技术

耗时测试

用Chrome插件实现网页数据统计功能相关推荐

最新文章

热门文章