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

  • 【谷歌插件开发】获取当前网站COOKIE并上报HTTP-API已关闭评论
  • 99 次浏览
  • A+
所属分类:Web前端
摘要

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


一 背景

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

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

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

二 代码总目录

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

三 上代码

  • 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); 			} 		} 	); })

四 效果演示

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

 

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

 

五 补充说明

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