Chrome.cookie

前端開發(fā)肯定少不了和 cookie 打交道，此文較詳細(xì)的介紹下 chrome.cookie 的 API 以及在 popup、service worker、content 中如何獲取的

一、權(quán)限（Permissions）

如果需使用 Cookie API，需要在 manifest.json 文件中添加權(quán)限（Permissions）和主機(jī)權(quán)限（host_permissions）字段

"permissions": [    
    "cookies"
],
"host_permissions": [
    "https://*.lkcoffee.com/*"
]

比如，我需要獲取 domain 為 .lkcoffee.com 的 cookie，就需要在 host_permissions 中進(jìn)行 host 的配置

二、類型（Types）

1. Cookie

表示關(guān)于 HTTP Cookie 的信息。

屬性

• domain: string
  • cookie 的 domain
• expirationDate: number 可選
  • Cookie 的有效期
• hostOnly: boolean
  • host-only 時為 true
• httpOnly: boolean
  • httpOnly 時為 true
• name: string
  • 名稱
• partitionKey: CookiePartitionKey 可選
  • 用于通過分區(qū)屬性讀取或修改 Cookie 的分區(qū)鍵。
• path: string
  • 路徑
• sameSite: SameSiteStatus
  • 同網(wǎng)站狀態(tài)。
• secure: boolean
  • Secure 值
• session: booean
  • 是否是會話
• storeId: string
  • 包含此 Cookie 的 Cookie 存儲區(qū)的 ID，如 getAllCookieStores() 中所提供。
• value: string
  • cookie 值

2. CookieDetails

用于標(biāo)識 Cookie 的詳細(xì)信息。

屬性

• name: string
  • 要訪問的 Cookie 的名稱。
• partitionKey: CookiePartitionKey 可選
  • 用于通過分區(qū)屬性讀取或修改 Cookie 的分區(qū)鍵。
• storeId: string 可選
  • 要在其中查找 Cookie 的 Cookie 存儲區(qū)的 ID
• url: string
  • 與要訪問的 Cookie 相關(guān)聯(lián)的網(wǎng)址。

3. CookiePartitionKey

表示分區(qū) Cookie 的分區(qū)鍵。

屬性

• topLevelSite: string 可選
  • 提供分區(qū) Cookie 的 top-level

4. CookieStore

表示瀏覽器中的 Cookie 存儲

屬性

• id: string
  • Cookie 存儲區(qū)的唯一標(biāo)識符。
• tabIds: number[]
  • 共享此 Cookie 存儲區(qū)的所有瀏覽器標(biāo)簽頁的標(biāo)識符。

5. OnChangedCause

Cookie 發(fā)生更改的根本原因。

如果 Cookie 已插入或通過顯式調(diào)用 chrome.cookies.remove 被移除，為 explicit。如果 Cookie 是因過期而自動移除的，為 expired。如果 Cookie 因被已過期的失效日期覆蓋而被移除，為 expired_overwrite。如果 Cookie 因垃圾回收而自動移除，為 evicted。如果 Cookie 因 set 調(diào)用覆蓋而自動移除，為 overwrite。

枚舉

• evicted
• expired
• explicit
• expired_overwrite
• overwrite

6. SameSiteStatus

Cookie 的 SameSite 狀態(tài)。

no_restriction為 SameSite=None，lax 為SameSite=Lax，strict 為 SameSite=Strict，unspecified 為沒有設(shè)置 SameSite 屬性的 Cookie。

枚舉

• no_restriction：SameSite=None
• lax：SameSite=Lax
• strict：SameSite=Strict
• unspecified：沒有設(shè)置 SameSite

三、方法（Methods）

1. get()

檢索單個 Cookie 的相關(guān)信息。如果指定網(wǎng)址存在多個同名的 Cookie，則返回路徑最長的 Cookie。對于具有相同路徑長度的 Cookie，系統(tǒng)將返回創(chuàng)建時間最早的 Cookie。

1.1 示例

chrome.cookies.get(
  details:
  CookieDetails,
  callback?:
  function,
)

