ChromeExtensionのBrowser Actionsで格納したlocalStorageの値をBackground Pagesを使ってContent Scriptsからアクセスする方法

概要

Chrome ExtensionのBrowser Actionsで認証リクエストし、レスポンスのJWTをlocalStorageに格納する処理を作っていました。
その後、さらに拡張してContent ScriptsでJWTを使って他のAPIリクエストをするときに、「あれ？localStorageのスコープ違くね？＼(^o^)／」となったので、
Background Pagesを使ってContent ScriptsからlocalStorageにアクセスできるようにしました。
今回はその方法をサンプルコードを用いて紹介します。

また、今回は下記のような色々な前提をすっ飛ばして説明します(！)

localStorage
Chrome Extensionのスクリプトの種類など
パッケージ化されていない拡張機能の確認方法

処理の方針

概要にも書きましたが処理としてこんな感じです。

Browser ActionsでlocalStorageに何かしらの値を格納
1.で格納した値をBackground Pagesから取得できるようにする
Content ScriptsからBackground Pagesの処理を呼べるようにする

manifest.json

まずはmanifest.jsonを書いていきます。方針の通り、browser_Actions, content_scripts, backgroundを定義していきます。

{
  ...
  "browser_Actions": {
    "default_popup": "index.html",
  },
  "permissions": ["tabs"],
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "content_script.js"
      ]
    }
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  ...
}

Browser Actions

ここはサラッといきます！普通にlocalStorageにsetするだけです。

localStorage.setItem("key","value");

Background Pages

今回のポイント1つめです。 Background Pagesを作る際に考えなければならないのは、Content Scriptsから呼び出せるようにしなければならないことです。そこで活躍するのがChrome APIのchrome.runtime.onMessage.addListenerです。 Chrome Extensionではスクリプト同士を連携させるためにメッセージを使ってやりとりします。 Background PagesではContent Scriptsから呼び出される側なので、受け口(Listener)を作ります。

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  switch (request.method) {
    case 'getItem':
      sendResponse({data: localStorage.getItem(request.key)});
      break;
    default:
      console.log('no method');
      break;
  }
});

method名と任意のkey名を受け取れるようにして、中身を見てよしなに処理を変えるといった感じです。

Content Scripts

Content ScriptsではBackground Pagesに定義した処理を呼びます。 Background Pagesではchrome.runtime.onMessage.addListenerを使ってメッセージの受け取り側の定義をしましたが、 Content Scriptsでは、chrome.runtime.sendMessageを使って、メッセージの送信側を定義します。

document.addEventListener('click', function(e) {
  chrome.runtime.sendMessage({method: 'getItem', key: "key"}, function (response) {
    if (response.data) {
      console.log(response.data);
    }
  });
}, false);

画面の適当なところクリックしたら、ログに取得した値を表示するといった内容です。

まとめ

今回はBrowser Actionsで格納したlocalStorageの値をContent ScriptsがBackground Pagesを経由して取得する処理について説明しました。
localStorageのスコープの違いは、意識していないとハマってしまうポイントです。
Content ScriptsとBackground Pagesをメッセージ通信させることで、Chrome Extensionの異なるスクリプト同士を連携させることができます。

小さいスクリプトでサクッと確認することができたので、良い学びになりました！

production.log

株式会社リブセンスでエンジニアをやっている星直史のブログです。