抓取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 = respond.content;
//此处通过http发起服务端请求,将content写入自己的数据库或文件
});
}
var posStart = 1;
var posMax = 200;//循环调用200次
var tabId = 0;
var intervalObj = null;
chrome.browserAction.onClicked.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; }
chrome.tabs.create({ url: "后台管理会员列表RPC地址" }, function (tab) {undefined
tabId = tab.id;
// chrome.tabs.sendMessage/chrome.runtime.onMessage.addListener 必须是分开的才能正常工作
// 因此借用 executeScript 包含监听的脚本
chrome.tabs.executeScript(tab.id, { file: "content.js" }, function () {undefined
sendMessage(tab.id);
});
});
try {undefined
chrome.tabs.remove(tabId); //关闭这个标签页
}
catch (e) {undefined
}
posStart++; //page页面加一
}, 8000) //每隔8秒，重复上述操作
});
3.新建content.js文件,这个文件一般都不用改;
chrome.runtime.onMessage.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扩展即编写完成了.