1.2 參數(shù)

• details: CookieDetails
• callback: function 可選
  • (cookie?: Cookie)=>void

1.3 返回

• Promise<Cookie|undefined>

2. getAll()

從單個 Cookie 存儲區(qū)中檢索符合指定信息的所有 Cookie。返回的 Cookie 將進(jìn)行排序，路徑最長的 Cookie 排在最前面。如果多個 Cookie 具有相同的路徑長度，創(chuàng)建時間最早的 Cookie 會排在最前面。此方法僅檢索擴(kuò)展程序擁有主機(jī)權(quán)限的網(wǎng)域的 Cookie。

2.1 示例

chrome.cookies.getAll(
  details:
  object,
  callback?:
  function,
)

2.2 參數(shù)

• details: object
  • domain: string 可選
  • name: string 可選
  • partitionKey: CookiePartitionKey 可選
    • 用于通過分區(qū)屬性讀取或修改 Cookie 的分區(qū)鍵。
  • path: string 可選
  • secure: boolean 可選
  • session: boolean 可選
  • storeId: string 可選
  • url: string 可選
• callback: function 可選
  • (cookies:Cookie[])=>void

2.3 返回

• Promise<Cookie[]>

3. getAllCookieStores()

列出所有現(xiàn)有的 Cookie 存儲。

3.1 示例

chrome.cookies.getAllCookieStores(
  callback?:
  function,
)

3.2參數(shù)

• callback: function 可選
  • (cookieStores: CookieStore[])=>void

3.3 返回

• Promise<CookieStore[]>

4. remove()

按名稱刪除 Cookie。

4.1 示例

chrome.cookies.remove(
  details:
  CookieDetails,
  callback?:
  function,
)

4.2 參數(shù)

• details: CookieDetails
  • name: string
  • partitionKey: CookiePartitionKey 可選
    • 用于通過分區(qū)屬性讀取或修改 Cookie 的分區(qū)鍵。
  • storeId: string
  • url: string
• callback: function 可選
  • (details?:object)=>void

4.3 返回

• Promise<object|undefined>

5. set()

使用指定的 Cookie 數(shù)據(jù)設(shè)置 Cookie；可能會覆蓋等效的 Cookie（如果存在）。

5.1 示例

chrome.cookies.set(
  details:
  object,
  callback?:
  function,
)

5.2 參數(shù)

• details: object
  • domain: string 可選
    • cookie 的 domain
  • expirationDate: number 可選
    • Cookie 的有效期
  • httpOnly: boolean 可選
    • httpOnly 時為 true
  • name: string 可選
    • 名稱
  • partitionKey: CookiePartitionKey 可選
    • 用于通過分區(qū)屬性讀取或修改 Cookie 的分區(qū)鍵。
  • path: string 可選
    • 路徑
  • sameSite: SameSiteStatus 可選
    • 同網(wǎng)站狀態(tài)。
  • secure: boolean 可選
    • Secure 值
  • storeId: string 可選
    • 包含此 Cookie 的 Cookie 存儲區(qū)的 ID，如 getAllCookieStores() 中所提供。
  • url: string
  • value: string 可選
    • cookie 值
• callback: function 可選
  • (cookie?:Cookie)=>void

5.3返回

• Promise<Cookie|undefined>

四、Action Popup 模塊獲取 Cookies

// 根據(jù) domain 獲取
const cookies = await chrome.cookies.getAll({ domain:  '.lkcoffee.com'})
console.log('popup cookies--->', cookies)
// 根據(jù) url 獲取
const urlCookies = await chrome.cookies.getAll({ url: url })
console.log("popup urlCookies", urlCookies);

五、Background Service Worker 模塊獲取 Cookies

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

六、Content Scripts 模塊獲取 Cookies

因為 Content Scripts 是注入當(dāng)前頁面的，所以和 web 一樣獲取即可文章來源地址http://www.zghlxwxcb.cn/news/detail-810505.html

document.cookie

到了這里，關(guān)于Chrome 瀏覽器插件 cookies API 解析的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！