抓取html对象插件,chrome扩展获取页面dom对象信息

引用地址：https://blog.csdn.net/weixin_33985453/article/details/117851301?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~default-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~default-1.pc_relevant_default&utm_relevant_index=1

场景:某网站后台管理员页面,有几万会员数据,但列表页面每次只能显示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扩展即编写完成了.