ブラウザ拡張機能でアドレスバーボタンを作る

概要

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

アドレスバーボタンを作る方法を記載します。

アドレスバーボタンとは

ブラウザのアドレスバーのなかに表示されるボタンのことです。
このボタンはページ固有の機能を実装するために使われます。

具体的なコード

サンプルとしてqiita.comのページを表示した際にアドレスバーボタンを作り、ボタンを押すと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"
    },
  
    "page_action": {
      "browser_style": true,
      "default_icon": {
        "38": "icons/icon-48.png"
      },
      "show_matches": ["https://qiita.com/*"],
      "default_title": "sample?"
    },

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

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

manifest.json内で重要なのはpage_actionです。
ここにアドレスバーボタンの設定を入れます。

設定項目	値	説明
browser_style	true または false	ブラウザーのスタイルを適用して統一感を出すかどうかを決める設定。デフォルトはfalseだが、統一感を出す場合はtrueにするのが推奨
default_icon	ボタンのアイコン	アドレスバーボタンに表示したいアイコンを入れる
show_matches	URL	アドレスバーボタンを表示するページを指定する。デフォルトではどのページでも非表示
default_title	ボタンのタイトル	ボタンの名前を入れる

background.js

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

browser.pageAction.onClicked.addListener(handleClick);

browser.pageAction.onClickedでボタンが押されたときのイベントをキャッチします。

参考

アドレスバーボタン