darake Update: 2025-08-19

Chrome拡張機能でアクションボタン(ツールバーのボタン)をクリックした時の挙動を作る

Chrome拡張機能を作る時、アクションボタン(ツールバーにある拡張機能のアイコンのボタン) をクリックした時に、新しいタブでアプリが表示される、という拡張機能を作りたい。

この記事では、その手順をまとめていく。

manifest.jsonにweb_accessible_resourcesを追加。

まず、アクションボタンをクリックした時の挙動を設定するために manifest.jsonに以下を追加する。

web_accessible_resourcesとは、拡張機能に含まれているファイル(この例ではmemo.html) をwebからアクセスできるように設定するもの。

これを設定することで、拡張機能に含まれているファイルを、urlを通してアクセスできるようになる。

  "web_accessible_resources": [
    {
      "resources": ["memo.html"],
      "matches": ["<all_urls>"]
    }
  ]

resourcesはwebアクセスを許可するファイルを指定し、matchesはどのページからアクセスしてよいかを指定するもの。

例えば、chrome拡張で簡単なメモアプリを作りたい、という場合だと、どのwebサイトからでもアクセスしたいので<all_urls>と指定するとよい。

詳細は以下の参考記事が詳しい。

manifest.jsonに以下を追加しよう。backgroundとservice_workerを追加することで、その拡張機能のバックエンド側の処理を行ってくれる。

  "background": {
    "service_worker": "background.js"
  },

そして、background.jsを作成して以下のように書く。

chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.create({ url: chrome.runtime.getURL("memo.html") });
});

それぞれのChrome APIについては、なんとなく理解できる。また、上記の例では minifest.jsonと同じディレクトリ階層にmemo.htmlを入れること。

詳細は以下の公式ドキュメントに記載されている。

今回紹介した公式ドキュメントを改めてまとめる。