Chrome拡張機能でブラウザのクッキーを利用の画像
芽萌丸プログラミング部 @programming
投稿日 2019/06/21

Chrome拡張機能

Chrome拡張機能でブラウザのクッキーを利用

Chrome拡張機能ではChrome Cookies APIを使うことでブラウザが保有するクッキーを利用することができます。

コード例

以下のコード例では、クッキーが必要なページhttps://example.com/cookie-requiredヘアクセスする方法を表しています。 ブラウザにクッキーが付与されるルートページhttps://example.com/へ一旦アクセスすることでクッキーを取得し、その後https://example.com/cookie-requiredへアクセスしています。

manifest.json

manifest.jsonpermissions"cookies"を指定します。これはChrome拡張機能にブラウザのクッキーを扱う権限を付与しています:

manifest.json

{
  "name": "My Extension",
  ...
  "permissions": [
    "cookies",
    "*://*.example.com"
  ],

  ...
}

これにより content script 内でブラウザのクッキーを利用したリクエスト処理を実行できます:

content script

content script 内ではこのように使います:

...

// まずはルートページでクッキーを取得:
$.ajax({
  url: "https://example.com/",
}).done((html) => {
  // Chrome Cookie API で取得したクッキーをデバッグ出力:
  chrome.cookies.getAll({ domain: 'https://example.com' }, ((cookies) => {
    console.log("Got cookies:", cookies);
  }));
  // そしてクッキーが必要なページヘアクセス:
  $.ajax({
    url: "https://example.com/cookie-required",
  }).done((html) => {
      console.log("cookie-required page's html:", html);
  });
});

以上、ニッチなメモでした。


芽萌丸プログラミング部
芽萌丸プログラミング部 @programming
プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。記事は主に @TanakaSoftwareLab が担当。