浏览器插件开发爬虫记录

news/2024/7/19 9:27:14 标签: 爬虫

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

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

基本项目结构如下：
在这里插入图片描述

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进行代理，如果设置了代理，那么后续的请求都会走代理， 点击浏览器插件就会展示如下图对应的页面

在这里插入图片描述

<!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", "<local>"]
	}
};
    // 设置代理
	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上打开一个页面， 如下图
在这里插入图片描述

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 里面拦截到的接口数据是不能直接和插件页面通信的，不过可以通过接口请求将数据传送到自己的服务器上， 如下图
在这里插入图片描述

在 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

			});
		});
})

最后的结果就类似这样
在这里插入图片描述


http://www.niftyadmin.cn/n/5076795.html

相关文章

人生第一个成熟的java系统(前后端相连)目前我只试用了一个功能(登录) 其他功能都有,如果感兴趣可以自己试着改一下

人生第一个成熟的java系统(前后端相连)目前我只试用了一个功能(登录) 其他功能都有,如果感兴趣可以自己试着改一下

一个成熟的项目是要分层来完成的 目前我了解的1. 持久层:用来写底层的逻辑代码来给服务层调用 2. 服务层:要有一个接口,来提供具体的参数来调用持久层方法 3. 视图层(自己定义的,不喜勿喷) 就是用来从前端获取参数的 这个其实可以叫:servlet层 再lib里面要复制进去连接数…
阅读更多...
【SpringCloud】Ribbon负载均衡原理、负载均衡策略、饥饿加载

【SpringCloud】Ribbon负载均衡原理、负载均衡策略、饥饿加载

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 Ribbon 一、 Ribbon负载均衡原理1.1 负载均…
阅读更多...
全图化在线系统设计

全图化在线系统设计

Pillars是什么 Pillars是一个Serverless全图化业务托管平台。Pillars应用全图化开发模型，提供丰富的运行时组件，支持CI/CD全生命周期项目管理，具备主动式资源优化能力。 Pillars解决什么问题 当前广告系统架构采用分布式微服务的设计理念，通过服务分治实现各组织间开发、…
阅读更多...
日常学习记录随笔-seata

日常学习记录随笔-seata

我们知道所有的事务都要满足ACID的原则,也就是原子性 一致性 隔离性 持久性 在单体架构中服务访问db.基于数据库本身的特性就能够实现acid 微服务的架构比较复杂 可能一个业务要跨越多个服务 每个服务又会有自己的db库 再靠数据库本身的特性 还能保证acid么这个业务 就包含3…
阅读更多...
日常学习记录随笔-大数据之日志(hadoop)收集实战

日常学习记录随笔-大数据之日志(hadoop)收集实战

数据收集(nginx)--->数据分析---> 数据清洗--->数据聚合计算---数据展示 可能涉及到zabix 做任务调度我们的项目 电商日志分析 比如说我们现在有一个系统,我们的数仓建立也要有一个主题 我这个项目是什么我要干什么定义方向 对用户进行分析,用户信息 要懂整个数据的流…
阅读更多...
【学习篇】CCP协议

【学习篇】CCP协议

前言&#xff1a;我只是一个抄书人&#xff0c;以下关于CCP协议知识点的学习均抄录自书籍&#xff0c;侵权请联系删除。 CCP协议介绍 CCP的全称是CAN Calibration Protocol&#xff08;CAN标定协议&#xff09;&#xff0c;是ASAP标准的有机组成部分&#xff0c;属于ASAP1a规…
阅读更多...
Linux动态链接库.so文件

Linux动态链接库.so文件

一、动态库和静态库的区别 库是一个二进制文件&#xff0c;包含的代码可以被程序调用&#xff0c;如标准库、线程库。Windows 和 Linux下的库文件格式不兼容。 Windows环境&#xff1a;静态库是 .lib 文件&#xff0c;共享库是 .dll 文件 Linux环境&#xff1a;静态库是 .a 文…
阅读更多...
Python自动化测试框架pytest的详解安装与运行

Python自动化测试框架pytest的详解安装与运行

这篇文章主要为大家介绍了Python自动化测试框架pytest的简介以及安装与运行&#xff0c;有需要的朋友可以借鉴参考下希望能够有所帮助&#xff0c;祝大家多多进步 1. pytest的介绍 pytest是一个非常成熟的全功能的python测试工具&#xff0c;它主要有以下特征&#xff1a; 简…
阅读更多...
最新文章

Copyright @ 2022~2023