开发Chrome插件获取当前页面Cookie

前言

看《重来》的时候有提到，把自己的需求做成产品，给更多人提供价值。
就是本篇的文章的由来。

我的需求场景，因为要用postman测公司开发的接口，公司接口通过cookie做鉴权，
所以我每次都要f12，然后从Network面板手工复制出来，对于技术来讲，一定要注意一个事情手工做三遍以上的时候，要思考去提效。三次以上的代码重构方法，三次以上的手工操作脚本自动化，所以我就想做一个Chrome插件，来获取当前的页面Cookie。
我希望这一篇文章不仅仅是一个照着copy的教程，这里一步步从构思到实现以及完善的过程展现。

首先看一遍官网教程，不要看别人的二手资料，包括我的，能直接吃官网的一手资料的现在关掉文章即可。如果理解还有一点困难，那就顺着往下看。

资料

官网开发文档如下
https://developer.chrome.com/docs/extensions?hl=zh-cn
Hello World示例如下
https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=zh-cn

效果是单机插件按钮，弹出一个端面
Pasted image 20231230210748

分析HelloWorld示例

四个文件，分别是一个html,一个json，一个js，和一个png格式的图片

看来插件开发不需要很多的技术储备，会js就够了，很开心不需要补课了。不过哪怕你不会也没关系，有其他语言的底子，js读懂还是不困难的。

文件内容不多。这里直接全部贴出来、

manifest.json

此 JSON 文件描述了扩展程序的功能和配置。也是插件最关键的文件，目录结构更为复杂的小程序，此文件必须位于根目录下。类似于安卓的注册文件，小程序的注册表之类的职能。

{
  "name": "Hello Extensions",// 插件名
  "description": "Base Level Extension", //说明
  "version": "1.0",// 插件的版本
  "manifest_version": 3, // chrome扩展文件的发行版本，类似vue2 还是vue3的声明
  "action": {
  // 声明 Chrome 应用作扩展程序的操作图标的图片，以及当用户点击扩展程序的操作图标时在弹出式窗口中显示的 HTML 页面。
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

hello.html

插件的端面，前面介绍中有截图

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

可以看到，这里就是端面展示的Hello Extensions这句话，然后引入了一个js文件。

  • 注意不可以直接用script标签写，会报错。

popup.js

console.log('This is a popup!');

打印一行日志，是这个效果。

从本地加载扩展程序

Pasted image 20231230213318

可以看到已经加载成功了，图标正是最后一个图片文件hello_extensions.png
Pasted image 20231230213426

单机Hi图标，在Pasted image 20231230210748
右键选检查，会再跳出来一个窗口，这个窗口用于调试插件。
Pasted image 20231230213909

从本例子基本可以了解到一个插件的执行流程，
manifest注册插件的信息，然后链接到端面，端面引入了js用于逻辑控制。

开发设计

万事谋而后动，想清楚再写代码就是填空题。
已经明白示例的逻辑了，接下来思考如何实现我期望的功能。
1.获取页面的cookie
2.先打印cookie到端面(控制台要每次审查再进去看，没端面那么方便)
3.把打印内容复制进剪切板
4.确认能够复制以后，整理cookie的格式，使cookie文本可以直接复制进postman使用。

获取页面的cookie

首先看api文档
https://developer.chrome.com/docs/extensions/reference/api/cookies?hl=zh-cn

1.先给注册操做cookie的权限 manifest

{
  "name": "Hello Extensions",
  "description": "Base Level Extension", 
  "version": "1.0",
  "manifest_version": 3, 
    // 新增如下
  "permissions": [
    "cookies"
  ],
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

2.尝试把cookie带到端面 hello.html

<html>
  <body>
    <h1>Get Page Cookies</h1>
    <input type="text" id="url" placeholder="Enter URL">
    <button id="get-cookies">Get Cookies</button>
    <div id="cookie-list"></div>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function() {
  var getButton = document.getElementById('get-cookies');
  var cookieList = document.getElementById('cookie-list');

  getButton.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var url = tabs[0].url;
      chrome.cookies.getAll({url: url}, function(cookies) {
        cookieList.innerHTML = '';
        let cookiesText = '';
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i];
          var li = document.createElement('li');
          li.textContent = cookie.name + '=' + cookie.value;
          cookieList.appendChild(li);
          cookiesText += li.textContent + '; ';
        }
      });
    });
  });
});

Pasted image 20231230220712

点击看执行效果
可以观察到，已经能把cookie带到端面了
Pasted image 20231230222639

3.把打印内容复制进剪切板

