【chrome插件】获取浏览器cookie
一个显示浏览器 Cookie 的 Chrome 插件
源码地址：https://gitee.com/lineuman/lcs_ext_demos
在本文中，我们将一步一步地创建一个 Chrome 插件，用于获取浏览器中当前页面及其父级域名的所有 Cookie，并在弹出窗口中显示出来。
前言
Chrome 插件（扩展程序）是一种强大的工具，可以提升浏览器的功能。当你想要获取网页的 Cookie 信息时，自制一个简单的插件可能会比使用第三方工具更方便。即使你是一个新手，只要按照以下步骤，你也能轻松完成。
准备工作
在开始之前，请确保你已经具备以下条件：
- 安装了最新版的 Google Chrome 浏览器。
- 对 HTML、CSS 和 JavaScript 有基本的了解。
- 当然了，即使完全不懂也没有关系。
步骤概览
- 创建项目文件夹。
- 编写
manifest.json文件。 - 创建弹出页面
popup.html。 - 编写获取和显示 Cookie 的脚本
popup.js。 - 将插件加载到 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
加载插件
- 打开 Chrome 浏览器，在地址栏输入
chrome://extensions/，进入扩展程序管理页面。 - 打开页面右上角的“开发者模式”开关。
- 点击左上角的“加载已解压的扩展程序”按钮。
- 在弹出的文件选择窗口中，找到并选择你的
cookie-viewer文件夹，然后点击“选择文件夹”。 - 如果一切正常，你的插件将出现在扩展程序列表中，并在浏览器的工具栏上显示一个插件图标。
6. 测试插件
- 打开一个你想要测试的网站，例如
https://www.example.com。 - 点击浏览器工具栏上的插件图标。
- 在弹出的窗口中，你应该能够看到该网站及其父级域名的所有 Cookie 信息。
注意：
- 只能获取当前页面所属域名及其父级域名的 Cookie，无法获取其他网站的 Cookie。
结语
恭喜你！你已经成功创建了一个可以获取并显示当前页面及其父级域名的 Cookie 的 Chrome 插件。
希望这篇教程能帮助到你，让你对 Chrome 插件的开发有了更深入的了解，如果确实帮到了你，可以关注一下，不迷路。
参考资料
感谢你的阅读！如果你有任何疑问或建议，欢迎在下方留言。
powerd by o1 and me
如果你对chrome插件感兴趣，也可以看看我的其他插件demo, best wishes for you~
https://gitee.com/lineuman/lcs_ext_demos
