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

燃192

发布于 2024-01-04 16:25:50

2610

发布于 2024-01-04 16:25:50

前言

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

我的需求场景，因为要用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

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

分析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

单机Hi图标，在

右键选检查，会再跳出来一个窗口，这个窗口用于调试插件。

从本例子基本可以了解到一个插件的执行流程， 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带到端面了

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

重新刷新插件测试

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

本文参与?腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-01-01，如有侵权请联系?cloudcommunity@tencent.com 删除

chrome

插件

程序

开发

本文分享自 Java技术圈子微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度