[chrome拡張機能] chrome.cookies APIの使い方おぼえがき

[chrome拡張機能] chrome.cookies APIの使い方おぼえがき:

クッキー関係のプラグインを作りました

SUGOI!Cookies: gclid tester for Google Ads
https://chrome.google.com/webstore/detail/sugoicookies-gclid-tester/oidgodfancakeifokbiocnnlfoocmbpd?hl=ja

こんな拡張機能作ってみました。

幸せになる人:

・今までgclidテストを手打ちでやってた人

・今までわざわざF12 => Application => Cookiesで

　Goolge広告やアナリティクスのクッキーを確認していた人

超ニッチです(笑)。せっかくなので、chrome.cookies APIに関してメモ。

前提

①: 公式のドキュメントはここです。

Chrome API => https://developer.chrome.com/extensions/cookies

MDN => https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/cookies

②: このAPIは、background.jsでしか呼べない。

なので、content.jsからは、

chrome.runtime.sendMessage で「このAPI呼んで！」と、

叫ぶ必要があります。例えば、下のような感じ。

content.js

/**  
 * to background.js 
 */ 
const getCookies_ = () =>{ 
 chrome.runtime.sendMessage({message:'getCookies', domain:document.domain}, function callback);  
}; 

background.js

/** 
 * eventListener  
 * chrome.cookies should be called in this file 
 */ 
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
  const domain = request.domain; 
  const msg = request.message; 
  if(msg=='getCookies'){ 
    chrome.cookies.get... 
  } 
}); 

3: manifest.jsonで「このURLのクッキー触るよ」の宣言が必要

manifest.json

{ 
  "permissions": [ 
     "cookies", 
     "*://*.google.com" 
  ] 
} 

API

onChanged : クッキーに変更が加えられてた時に呼ばれます

onChanged.addEventListener

/** 
 * listen to change events to cookies 
 */    
chrome.cookies.onChanged.addListener((e)=>{    
  console.log(e.cause)); 
  // @type{string} 'expired', 'explicit' or 'override' 
 
  console.log(e.cookie));  /** @type{Object}*/ 
  const cookie = e.cookie; 
    cookie.url  /** @type string*/ 
      // manifest.jsonで該当URLのpermissionが必要です。 
    cookie.name /** @type string*/ 
      // クッキーは"name=val"形式。name部分です。 
    cookie.value /** @type string*/ 
      // "name=val" のval 
    cookie.domain /** @type string*/ 
    cookie.path /** @type string*/   
    cookie.secure /** @type boolean*/ 
    cookie.httpOnly /** @type boolean*/ 
    cookie.SameSiteStatus   /** @type Enum "no_restriction", "lax", or "strict" */ 
    cookie.expirationDate /** @type double*/ 
    cookie.storeId /** @type string*/ 
 
  console.log(e.removed));  
  // @type{boolean} 削除されたのか、作られたのか  
}); 
 

onChanged.removeEventListener: イベントリスナーの削除

/* 
 * @private 
 * @param {Object} event 
 */ 
function doSomething_(event){ 
  // do something 
}; 
 
chrome.cookies.onChanged.addListener(doSomething_); 
chrome.cookies.onChanged.removeListener(doSomething_); 
 

getAll : 空オブジェクトを渡せば本当に全部のクッキーが。ドメイン渡せば、そのドメインのクッキーがリターン。

chrome.cookies.getAll({},((allCookies)=>{ 
    doSomething_(allCookies); 
})); 
 
chrome.cookies.getAll({domain:'qiita.com'},((qiitaCookies)=>{ 
    doSomething_(qiitaCookies); 
})); 
 

get: url, nameを指定して、クッキーを1つゲット

chrome.cookies.get({url:'aurl', name:'aCookieName'}, ((aCookie)=>{ 
    doSomething_(cookie); 
})); 

remove: url, nameを指定して、クッキーを1つ削除

chrome.cookies.remove({url:'url', name:'cookieName'}, function callback); 

set: クッキーを生成します。

/** 
 * Objectの中にurlプロパティは必須です。 
 */ 
chrome.cookies.set(object details, function callback); 

番外編

background.jsではなく、content.jsでやりたいならdocument.cookieでやりましょう
https://developer.mozilla.org/ja/docs/Web/API/Document/cookie

//そのドメインのクッキーが、stringで入る 
let cookies = document.cookie; 
 
// Array.<string> - 'name=value'の配列  
cookies = cookies.split(';'); 
 
// 新しいクッキーを生成 
document.cookie = 'aNewName=aNewVal'; 

以上です。最後までありがとうございました！