抓取html对象插件,chrome扩展获取页⾯dom对象信息
场景：某⽹站后台管理员页⾯，有⼏万会员数据，但列表页⾯每次只能显⽰20个，通过F12可以得知列表是通过RPC调⽤，然后解析Json串在前端进⾏展⽰渲染的，现要获取所有会员信息，因后台没有导出功能，如果⼀页⼀页翻看并拷贝粘贴，那肯定是⼀件极其繁琐⽆聊的事情;
解决过程：最先想到的是编写⼀个web程序，然后通过httpclient调⽤RPC，带上cookiee及参数，但是调⽤时发现⽆法通过⽤户认证；换个思路，既然后端请求有权限验证问题，那就让请求直接在浏览器发起,⾃动化测试⼯具及chrome扩展都可以发起浏览器请求,⽹上搜了下 chrome扩展，本以为很难，看了下 chrome已定义好框架，往⾥⾯塞内容即可，如果不涉及⾼级功能其实还是挺简单的，下⾯记录下编写的步骤;
chrome扩展基本⽂件包括 manifest.json,background.js,content.js,popup.html
编写步骤:
1.新建manifest.json，该⽂件是主要配置⽂件，包含资源定义及配置信息，这⾥只要配置即可未涉及功能实现;
{undefined
"manifest_version": 2,
"name": "GetMobile",
"version": "1.0",
"description": "get youzan mobile",
"content_security_policy": "script-src 'self'",
"browser_action": {undefined
"default_icon": "icon.png",//扩展的图表
"tooltip": "my extentions"
},
"permissions": ["tabs"," //*"],
"background": {undefined
"scripts": ["background.js","jquery-1.9.1.min.js"], //这⾥是脚本资源定义
"persistent": false
}
}
2.新建background.js，该⽂件是主要功能⽂件，要实现的主要功能都写在这⾥;
function sendMessage(tabid) {undefined
chrome.tabs.sendMessage(tabid, { action: "getText" }, function (respond) {undefined
var formatStr = t;
//此处通过http发起服务端请求，将content写⼊⾃⼰的数据库或⽂件
});
}
var posStart = 1;
var posMax = 200;//循环调⽤200次
var tabId = 0;
var intervalObj = null;
Clicked.addListener(function () {undefined
intervalObj = setInterval(function () {undefined
if (posStart == (posMax+1)) { alert("so happy,is finished!");if(intervalObj){clearInterval(intervalObj);}return; }
if (posStart > posMax) {return; }
ate({ url: "后台管理会员列表RPC地址" }, function (tab) {undefined
tabId = tab.id;
// chrome.tabs.sendMessage/Message.addListener 必须是分开的才能正常⼯作
// 因此借⽤ executeScript 包含监听的脚本
uteScript(tab.id, { file: "content.js" }, function () {undefined
sendMessage(tab.id);
});
});
try {undefined
ve(tabId); //关闭这个标签页
}
catch (e) {undefined
}
posStart++; //page页⾯加⼀
}, 8000) //每隔8秒，重复上述操作
html实现用户注册登录代码
});
3.新建content.js⽂件，这个⽂件⼀般都不⽤改;
Message.addListener(function (request, sender, sendResponse) {undefined
if (request.action == "getText");
{undefined
var result = document.all[0].outerHTML; // innerText
sendResponse({ content: result });
}
});
4.新建popup.html⽂件，该⽂件是扩展说明⽂件
test
获取信息
5.好了主要⽂件已加好，在同⽬录下增加icon.png,⾄此chrome扩展已编写完成；下⾯我们进⾏打包;
6.在浏览器输⼊chrome://extensions/ 然后点击打包扩展程序，选择代码⽬录即可(私有密钥⽂件不⽤选)
0818b9ca8b590ca3270a3433284dd417.png
0818b9ca8b590ca3270a3433284dd417.png
0818b9ca8b590ca3270a3433284dd417.png
0818b9ca8b590ca3270a3433284dd417.png
0818b9ca8b590ca3270a3433284dd417.png
7.选择代码⽬录⽂件，到crx打包后的⽂件，然后将crx⽂件拖⼊chrome://extensions/，提⽰是否要添加扩展程序，选择是，扩展即添加成功，这个时候，仔细观察发现右上⾓有你的扩展图表.
8.好了,⾄此chrome扩展即编写完成了.