document.addEventListener('DOMContentLoaded', function() {
  var getButton = document.getElementById('get-cookies');
  var cookieList = document.getElementById('cookie-list');

  getButton.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var url = tabs[0].url;
      chrome.cookies.getAll({url: url}, function(cookies) {
        cookieList.innerHTML = '';
        let cookiesText = '';
        // 调整格式
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i];
          var li = document.createElement('li');
          li.textContent = cookie.name + '=' + cookie.value;
          cookieList.appendChild(li);
          cookiesText += li.textContent + '; ';
        }
        // 将获取到的 cookie 复制到剪切板
        navigator.clipboard.writeText(cookiesText).then(function() {
          console.log('Cookies copied to clipboard.');
        }, function(err) {
          console.error('Could not copy cookies to clipboard: ', err);
        });
      });
    });
  });
});

重新刷新插件测试
Pasted image 20231230224053

4.确认能够复制以后，整理cookie的格式，使cookie文本可以直接复制进postman使用。(合在上一步一起做了)

完善

1.加个图标
2.复制成功给个弹窗提示
3.端面完善

图标

{
  "manifest_version": 3,
  "name": "Cookie Tool",
  "version": "0.0.1",
  ...省略
  "action": {
    "default_title": "Get Current Page Cookies",// 鼠标移动到插件上提示内容
    "default_popup": "hello.html",
    "default_icon": "icon.png"// 自制的图标
  }
}

icon.png等文件放在同目录下
随便用个在线生成，调整成合适的像素尺寸即可

弹窗提示

<html>
  <head>
    <title>Get Current Page Cookies</title>
    <meta charset="UTF-8">
    <script src="popup.js"></script>
    <style>
    ... 省略
      #toast {
      ... 省略
        white-space: nowrap; /* 添加此行以保持 toast 文本在一行显示 */
      }
    </style>
  </head>
  <body>
    <ul>
      <li id="get-cookies">Get Cookies</li>
    </ul>
    <ul>
      <li id="get-other">Todo</li>
    </ul>
    <div id="toast"></div>
  </body>
</html>

源码

Pasted image 20231230233809

GitHub

https://github.com/wenterwang/CookieTool

manifest.json

{
  "manifest_version": 3,
  "name": "Cookie Tool",
  "version": "0.0.1",
  "author": "wenterwang",
  "permissions": [
    "cookies"
  ],
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "action": {
    "default_title": "Get Current Page Cookies",
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

hello.html

插件的端面，前面介绍中有截图

<html>
  <head>
    <title>Get Current Page Cookies</title>
    <meta charset="UTF-8">
    <script src="popup.js"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        min-width: 200px;
      }
      ul {
        list-style: none;
        padding: 0;
      }
      li {
        padding: 10px;
        border-bottom: 1px solid #ddd;
      }
      li:last-child {
        border-bottom: none;
      }
      #toast {
        display: none;
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        white-space: nowrap; /* 添加此行以保持 toast 文本在一行显示 */
      }
    </style>
  </head>
  <body>
    <ul>
      <li id="get-cookies">Get Cookies</li>
    </ul>
    <ul>
      <li id="get-other">Todo</li>
    </ul>
    <div id="toast"></div>
  </body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function() {
  var getButton = document.getElementById('get-cookies');
  var toast = document.getElementById('toast');

  function showToast(message) {
    toast.textContent = message;
    toast.style.display = 'block';
    setTimeout(function() {
      toast.style.display = 'none';
    }, 2000);
  }

  getButton.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var url = tabs[0].url;
      chrome.cookies.getAll({url: url}, function(cookies) {
        let cookiesText = '';
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i];
          cookiesText += cookie.name + '=' + cookie.value + (i < cookies.length - 1 ? '; ' : '');
        }
        // 将获取到的 cookie 复制到剪切板
        navigator.clipboard.writeText(cookiesText).then(function() {
          showToast('Cookies copied to clipboard.');
        }, function(err) {
          console.error('Could not copy cookies to clipboard: ', err);
          showToast('Failed to copy cookies to clipboard.');
        });
      });
    });
  });
});

发布至Google Store

https://developer.chrome.com/docs/webstore/publish?hl=zh-cn

其他示例

chrome扩展示例
https://github.com/GoogleChrome/chrome-extensions-samples

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

go slice源码探索（切片、copy、扩容）和go编译源码分析

go slice源码探索（切片、copy、扩容）和go编译源码分析

