【谷歌插件开发】获取当前网站COOKIE并上报HTTP-API

news2025/7/19 6:39:04

一 背景

由于本人每天需要登录网站查看数据并分析统计汇总,而每次机械式地搜索和简单计算,十分繁琐。我们可以写个定时任务,每天根据cookie获取网站数据并遍历统计。

脚本得以成功执行的关键是需要获取到COOKIE

故,写了个谷歌插件用来上报COOKIE

二 代码总目录

三 上代码

  • manifest.json
    {
      "manifest_version": 3,
      "name": "Get Cookie",
      "description": "get cookie",
      "version": "1.0.0.1",
      "action": {
        "default_popup": "index.html",
        "default_icon": "images/icon.png"
      },
      "host_permissions": [
    	  "http://*/*",
    	  "https://*/*"
      ],
      "permissions": [
    	  "cookies",
    	  "tabs"
      ]
    
    }
  • index.html
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8">
    		<link rel="stylesheet" type="text/css" href="mystyle.css">
    	</head>
    	<body>
    		<div id="container">
    			
    			
    			 <div class="sub">
    			    <div class="card">
    					<form action="#">
    						<textarea id="cookie" required readonly name="cookie" value="" placeholder="cookie"></textarea> <br>
    						<br>
    						<textarea id="hostnm" required readonly name="hostnm" value="" placeholder="host name"></textarea> <br>
    						<br>
    						<input id="username" type="text" required name="username" value="" class="username" style="height:30px;font-size: 15px;line-height:30px;" placeholder="请输入投放账户ID" autocomplete="on"> <br>
    						<br>
    						<input id="password" type="password" required name="password" value="" class="password"style="height:30px;font-size: 15px;line-height:30px;"placeholder="请输入密码"><br>
    						<br>
    						<label>环境:</label>
    						<input type="radio" name="env" value="2" checked /> 正式
    						<input type="radio" name="env" value="1" /> 测试
    						<br><br>
    						<input type="button" id="btn" style="background-color: #b3d4fc;width: 60%;height: 30px" value="验证上传">
    					</form>
    			    </div>
    			  </div> 
    		</div>
    		<script src="script.js"></script>
    	</body>
    </html>
  • mystyle.css
    #container {
      width: 250px;
      word-break: break-all;
    }
    .login{
      margin: 0 auto;
      position: relative;
      top: 100px;
      height: 500px;
      width: 400px;
      border-color: aqua;
    }
    .card{
      width: 75%;
      margin: auto;
    }
  • script.js
    const $container = document.getElementById('container')
    document.addEventListener('DOMContentLoaded', () => {
    	chrome.tabs.query({ 'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT },
    		function (tabs) {
    			var url = new URL(tabs[0].url)
    			document.getElementById("hostnm").value = url.host
    			var hostarr = url.host.split('.')
    			hostarr.shift()
    			var curhost = hostarr.join(".");
    			console.log(curhost)
    			
    			chrome.cookies.getAll({
    				domain: curhost
    			}, (cookies) => {
    				console.dir(cookies);
    				cookies.map((c) => {
    					document.getElementById("cookie").value += c.name + "=" + c.value+"; "
    				})
    			})
    			
    			var btn=document.getElementById("btn");
    			btn.onclick=function () {
    				var username=document.getElementById("username").value;//获取用户名input的value
    				var password=document.getElementById("password").value;
    				var cookie=document.getElementById("cookie").value;
    				var hostnm=document.getElementById("hostnm").value;
    				var env = 2;
    				var obj = document.getElementsByName("env")
    				for (var i = 0; i < obj.length; i++) {
    					if (obj[i].checked) {
    						env = obj[i].value;                   
    					}
    				}
    				console.log("env: " + env)
    				console.log("username: " + username)
    				console.log("password: " + password)
    				console.log("cookie: " + cookie)
    				console.log("hostnm: " + hostnm)
    				if(username == undefined || username.trim() == ''){
    					alert("请输入 投放账户ID")
    					return false;
    				}
    				if(password == undefined || password.trim() == ''){
    					alert("请输入 密码")
    					return false;
    				}
    				if(cookie == undefined || cookie.trim() == ''){
    					alert("获取COOKIE失败")
    					return false;
    				}
    				if(hostnm == undefined || hostnm.trim() == ''){
    					alert("获取域名失败")
    					return false;
    				}
    				if(hostnm.trim().indexOf('你想抓去的页面域名') == -1){
    					alert("非需要抓取页面")
    					return false;
    				}
    				username = username.trim();
    				password = password.trim();
    				cookie = cookie.trim();
    				hostnm = hostnm.trim();
    				var data= {
    					'username':username,'password':password,'env':env,'cookie':cookie,'hostnm':hostnm
    				}
    				console.log(data)
    				var stringData=JSON.stringify(data);
    				var querydData = Object.keys(data).map(key => key + '=' + data[key]).join('&');
    				var ajax=null;
    				if(window.XMLHttpRequest) {
    					ajax=new XMLHttpRequest();
    				}else {
    					ajax=new ActiveXObject("Microsoft.XMLHTTP");
    				}
    				var posturl = "http://测试域名/api/upcookie";
    				if(env == 2){
    					posturl = "https://正式域名/api/upcookie"
    				}
    			    ajax.open("POST",posturl,true);
    				// ajax.open("GET",posturl+'?'+querydData,true);
    				ajax.onreadystatechange=function () {
    					if(ajax.readyState==4){
    						if(ajax.status==200){
    							var demo=ajax.responseText;
    							var demojson = JSON.parse(demo); 
    							if(demojson.success){
    								alert("上传成功")
    							}else{
    								alert(demojson.msg)
    							}
    						}else{
    							alert("服务器繁忙,请稍后重试")
    						}
    					};
    				}
    				ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    				ajax.send(querydData);
    			}
    		}
    	);
    })

四 效果演示

五 补充说明

  • 需要填写用户名密码的意义在于服务安全,防止拓展被乱用,我可以在api的后台随时配置随时删除。当然你使用jwt或更高级的更好。
  • cookie是有几级域名限制的,我们经常涉及到sso的场景,一般用类似于baidu.com来抓去baidu的cookie,而非fanyi.baidu.com。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/460869.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

UE4架构初识(七)

目录 UE4仿真引擎学习 一、架构基础总结 1. 游戏世界 2. 数据和逻辑 3. 整体类图 UE4仿真引擎学习 一、架构基础总结 1. 游戏世界 在UE的眼里&#xff0c;游戏世界的万物皆Actor&#xff0c;Actor再通过Component组装功能。Actor又通过UChildActorComponent实现Actor之间的…

代码随想录之贪心合集

455 分发饼干 先排序之后按顺序比较 class Solution {public int findContentChildren(int[] g, int[] s) {//57Arrays.sort(g);Arrays.sort(s);int k0;int i0;int count0;while(k<s.length&&i<g.length){if(g[i]<s[k]){count;i;k;}else k;}return count;} }…

视频大文件传输的演变:从“卷轴男孩”到自动化

200年前&#xff0c;从纽约市到英国伦敦的单程旅行需要乘坐一艘跨大西洋轮船将近三周——如果你能负担得起的话&#xff0c;那就是。那些不能在满是汗水、狭窄的帆船上安顿大约一个半月的人。 今天&#xff0c;视频专业人士能够在几小时甚至几分钟内跨越相同的物理距离传输大量…

烟雾弹?突然转变?如何看待微软发声:中国是主要的对手

是的&#xff0c;我又回来了&#xff0c;今天要跟各位唠的还是ChatGPT的嗑。今天的新闻是啥呢&#xff1f; 《微软总裁&#xff1a;中国将是 ChatGPT 的主要对手&#xff0c;我们的优势不大》 说实话&#xff0c;我看到这个新闻的时候&#xff0c;大感震撼&#xff0c;在相关报…

YOLOv5快速入门demo

文章目录 1. 官网下载 yolo_master2. 下载得到yolov5-maser.zip 对其进行解压3. 安装所需要的包4. 官网下载一个与训练模型5. 测试一个小demo 使用detect.py6. 训练一个模型 1. 官网下载 yolo_master https://gitcode.net/mirrors/ultralytics/yolov5 下载克隆 2. 下载得到…

HART协议数据格式避坑(C语言压缩字符串Packed-ASCII和ASCII转换)

HART协议数据格式避坑&#xff08;C语言压缩字符串Packed-ASCII和ASCII转换&#xff09; 首先HART数据格式如下&#xff1a; 重点就是浮点数和字符串类型 Latin-1就不说了 基本用不到 浮点数 浮点数里面 如 0x40 80 00 00表示4.0f 在HART协议里面 浮点数是按大端格式发送的…

oracle 18c dataguard 从库scn 不更新BUG

Bug 29056767 - STANDBY: Datafiles Checkpoint not Updated at Standby Database when Media Recover is running (Doc ID 29056767.8)正在上传…重新上传取消To Bottom Bug 29056767 STANDBY: Datafiles Checkpoint not Updated at Standby Database when Media Recover i…

IPEmotion控制模块-PID循环应用

IPEmotion专业版、开发版支持控制模块&#xff0c;并且该模块支持函数发生器、PID控制器、路由器、序列控制和序列控制块以及参考曲线生成器。本文主要针对PID&#xff08;P&#xff1a;Proportional control 比例控制&#xff1b;I&#xff1a;Integral control 积分控制&…

Linux tail 命令

前言 Linux 实时查看日志文件&#xff0c;最主要使用的就是tail命令。 linux tail命令用于显示文件尾部的内容&#xff0c;默认在屏幕上显示指定文件的末尾10行。如果给定的文件不止一个&#xff0c;则在显示的每个文件前面加一个文件名标题。如果没有指定文件或者文件名为“-”…

同步辐射全散射PDF分析:探究材料结构的新方法

同步辐射全散射PDF&#xff08;Pair Distribution Function&#xff09;分析是一种非常强大的物质结构研究方法。它通过同步辐射技术&#xff0c;将X射线或中子散射的数据进行处理&#xff0c;得到物质的原子间距分布函数&#xff0c;从而揭示物质的微观结构信息。该方法已经在…

Vue3上传(Upload)

可自定义设置以下属性&#xff1a; 接受上传的文件类型&#xff08;accept&#xff09;&#xff0c;类型&#xff1a;string&#xff0c;默认 *&#xff0c;&#xff0c;与<input type"file">的accept属性一致&#xff0c;详见 https://developer.mozilla.org/…

数据结构与算法(五):算法专项 Hash、BitMap、Set、布隆过滤器、中文分词、Lucene 倒排索引

算法专项 Hash、BitMap、Set、布隆过滤器、中文分词、Lucene 倒排索引 Hash 思考&#xff1a; 给你N&#xff08;1<N<10&#xff09;个自然数,每个数的范围为&#xff08;1~100&#xff09;。现在让你以最快的速度判断某一个数是否在这N个数内&#xff0c;不得使用已经…

Ubuntu20.04+安装MySQL8+ 并设置忽略表名大小写

更新apt apt -y update安装mysql-server apt -y install mysql-server查看服务是否启动 ps -ef | grep mysql如下图启动成功 或者 systemctl status mysql设置root登录密码 执行命令&#xff1a; mysql -uroot选择数据库&#xff1a; use mysql;修改密码&#xff1a; a…

0602基础使用(一)-react路由-react

文章目录 1 基本使用1.1 安装js库1.2 使用示例1.3 总结 2 路由组件与一般组件2.1 路由组件2.2 路由组件与普通组件示例2.3 总结 3 NavLink组件3.1 NavLink 简介3.2 NavLink实现高亮与自定义样式 结语 1 基本使用 1.1 安装js库 react-router-dom&#xff0c;react的一个插件库…

flink on k8s提交任务

目录 相关文档前置准备构建镜像提交任务 相关文档 https://nightlies.apache.org/flink/flink-docs-release-1.13/docs/deployment/resource-providers/native_kubernetes/ 前置准备 flink的lib目录下放入两个依赖 bcpkix-jdk15on-1.68.jar bcprov-jdk15on-1.69.jar 创建用户…

Vue过滤器的基本使用

过滤器 功能&#xff1a;对要显示的数据进行特定格式化后再显示 注意&#xff1a;并没有改变原本的数据&#xff0c;是产生新的对应的数据 声明&#xff1a;过滤器不是必须要用到的东西&#xff0c;而是vue提供处理数据的方式而已&#xff0c;想用就用&#xff0c;不想用可以…

Elasticsearch 实战篇 | 黑马旅游

一、酒店搜索和分页 需求&#xff1a;实现黑马旅游的酒店搜索功能&#xff0c;完成关键字搜索和分页 1、定义实体类&#xff0c;接收前端的参数 如果当搜索条件为空的时候&#xff0c;就返回全部数据&#xff0c;不为空才按照key来搜索 二、条件过滤 修改实体类&#xff0c;…

边缘计算开源项目解读-kubeedge metamanager实现

0 背景 笔者在前面的几篇文章从设备管理和运维的角度解读了kubeedge的相关代码流程和架构。本文将切入kubeedge edgecore的另一个核心业务&#xff0c;即边云协同处理设备元数据相关代码的解读。如果说前面的设备管理和运维并不能体现kubeedge作为边缘计算数据处理平台的特点&a…

【Andoroid】之【APK瘦身】

一、如何查看 APK 的组成 如果要优化 APK 的大小&#xff0c;我们首先需要知道我们编译出来的 APK 都包含哪些东西&#xff0c;然后针对占用大的做裁剪&#xff0c;或者删除不需要的东西&#xff0c;从而达到瘦身的目的。 查看 APK 的内容占用情况很简单&#xff0c;打开 AS …

进程间通信,有名管道(pipe)与无名管道(fifo)的解析与运用,以及代码实现

&#x1f38a;【进程通信与并发】专题正在持续更新中&#xff0c;进程&#xff0c;线程&#xff0c;IPC&#xff0c;线程池等的创建原理与运用✨&#xff0c;欢迎大家前往订阅本专题&#xff0c;获取更多详细信息哦&#x1f38f;&#x1f38f;&#x1f38f; &#x1fa94;本系列…