一个显示浏览器 Cookie 的 Chrome 插件

源码地址：https://gitee.com/lineuman/lcs_ext_demos

在本文中，我们将一步一步地创建一个 Chrome 插件，用于获取浏览器中当前页面及其父级域名的所有 Cookie，并在弹出窗口中显示出来。

前言

Chrome 插件（扩展程序）是一种强大的工具，可以提升浏览器的功能。当你想要获取网页的 Cookie 信息时，自制一个简单的插件可能会比使用第三方工具更方便。即使你是一个新手，只要按照以下步骤，你也能轻松完成。

准备工作

在开始之前，请确保你已经具备以下条件：

  • 安装了最新版的 Google Chrome 浏览器。
  • 对 HTML、CSS 和 JavaScript 有基本的了解。
  • 当然了，即使完全不懂也没有关系。

步骤概览

  1. 创建项目文件夹。
  2. 编写 manifest.json 文件。
  3. 创建弹出页面 popup.html。
  4. 编写获取和显示 Cookie 的脚本 popup.js。
  5. 将插件加载到 Chrome 中进行测试。

现在，让我们详细展开每一个步骤。

1. 创建项目文件夹

首先，在你的计算机上创建一个新的文件夹，用于存放插件的所有文件。我们可以将其命名为 cookie-viewer。

cookie-viewer/

2. 编写 manifest.json 文件

manifest.json 是 Chrome 插件的配置文件，定义了插件的基本信息和权限。在项目文件夹中创建一个名为 manifest.json 的文件，内容如下：

{
  "manifest_version": 3,
  "name": "Cookie Viewer",
  "version": "1.0",
  "description": "在弹出窗口中显示当前页面及其父域名的 Cookies。",
  "permissions": ["cookies", "activeTab", "tabs"],
  "host_permissions": ["<all_urls>"],
  "action": {
    "default_popup": "popup.html",
    "default_title": "查看 Cookies"
  }
}

说明：

  • "manifest_version": 3：指定使用 Manifest V3 版本。
  • "permissions"：声明插件需要的权限，包括访问 Cookie 的权限。
  • "host_permissions"：指定插件可以访问哪些 URL，这里设置为所有 URL。
  • "action"：定义了当用户点击插件图标时显示的弹出页面和标题。

3. 创建弹出页面 popup.html

在项目文件夹中创建一个新的文件 popup.html，这是插件的用户界面。添加以下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cookie Viewer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      min-width: 300px;
      padding: 10px;
    }
    .cookie {
      margin-bottom: 10px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
    }
    .cookie-domain {
      font-size: 12px;
      color: #888;
    }
    .cookie-name {
      font-weight: bold;
    }
    .cookie-value {
      word-break: break-all;
    }
  </style>
</head>
<body>
  <h2>浏览器 Cookies</h2>
  <div id="cookie-list">加载中...</div>
  <script src="popup.js"></script>
</body>
</html>

4. 编写 popup.js 脚本

接下来，在项目文件夹中创建 popup.js 文件。我们将数据获取和 DOM 渲染分离，使代码更清晰。

document.addEventListener('DOMContentLoaded', function() {
  const cookieList = document.getElementById('cookie-list');

  // 获取当前活动标签页的 URL
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    let url = tabs[0].url;

    // 从 URL 中提取主机名
    let hostname = (new URL(url)).hostname;

    // 获取所有相关的 Cookie 数据
    getAllCookies(hostname, function(cookies) {
      // 渲染 Cookie 数据到页面
      renderCookies(cookies);
    });
  });

  // 获取当前域名及其父域名的所有 Cookie
  function getAllCookies(hostname, callback) {
    let domainParts = hostname.split('.');
    let cookiesData = [];
    let displayedCookies = {};
    let pendingRequests = 0;
    let domainsToProcess = [];

    // 生成所有可能的父级域名
    for (let i = 0; i <= domainParts.length - 2; i++) {
      let domain = domainParts.slice(i).join('.');
      domainsToProcess.push(domain);
    }

    pendingRequests = domainsToProcess.length;

    domainsToProcess.forEach(function(domain) {
      chrome.cookies.getAll({domain: domain}, function(cookies) {
        cookies.forEach(function(cookie) {
          let cookieKey = cookie.name + "@" + cookie.domain;
          if (!displayedCookies[cookieKey]) {
            displayedCookies[cookieKey] = true;
            cookiesData.push({
              domain: cookie.domain,
              name: cookie.name,
              value: cookie.value
            });
          }
        });
        pendingRequests--;
        if (pendingRequests === 0) {
          callback(cookiesData);
        }
      });
    });
  }

  // 渲染 Cookie 数据到页面
  function renderCookies(cookies) {
    cookieList.innerHTML = '';

    if (cookies.length > 0) {
      cookies.forEach(function(cookie) {
        let cookieDiv = document.createElement('div');
        cookieDiv.className = 'cookie';

        let domainDiv = document.createElement('div');
        domainDiv.className = 'cookie-domain';
        domainDiv.textContent = '域名：' + cookie.domain;

        let nameDiv = document.createElement('div');
        nameDiv.className = 'cookie-name';
        nameDiv.textContent = '名称：' + cookie.name;

        let valueDiv = document.createElement('div');
        valueDiv.className = 'cookie-value';
        valueDiv.textContent = '值：' + cookie.value;

        cookieDiv.appendChild(domainDiv);
        cookieDiv.appendChild(nameDiv);
        cookieDiv.appendChild(valueDiv);

        cookieList.appendChild(cookieDiv);
      });
    } else {
      cookieList.textContent = '此网站没有 Cookie。';
    }
  }
});

代码解析

主流程
  • DOMContentLoaded 事件： 等待页面加载完成后执行。
  • 获取当前标签页的 URL： 使用 chrome.tabs.query 方法获取当前活动标签页的 URL。
  • 提取主机名： 使用 URL 对象从完整的 URL 中提取主机名。
  • 获取所有 Cookie： 调用 getAllCookies 函数，传入主机名和回调函数。

现在，我们已经完成了所有的文件，项目结构如下：

cookie-viewer/
├── manifest.json
├── popup.html
└── popup.js

加载插件

  1. 打开 Chrome 浏览器，在地址栏输入 chrome://extensions/，进入扩展程序管理页面。
  2. 打开页面右上角的“开发者模式”开关。
  3. 点击左上角的“加载已解压的扩展程序”按钮。
  4. 在弹出的文件选择窗口中，找到并选择你的 cookie-viewer 文件夹，然后点击“选择文件夹”。
  5. 如果一切正常，你的插件将出现在扩展程序列表中，并在浏览器的工具栏上显示一个插件图标。

6. 测试插件

  1. 打开一个你想要测试的网站，例如 https://www.example.com。
  2. 点击浏览器工具栏上的插件图标。
  3. 在弹出的窗口中，你应该能够看到该网站及其父级域名的所有 Cookie 信息。

注意：

  • 只能获取当前页面所属域名及其父级域名的 Cookie，无法获取其他网站的 Cookie。

结语

恭喜你！你已经成功创建了一个可以获取并显示当前页面及其父级域名的 Cookie 的 Chrome 插件。

希望这篇教程能帮助到你，让你对 Chrome 插件的开发有了更深入的了解，如果确实帮到了你，可以关注一下，不迷路。

参考资料

感谢你的阅读！如果你有任何疑问或建议，欢迎在下方留言。
powerd by o1 and me

如果你对chrome插件感兴趣，也可以看看我的其他插件demo, best wishes for you~
https://gitee.com/lineuman/lcs_ext_demos

# chrome # 前端
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