文章目录 概要一、数据结构二、初始化2.1、字面量2.2、下标截取2.2.1、截取原理 2.3、make关键字2.3.1、编译时 三、复制3.1、copy源码 四、扩容4.1、append源码 五&#xff1a;切片的GC六&#xff1a;切片使用注意事项七&#xff1a;参考 概要 Go语言的切片&#xff08;slice…
阅读更多...
算法(3)——二分查找

算法(3)——二分查找

一、什么是二分查找 二分查找也称折半查找&#xff0c;是在一组有序(升序/降序)的数据中查找一个元素&#xff0c;它是一种效率较高的查找方法。 二、二分查找的原理 1、查找的目标数据元素必须是有序的。没有顺序的数据&#xff0c;二分法就失去意义。 2、数据元素通常是数值…
阅读更多...
Linux调试工具—gdb

Linux调试工具—gdb

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;HEART BEAT—YOASOBI 2:20━━━━━━️&#x1f49f;──────── 5:35 &#x1f504; ◀️ ⏸ ▶️ ☰ …
阅读更多...
基于grpc从零开始搭建一个准生产分布式应用(9) - Service业务逻辑层实现

基于grpc从零开始搭建一个准生产分布式应用(9) - Service业务逻辑层实现

开始前必读&#xff1a;​​基于grpc从零开始搭建一个准生产分布式应用(0) - quickStart​​ 前面章节的GRPC内基本是一个空实现&#xff0c;本章就实现下service业务逻辑层代码&#xff0c;因例子比较简单代码量也不算大&#xff0c;本章代码任务&#xff1a;1、用spring实现…
阅读更多...
Big-endian与Little-endian详尽说明

Big-endian与Little-endian详尽说明

大端与小端存储详尽说明 大端与小端存储详尽说明 大端与小端存储详尽说明一. 什么是字节序二. 什么是大端存储模式三. 什么是小端存储模式四. 大小端各自的特点五. 为什么会有大小端模式之分六. 为什么要注意大小端问题六. 大小端判定程序七. 大端小端的转换1&#xff09;16位大…
阅读更多...
华清远见作业第十八天——IO（第一天）

华清远见作业第十八天——IO（第一天）

思维导图&#xff1a; 使用fgets统计一个文件的行号 代码&#xff1a; #include<stdio.h> #include<string.h> #include<stdlib.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int main(int argc, const char *a…
阅读更多...
【Java】JUC并发编程（重量锁、轻量锁、偏向锁）

【Java】JUC并发编程（重量锁、轻量锁、偏向锁）

JUC并发编程 预备&#xff1a; 创建一个maven工程&#xff0c;导入lombok和logback的依赖。 1、基础概念 1、进程与线程 **进程&#xff1a;**程序由指令和数据组成&#xff0c;但这些指令要运行&#xff0c;数据要读写&#xff0c;就必须将指令加载至 CPU &#xff0c;数…
阅读更多...
CRM客户关系管理系统

CRM客户关系管理系统

系统开发环境以及版本 操作系统&#xff1a; Windows_7集成开发工具&#xff1a; Eclipse EE_4.7编译环境&#xff1a;JDK_1.8Web服务器&#xff1a;Tomcat_9.0数据库&#xff1a;MySQL_5.7.23 系统框架 spring框架springmvc框架mybatis框架Logback日志框架安全验证框架maven框…
阅读更多...
第7课 利用FFmpeg将摄像头画面与麦克风数据合成后推送到rtmp服务器

第7课 利用FFmpeg将摄像头画面与麦克风数据合成后推送到rtmp服务器

上节课我们已经拿到了摄像头数据和麦克风数据&#xff0c;这节课我们来看一下如何将二者合并起来推送到rtmp服务器。推送音视频合成流到rtmp服务器地址的流程如下&#xff1a; 1.创建输出流 //初始化输出流上下文 avformat_alloc_output_context2(&outFormatCtx, NULL, &…
阅读更多...
Linux学习笔记(一)

Linux学习笔记(一)

如果有自己的物理服务器请先查看这篇文章 文章目录 网卡配置Linux基础指令ls:列出目录内容cd(mkdir.rmkdir): 切换文件夹(创建,删除操作)cp:复制文件或目录mv:文件/文件夹移动cat:查看文件vi:文件查看编辑man:查看命令手册more: 查看文件内容less : 查看文件内容 ps: 显示当前进…
阅读更多...
LangChain（0.0.340）官方文档十一：Agents之Agent Types

LangChain（0.0.340）官方文档十一：Agents之Agent Types

LangChain官网、LangChain官方文档 、langchain Github、langchain API文档、llm-universe《Agent Types》、《Examples using AgentType》 文章目录 一、快速入门1.1 概念1.2 基本示例1.2.1 配置LangSmith1.2.2 使用LCEL语法创建Agents1.2.3 使用自定义runtime执行1.2.4 使用A…
阅读更多...
分布式IO在工业自动化中的应用

