浏览器扩展V3开发系列之 chrome.cookies 的用法和案例

【作者主页】：小鱼神1024

【擅长领域】：JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等

chrome.cookies API能够让我们在扩展程序中去操作浏览器的cookies。

在使用 chrome.cookies 要先声明 cookies 权限，并设置 host_permissions 主机权限，如下：

{"manifest_version": 3,"name": "chrome.cookies","description": "chrome.cookies API 基础用法","version": "1.0","action": {"default_popup": "popup.html","default_icon": "icons/icon128.png"},"host_permissions": ["<all_urls>"],"permissions": ["cookies"]
}

这里 host_permissions 设置了 “<all_urls>”，表示扩展对所有的网站都有访问权限，也可以指定某个网站。比如：

"host_permissions": ["*://*.google.com/"
],

以千图网网站为例，来分析 chrome.cookies 用法
首先，先编写 pupup.html 文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>chrome.cookies</title><script src="popup.js"></script><style>body {width: 200px;}button {width: 100px;}.cookie_container {display: flex;flex-direction: column;gap: 10px;}</style>
</head><body><p>千图网cookies操作</p><div class="cookie_container"><button class="get_qt_type">获取qt_type cookie</button></div>
</body></html>

然后，再编写需要引入的 popup.js 文件：

1、chrome.cookies.get

如果我们想获取指定网站下的指定cookie信息，可以通过 chrome.cookies.get 来实现，如下：

document.addEventListener('DOMContentLoaded', () => {// 获取指定cookieconst get_qt_type_element = document.querySelector(".get_qt_type")if (get_qt_type_element) {get_qt_type_element.addEventListener("click", function () {chrome.cookies.get({url: "https://www.58pic.com/",name: "qt_type"}, function (cookie) {console.log(cookie);})})}
})

点击“获取qt_type cookie”按钮之后，打印如下：

2、chrome.cookies.getAll

如果我们想获取指定网站下全部 cookies , 可以使用 chrome.cookies.getAll 来实现
将 pupup.html 增加 “获取全部 cookies”按钮，如下：

<button class="get_all_cookies">获取全部 cookies</button>

同时在 pupup.js 中追加的监听事件，如下：

    // 获取所有cookieconst get_all_cookies_element = document.querySelector(".get_all_cookies")if (get_all_cookies_element) {get_all_cookies_element.addEventListener("click", function () {chrome.cookies.getAll({domain: "58pic.com"}, function (cookies) {console.log(cookies);})})}

刷新扩展后，点击按钮，打印如下：

这样就拿到该网站下的所有 cookies 了。

3、chrome.cookies.set

如果我们想给指定网站设置 cookie , 可以使用 chrome.cookies.set 来实现

将 popup.html 中增加 “设置 cookie”按钮，代码如下：

<button class="set_cookie">设置 cookie</button>

然后，在 pupup.js 追加其点击事件，如下：

    // 设置指定 cookieconst set_cookie_element = document.querySelector(".set_cookie")if (set_cookie_element) {set_cookie_element.addEventListener("click", function () {chrome.cookies.set({url: "https://www.58pic.com/",name: "cookie_test_name",value: "我是被手动设置的cookie",domain: ".58pic.com",path: "/",secure: false,httpOnly: false,expirationDate: (new Date()).getTime() / 1000 + 3600})})}

点击“设置 cookie”按钮后，刷新 cookie ，可以看到cookie被设置成功了。

4、chrome.cookies.remove

如果我们想移除指定网站下的指定 cookie , 可以使用 chrome.cookies.remove 来实现

在 popup.js 中添加 “移除 cookie” 按钮，如下：

<button class="remove_cookie">移除 cookie</button>

然后，在 popup.js 中追加其点击事件：

    // 移除指定 cookieconst remove_cookie_element = document.querySelector(".remove_cookie")if (remove_cookie_element) {remove_cookie_element.addEventListener("click", function () {chrome.cookies.remove({url: "https://www.58pic.com/",name: "cookie_test_name",})})}