起因:
需要抓取某一些页面,但是需要登录,各种验证;
思考:
对于这种不是很常用的页面,但是又有需要的,能否在一遍看的时候一边让爬虫爬取呢?半自动爬虫
经过:
使用过市面上的各种爬虫:火车头,八爪鱼,,,发现都不是很理想,总是很难绕过验证(验证码,图片验证,滑块验证,选图片验证,机器人验证,划线验证),泪崩了!
破釜沉舟:
自己开发一个爬虫,将自己打开的页面进行抓取并发送到我自己的爬虫页面进行解析, 说干就干;
决定自己开发一个浏览器插件
写好的代码库
1.先建立一个空白的项目
2.空白项目中增加浏览器插件的配置文件
{
"manifest_version": 2,
"name": "html-scraper",
"description": "Html页面抓取工具,支持转发完整页面到指定html爬虫解析器",
"version": "1.0.0",
"browser_action": {
"default_icon": "static/icon.png",
"default_title": "Html爬虫助手",
// 插件默认的弹出页
"default_popup": "popup.html"
},
"permissions": [
// 下面是通配符,通配全部网页地址,协议头,域名,路径信息
"*://*/*",
// 标识可以操作tab
"tabs"
]
}
3.增加弹出页面的内容 popup.html
4.发现弹框就是一个普通的html页面,开始思考能否使用html的各种js和小工具
<body>
<div id="app" class="main">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue! 测试写个插件'
}
})
</script>
</body>
貌似不行!准备查查原因!
5.查找拓展程序,发现提示有错!
翻译一下发现:Chrome拒绝执行了,需要修改策略哦!要不就是自己下载一个js到本地!
6.解决JS的加载错误【不要使用网络加载就好了】
vue必须要使用cps版本的,下载地址:https://github.com/vuejs/vue/tree/csp/dist
7.获取页面内容
// 当前片段会将指定 的js插入到指定的页面,很关键
"content_scripts": [
{
"js": ["js/base64.js"],
"matches": [
"http://*/*",
"https://*/*"
],
"run_at": "document_start"
},
{
"js": ["js/content_script.js", "js/jquery-3.1.1.js"],
"matches": [
"http://*/*",
"https://*/*"
],
"run_at": "document_end"
}
]
8.指定脚本中增加监听,监听到了就发送在当前页面获取的内容
chrome.extension.onMessage.addListener(
function(request, sender, sendMessage) {
if (request.action == "scraper") {
// alert(request.url)
// 此时的页面是点击当时的页面状态,对于异步加载此处最佳
var html = document.getElementsByTagName("html")[0].outerHTML;
// 加密成base64的字符串
// console.info(html);
$.ajax({
type: 'POST',
url: "https://xxxxx/crawlerDefault/process-html",
dataType: "json",
headers:{'Content-Type':'application/json;charset=utf8'},
data: JSON.stringify({
url: request.url,
html: "<p>xxxxx</p>"
}),
success: function(result) {
console.info(result.msg);
}
});
} else {
console.info("没有取得相应的动作信息!不做任何处理!")
}
}
);
9.增加页面的右键功能,触发刚才加的时间
// console.info控制台会出现不打印的情况
function htmlScraperClick(info, tab) {
console.info("item " + info.menuItemId + " was clicked");
console.info("info: " + JSON.stringify(info));
console.info("tab: " + JSON.stringify(tab));
chrome.tabs.getSelected(null, function (tab) {
// 当前页面的地址栏url
chrome.tabs.sendMessage(tab.id, {
action: "scraper",
url: tab.url
}, function(response) {
// console.log(response);
});
});
}
chrome.contextMenus.create({
id: 'htmlScraper',
type: 'normal',
title: 'Html Test',
contexts: ['all'],
onclick: htmlScraperClick
}, function () {
console.log('contextMenus are create.');
});
结束:说多了都是泪,中间遇到各种问题
成功的接收到了数据,剩下的就是按照自己的业务进行各种业务功能的开发了
参考资料:
Chrome插件开发入门
插件开发官方资料