分布式IO在工业自动化中的应用

传统的自动化产线及物流系统主要是利用PLC来处理数据&#xff0c;并将这些数据保存在PC当中。但是随着互联网技术的迅速发展&#xff0c;越来越多的系统集成商利用分布式IO模块&#xff0c;实现从控制器到自动化最底层之间的IO通信。 分布式IO在工业自动化中的应用 分布式IO是用…
阅读更多...
【Android】自定义View组件，并实现在 Compose、Kotlin、Xml 中调用

【Android】自定义View组件，并实现在 Compose、Kotlin、Xml 中调用

从事 Android 开发以来&#xff0c;很少有过自定义 View 的相关开发需求&#xff0c;大部分 UI 都是可以集成某些官方组件&#xff0c;在组件的基础上完成能够大大缩短开发时间。但今天我要讲的是&#xff1a;如何使用 Android 开发一个Compose、Xml都可以调用的组件&#xff1…
阅读更多...
[蓝桥 2023] 位乘积计数

[蓝桥 2023] 位乘积计数

问题描述 给定两个正整数 n 和 m&#xff0c;请你计算出&#xff0c;从 1到 n 的所有整数中&#xff0c;满足每一位上的数字乘积小于等于 m 的数字的个数。 例如&#xff0c;当 n12&#xff0c;m3 时&#xff0c;满足条件的数字有 1,2,3,10,11,12 共 6 个。 输入格式 输出格…
阅读更多...
[LLM]大模型训练(二)--DeepSpeed使用

[LLM]大模型训练(二)--DeepSpeed使用

安装DeepSpeed与集成 DeepSpeed可以通过pip安装&#xff0c;无需指定PyTorch和CUDA的版本。DeepSpeed内包含需要自定义的CUDA算子&#xff0c;将通过即时编译的方式在运行时构建。 pip install deepspeed DeepSpeed与HuggingFace Transformers直接集成。使用者可以通过在模型…
阅读更多...
使用WAZUH检测LD_PRELAOD劫持、SQL注入、主动响应防御

使用WAZUH检测LD_PRELAOD劫持、SQL注入、主动响应防御

目录 1、检查后门 使用工具检测后门 1.chkrootkit 2.rkhunter 手动检查文件 检查ld.so.preload文件 2、检测LD_PRELOAD ubuntu配置 wazuh配置 3、检测SQL注入 ubuntu配置 攻击模拟 4、主动响应 wauzh的安装以及设置代理可以参考本篇&#xff1a;WAZUH的安装、设置…
阅读更多...
自行车服务PEDALWAYS 网站bootstrap5模板

自行车服务PEDALWAYS 网站bootstrap5模板

一、需求分析 自行车服务网站的作用是为骑行爱好者和自行车用户提供便捷的信息、工具和服务&#xff0c;以满足他们的需求。以下是一些常见的自行车服务网站的功能&#xff1a; 自行车租赁&#xff1a;提供自行车租赁服务&#xff0c;用户可以在线预订自行车并选择租赁期限&am…
阅读更多...
【Java 数组解析：探索数组的奇妙世界】

【Java 数组解析：探索数组的奇妙世界】

数组的引入 我们先通过一段简单的代码引入数组的概念。 import java.util.Scanner; public class TestArray01{public static void main(String[] args){//功能&#xff1a;键盘录入十个学生的成绩&#xff0c;求和&#xff0c;求平均数&#xff1a;//定义一个求和的变量&…
阅读更多...
C语言与人生：数组交换和二分查找

C语言与人生：数组交换和二分查找

少年们&#xff0c;大家好。我是博主那一脸阳光&#xff0c;今天和分享数组交换和二分查找。 前言&#xff1a;探索C语言中的数组交换操作与二分查找算法 在计算机编程领域&#xff0c;特别是以C语言为代表的低级编程语言中&#xff0c;对数据结构的理解和熟练运用是至关重要的…
阅读更多...
【小白专用】winform启动界面+登录窗口 更新2024.1.1

【小白专用】winform启动界面+登录窗口 更新2024.1.1

需求场景&#xff1a;先展示启动界面&#xff0c;然后打开登录界面&#xff0c;如果登录成功就跳转到主界面 首先在程序的入口路径加载启动界面&#xff0c;使用ShowDialog显示界面&#xff0c; 然后在启动界面中添加定时器&#xff0c;来实现显示一段时间的效果&#xff0c;等…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站