浏览器插件开发爬虫记录

常用爬虫有各种各样的反爬限制,而如果是小数据量并且该网站反爬手段非常厉害的前提下,可以考虑使用浏览器插件作为爬虫手段

基本代码来源于这位博主分享的插件代码, 主要在他的基础上加了 请求代理、管理面板、脚本注入拦截到的请求数据和管理面板之间的交互

基本项目结构如下:
浏览器插件开发爬虫记录_第1张图片

1 manifest.json

manifest.json 是浏览器加载插件、插件权限申请的配置文件

{
  "name": "xx爬虫",    // 插件名称
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "/html/popup/popup.html"    // 在浏览器上点击插件展示的页面内容
  },
  "permissions": [     // 权限申请,目前申请了代理、tab、存储等功能
    "proxy",
    "tabs",
    "storage",
    "notifications"
  ],
  "externally_connectable": {
  "matches": ["*://*.example.com/*"]
},
  "content_scripts": [    // 网页js注入管理程序
    {
      "matches": ["*://xxx.com/*"],
      "js": ["/js/content/page.js", "/js/content/install.js"],   // 注入哪些js
      "run_at": "document_start"    // 在哪个时间点注入
    }
  ],
  "web_accessible_resources": [
    "/js/inject/pikazExcel.js",
    "/js/inject/page.js",
    "/js/inject/network.js"
  ],
    "background": {    // 浏览器启动的时候,插件就在后台运行的js,是一个全局生命周期的存在
    "scripts": ["/js/background/background.js"],
    "persistent": false
  }
}

2 popup

popup可以理解为是一个插件的页面,可以通过页面上提供的方法调用插件里面的功能 如拦截到数据之后下载到本地, 或者请求后端接口拿代理ip进行代理,如果设置了代理,那么后续的请求都会走代理, 点击浏览器插件就会展示如下图对应的页面

浏览器插件开发爬虫记录_第2张图片

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      #box {
        align-items: center;
      }
      #input-box {
        display: flex;
        align-items: center;
      }
      .label {
        white-space: nowrap;
      }
      .btn-box {
        padding-left: 50px;
        padding-top: 10px;
      }
    style>
  head>
  <body>

    <div id="btn-box3">
        <button id="set-proxy-btn">设置代理button>
      div>
        <br>

    <div id="btn-box4">
        <button id="open_manage_panel">打开管理面板button>
      div>
    <br>
    <script src="/html/popup/popup.js">script>
  body>
html>


function set_proxy() {
    var config = {
	mode: "fixed_servers",
	rules: {
		proxyForHttp: {
			scheme: "http",
			host: "127.0.0.1",  // 代理IP, 调用后端接口获取到代理ip的时候将host 和 port配置为对应的地址和端口
			port: 80 //代理端口
		},
		proxyForHttps: {
			scheme: "http",
			host: "127.0.0.1",
			port: 443
		},
		bypassList: ["localhost", "127.0.0.1", ""]
	}
};
    // 设置代理
	chrome.proxy.settings.set(
		{ value: config, scope: 'regular' },
		function () {
	        console.log("设置代理成功") });
	  var originalIp = "";
	  // 设置代理成功后校验代理是否正常,如果不需要校验也可以去掉下面的代码
	    async function getCurrentIp() {
	        let res = await fetch('http://api.ipify.org/');
	        return await res.text();
	    }
	    // Get ip before setting proxy
	    getCurrentIp().then(ip => {
	        originalIp = ip;
	        console.log(originalIp);
	    });

}


function open_tabs() {
    chrome.tabs.create({
        url: './html/manage_panel/manage_panel.html'
    })
}
document.getElementById('open_manage_panel').onclick = open_tabs
document.getElementById('set-proxy-btn').onclick = set_proxy
// set_proxy()

可以设置代理,也可以点击管理面板在新的tab上打开一个页面, 如下图
浏览器插件开发爬虫记录_第3张图片

content_script

