Chrome 浏览器插件 cookies API 解析

Chrome.cookie

前端开发肯定少不了和 cookie 打交道,此文较详细的介绍下 chrome.cookieAPI 以及在 popup、service worker、content 中如何获取的

一、权限(Permissions)

如果需使用 Cookie API,需要在 manifest.json 文件中添加权限(Permissions)和主机权限(host_permissions)字段

json 复制代码
"permissions": [    
    "cookies"
],
"host_permissions": [
    "https://*.lkcoffee.com/*"
]

比如,我需要获取 domain.lkcoffee.comcookie,就需要在 host_permissions 中进行 host 的配置

二、类型(Types

表示关于 HTTP Cookie 的信息。

属性
  • domain: string
    • cookiedomain
  • expirationDate: number 可选
    • Cookie 的有效期
  • hostOnly: boolean
    • host-only 时为 true
  • httpOnly: boolean
    • httpOnly 时为 true
  • name: string
    • 名称
  • partitionKey: CookiePartitionKey 可选
    • 用于通过分区属性读取或修改 Cookie 的分区键。
  • path: string
    • 路径
  • sameSite: SameSiteStatus
    • 同网站状态。
  • secure: boolean
    • Secure
  • session: booean
    • 是否是会话
  • storeId: string
    • 包含此 CookieCookie 存储区的 ID,如 getAllCookieStores() 中所提供。
  • value: string
    • cookie

2. CookieDetails

用于标识 Cookie 的详细信息。

属性
  • name: string
    • 要访问的 Cookie 的名称。
  • partitionKey: CookiePartitionKey 可选
    • 用于通过分区属性读取或修改 Cookie 的分区键。
  • storeId: string 可选
    • 要在其中查找 CookieCookie 存储区的 ID
  • url: string
    • 与要访问的 Cookie 相关联的网址。

3. CookiePartitionKey

表示分区 Cookie 的分区键。

属性
  • topLevelSite: string 可选
    • 提供分区 Cookietop-level

4. CookieStore

表示浏览器中的 Cookie 存储

属性
  • id: string
    • Cookie 存储区的唯一标识符。
  • tabIds: number[]
    • 共享此 Cookie 存储区的所有浏览器标签页的标识符。

5. OnChangedCause

Cookie 发生更改的根本原因。
如果 Cookie 已插入或通过显式调用 chrome.cookies.remove 被移除,为 explicit。如果 Cookie 是因过期而自动移除的,为 expired。如果 Cookie 因被已过期的失效日期覆盖而被移除,为 expired_overwrite。如果 Cookie 因垃圾回收而自动移除,为 evicted。如果 Cookieset 调用覆盖而自动移除,为 overwrite

枚举
  • evicted
  • expired
  • explicit
  • expired_overwrite
  • overwrite

6. SameSiteStatus

CookieSameSite 状态。
no_restrictionSameSite=NonelaxSameSite=LaxstrictSameSite=Strictunspecified 为没有设置 SameSite 属性的 Cookie

枚举
  • no_restrictionSameSite=None
  • laxSameSite=Lax
  • strictSameSite=Strict
  • unspecified:没有设置 SameSite

三、方法(Methods

1. get()

检索单个 Cookie 的相关信息。如果指定网址存在多个同名的 Cookie,则返回路径最长的 Cookie。对于具有相同路径长度的 Cookie,系统将返回创建时间最早的 Cookie

1.1 示例
ts 复制代码
chrome.cookies.get(
  details:
  CookieDetails,
  callback?:
  function,
)
1.2 参数
  • details: CookieDetails
  • callback: function 可选
    • (cookie?: Cookie)=>void
1.3 返回
  • Promise<Cookie|undefined>

2. getAll()

从单个 Cookie 存储区中检索符合指定信息的所有 Cookie。返回的 Cookie 将进行排序,路径最长的 Cookie 排在最前面。如果多个 Cookie 具有相同的路径长度,创建时间最早的 Cookie 会排在最前面。此方法仅检索扩展程序拥有主机权限的网域的 Cookie。

2.1 示例
ts 复制代码
chrome.cookies.getAll(
  details:
  object,
  callback?:
  function,
)
2.2 参数
  • details: object
    • domain: string 可选
    • name: string 可选
    • partitionKey: CookiePartitionKey 可选
      • 用于通过分区属性读取或修改 Cookie 的分区键。
    • path: string 可选
    • secure: boolean 可选
    • session: boolean 可选
    • storeId: string 可选
    • url: string 可选
  • callback: function 可选
    • (cookies:Cookie[])=>void
2.3 返回
  • Promise<Cookie[]>

3. getAllCookieStores()

列出所有现有的 Cookie 存储。

3.1 示例
ts 复制代码
chrome.cookies.getAllCookieStores(
  callback?:
  function,
)
3.2参数
  • callback: function 可选
    • (cookieStores: CookieStore[])=>void
3.3 返回
  • Promise<CookieStore[]>

4. remove()

按名称删除 Cookie。

4.1 示例
ts 复制代码
chrome.cookies.remove(
  details:
  CookieDetails,
  callback?:
  function,
)
4.2 参数
  • details: CookieDetails
    • name: string
    • partitionKey: CookiePartitionKey 可选
      • 用于通过分区属性读取或修改 Cookie 的分区键。
    • storeId: string
    • url: string
  • callback: function 可选
    • (details?:object)=>void
4.3 返回
  • Promise<object|undefined>

5. set()

使用指定的 Cookie 数据设置 Cookie;可能会覆盖等效的 Cookie(如果存在)。

5.1 示例
ts 复制代码
chrome.cookies.set(
  details:
  object,
  callback?:
  function,
)
5.2 参数
  • details: object
    • domain: string 可选
      • cookiedomain
    • expirationDate: number 可选
      • Cookie 的有效期
    • httpOnly: boolean 可选
      • httpOnly 时为 true
    • name: string 可选
      • 名称
    • partitionKey: CookiePartitionKey 可选
      • 用于通过分区属性读取或修改 Cookie 的分区键。
    • path: string 可选
      • 路径
    • sameSite: SameSiteStatus 可选
      • 同网站状态。
    • secure: boolean 可选
      • Secure
    • storeId: string 可选
      • 包含此 CookieCookie 存储区的 ID,如 getAllCookieStores() 中所提供。
    • url: string
    • value: string 可选
      • cookie
  • callback: function 可选
    • (cookie?:Cookie)=>void
5.3返回
  • Promise<Cookie|undefined>
typescript 复制代码
// 根据 domain 获取
const cookies = await chrome.cookies.getAll({ domain:  '.lkcoffee.com'})
console.log('popup cookies--->', cookies)
// 根据 url 获取
const urlCookies = await chrome.cookies.getAll({ url: url })
console.log("popup urlCookies", urlCookies);

五、Background Service Worker 模块获取 Cookies

typescript 复制代码
const cookies = await chrome.cookies.getAll({ domain:  '.lkcoffee.com'})
console.log('service worker cookies--->', cookies)

六、Content Scripts 模块获取 Cookies

因为 Content Scripts 是注入当前页面的,所以和 web 一样获取即可

ts 复制代码
document.cookie
相关推荐
云飞云共享云桌面19 分钟前
8位机械工程师如何共享一台图形工作站算力?
linux·服务器·网络
逐·風21 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
守城小轩2 小时前
Chromium127编译指南 Mac篇(五)- 编译Chromium
chrome·chrome devtools·指纹浏览器·浏览器开发
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
音徽编程2 小时前
Rust异步运行时框架tokio保姆级教程
开发语言·网络·rust
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
幺零九零零4 小时前
【C++】socket套接字编程
linux·服务器·网络·c++