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

这篇具有很好参考价值的文章主要介绍了【谷歌插件开发】获取当前网站COOKIE并上报HTTP-API。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一 背景

由于本人每天需要登录网站查看数据并分析统计汇总,而每次机械式地搜索和简单计算,十分繁琐。我们可以写个定时任务,每天根据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;
    }
    

     文章来源地址https://www.toymoban.com/news/detail-425065.html

  • 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。

到了这里,关于【谷歌插件开发】获取当前网站COOKIE并上报HTTP-API的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端开发调试技巧:如何在Component下选中当前插件并且查看当前插件信息

    在react开发项目中,在Component下选中组件,然后在控制台输$r 按回车键即可输出该组件信息。例如 $r.props输出该组件的props参数。例子详情见如下截图

    2024年02月07日
    浏览(41)
  • 谷歌插件开发:manifest.json 配置文件详解

    在当今的互联网时代,浏览器插件扮演着重要的角色,为用户提供了各种定制化的功能和增强体验。Google Chrome作为最受欢迎的浏览器之一,也提供了丰富的插件生态系统。而在Chrome插件的开发中,manifest.json配置文件起着至关重要的作用。本节将详细讲解manifest.json文件的作用

    2024年02月11日
    浏览(25)
  • 【大模型应用】小白借助chatgpt开发谷歌插件

    大模型正缓慢地渗透进入我们的生活,尽管目前还没有现象级的产品应用,但它已足以让我痴迷于它,我对它能够提升程序员的生产效率笃定无疑。 本次我用一个下午做了一次尝试,使用大模型帮助我开发一个谷歌插件。开发之前,我对谷歌插件的认识仅限于知道如何安装和

    2024年01月17日
    浏览(35)
  • iTab插件谷歌浏览器安装、使用(程序员、开发、设计、摸鱼神器)

     iTab,一个 标签页美化插件 ,安装之后,可以取代浏览器默认的标签页,效果如下。 iTab 最大的特色在于,加入了 iOS 上的小组件的设计,让它在众多标签页美化插件中显得与众不同,而且拖动小组件可以重新调整小组件的位置。集成了各种各样的应用和链接,直接点击就可

    2024年02月04日
    浏览(52)
  • 30个极致实用的谷歌浏览器插件,让你开发事半功倍

    浏览器是开发人员最强大的工具。99% 的人不会 100% 地利用他们的浏览器。这里有 30 个浏览器扩展,如果你能合理充分利用将大大提升你的开发效率。 \\\"WhatFont\\\",是一款帮助用户快速识别网页中字体信息的工具。 当你在浏览网页时,如果看到了一款你喜欢的字体,但不知道具

    2024年02月02日
    浏览(39)
  • uniapp开发小程序解析经纬度获取当前位置信息(高德地图三)

    选择了高德地图定位 高德地图官网 小程序步骤如下:      1.首先创建应用       2.点击增添key按钮申请小程序key         3.然后下载它的微信小程序版 SDK:微信小程序 SDK         4.把下载的sdk放在公共的文件里,这里我放在了utils文件目录下          5.使用页面导入此

    2024年02月02日
    浏览(41)
  • uniapp开发小程序解析经纬度获取当前位置信息(腾讯地图二)

    选择了腾讯地图定位 腾讯地图官网 具体实践步骤如下: 申请开发者密钥 申请密钥key 开通webserviceAPI服务 下载小程序SDK 腾讯地图小程序文档sdk 微信后台配置请求request域名 小程序管理后台 详细步骤 1. 下载解压后的 qqmap-wx-jssdk.js文件放到项目中,然后在页面引入使用 [ uni-app中

    2024年02月15日
    浏览(43)
  • php开发实战分析(2):cookie的动态使用(设置、获取、删除、猜你喜欢原理、购物车调用)

    在 PHP 中,cookie 是一种用于在客户端(浏览器)和服务器之间存储数据的一种机制。 它们通常用于跟踪和识别用户,并存储用户的偏好设置。下面是一些常见的用法和函数来操作 cookie。 可以使用 setcookie() 函数来设置 cookie。该函数有多个参数,其中最重要的是名称和值。下

    2024年02月15日
    浏览(40)
  • el-tree使用获取当前选中节点的父节点数据(开发记录)

    官网上有两种办法: 根据 data 或者 key 拿到 Tree 组件中的 node (data) 要获得 node 的 key 或者 data。 我这key设置后没有生效,采用的node获取的方法 1、html部分 2、data举例 el-tree提供的回调事件:@node-click=“handleNodeClick”。(方法名自取,这里用的原来的“handleNodeClick”) 其他:①

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包