content_script 我的理解是一个管理往网页注入js脚本的一个控制程序,负责管理注入到网页的 inject js脚本文件,可以跟被注入到网页的 inject js脚本进行通信,也可以跟程序页面或全局背景js进行通信,后面拦截到的数据主要通过它来获取转发到插件页面上,是一个数据中转、管理注入脚本的一个控制器

var comment_id_list  = []
var comment_data = {}

// 转发popup指令  popup => content script => inject script
chrome.extension.onMessage.addListener(
    function (request, sender, sendResponse) {
      // 将inject拦截到的数据
      if (request.action === "get_show_data") {
            console.log("收到get_show_data请求")
            
            // comment_data 和 comment_id_list 是下面inject newtwork.js 中拦截到的数据存储变量,在content_script中可以直接使用 inject里面的变量
            sendResponse({comment_data: comment_data, comment_id_list: comment_id_list})
        }
    }
);

// 监听数据
window.addEventListener("message", function(e) {
    if (e.data.action === 'comment_data'){
    // 监听message, 将 inject 里面的js 转发的数据存储到本地上
        comment_data = e.data.comment_data
        comment_id_list = e.data.comment_id_list
    }

}, false);


// 插件启动的时候给background 全局对象发送一个请求,目的是让background缓存当前插件的tabid
chrome.runtime.sendMessage({
    type: "action"
});

inject

inject 是注入到页面的js文件,可以在这个js里面进行请求响应数据的拦截,上面博主分享的代码里面已经完成了数据的拦截,这里主要记录的是 注入页面的js如何和管理面板进行通信传递数据

正常来说 inject 里面拦截到的接口数据是不能直接和插件页面通信的,不过可以通过接口请求将数据传送到自己的服务器上, 如下图
浏览器插件开发爬虫记录_第4张图片

在 inject 脚本拦截获取到数据之后,将数据内容直接发到直接的服务器上,需要注意后端服务器是否有跨域请求

第二种在页面展示数据的方法是 每次拦截到数据之后给content_script 存储起来,content_script 先是通过 chrome.runtime.sendMessage 给 background.js 发送一个数据,让background.js 获取到插件的tabid,然后每次接受到inject 注入的js转发的数据后存储起来,等到tab管理页面需要的时候转发给他

background.js
var tabid = ""

// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    tabid = sender.tab.id
});


function get_tabid(){
    console.log("获取tabid: ", tabid)
    return tabid
}

background.js 是一个全局的对象,在浏览器开始的时候就存在了,它可以接收到 浏览器插件页面的调用,也可以接收到 content_script 给它发送的数据内容,本插件管理页面和content_script 之间的通信是通过 tabid来进行通信的,需要background.js 存储content_script 的tabid,以供 管理页面使用

管理页面
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>管理面板title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/config/jquery.min.js">script>

<script type="text/javascript" src="/js/config/subnav.js">script>
<script type="text/javascript" src="/html/manage_panel/manage_panel.js">script>
head>
<body>
<div  style="overflow: hidden; width: 80%; margin: auto">

<br/>
<textarea rows="50" cols="250" id="text" style="padding: 40px; margin: auto; width: 100%;display: block">textarea>
div>
body>
html>


$(function() {
	// 获取background对象
	const background = chrome.extension.getBackgroundPage();
	// 获取这个background  全局对象中存储的插件作用的tabid
	var tabid = background.get_tabid()

    // 获取插件的数据并渲染到html上    	
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
		{
			chrome.tabs.sendMessage(tabid, {"action": "get_show_data"}, function(response)
			{
                console.log("rrrrrrrrrrr", response)
				var new_comment_data = response.comment_data
				var new_comment_id_list = response.comment_id_list
				var html = ""
				for (let i = 0; i < new_comment_id_list.length; i++) {
                   
              html += `\n ${JSON.stringify(new_comment_data[new_comment_id_list[i]])} \n\n\n\n`
                   
				}
              
                document.getElementById("text").value += html

			});
		});
})

最后的结果就类似这样
浏览器插件开发爬虫记录_第5张图片

你可能感兴趣的:(爬虫)