ブラウザ拡張機能でツールバーボタンを使う

概要

これは初心者のブラウザ拡張機能 Advent Calendar 2024の12日目の記事です。

ブラウザのツールバーボタンを使う方法を記載します。

ツールバーボタンとは

ツールバーボタンはブラウザの上部にある検索ボックスの隣りに表示されるボタンのことです。
Firefoxの場合は以下画像の赤枠の部分です。

具体的なコード

サンプルとしてツールバーボタンが押されたときにOSの通知を行う拡張機能を作ります。

manifest.json

{
    "browser_specific_settings": {
        "gecko": {
          "id": "[e-mail]"
        }
    },
    "manifest_version": 2,
    "name": "init-extention",
    "version": "0.1",
  
    "description": "ツールバーボタンサンプル",
  
    "icons": {
      "48": "icons/icon-48.png"
    },
  
    "browser_action": {
      "default_icon": "icons/star-empty-38.png",
      "default_title": "sample"
    },

    "background": {
      "scripts": ["background.js"]
    },

    "permissions": [
      "tabs",
      "notifications"
    ]
}

manifest.json内で指定する箇所はbrowser_actionです。
ここでボタンの名前とアイコンを指定します。

background.js

function handleClick() {
    browser.notifications.create({
        type: "basic",
        iconUrl: browser.runtime.getURL("icons/icon-48.png"),
        title: "Clicked!",
        message: "クリックしました",
    });
}

browser.browserAction.onClicked.addListener(handleClick);

ツールバーボタンが押されたときに発生するイベントはbrowser.browserAction.onClickedでキャッチします。

ツールバーにボタンを固定する方法

ツールバーへボタンを固定するには拡張機能からツールバーにピン留めを選びます。