ツールバーに独自のアイコンを表示する方法

• 概要
• 環境
• manifest.json
• main.js
• 動作確認　
• 最後に
• 参考サイト

概要

ツールバーは URL バーの隣にある領域です
ここに独自にアイコンをセットすることでクリック時の処理などを extension で書くことができます
今回は設置方法とクリックイベントのハンドリングをしてみたいと覆います

環境

• macOS 10.13.6
• Firefox 62.0

manifest.json

• vim manifest.json

{
  "manifest_version": 2,
  "name": "Toolbar test",
  "version": "1.0",
  "description": "Display icon on toolbar and click test.",
  "background": {
    "scripts": ["main.js"]
  },
  "browser_action": {
    "default_icon": {
      "20": "icons/icon-20.png"
    },
    "default_title": "test"
  }
}

browser_action でツールバーにアイコンを配置できます
icons/icon-20.png を適当に配置しましょう
画像がない場合は透明なアイコンが表示されます、透明なのでアイコンがあるかどうかはカーソルを合わせないとわからないので画像を準備しましょう
default_title はカーソルを合わせた際のツールチップの情報です

main.js

• vim main.js

function onClicked() {
  console.log("clicked");
}

browser.browserAction.onClicked.addListener(onClicked);

browser.browserAction.onClicked にリスナーを追加することでクリックイベントを監視することができます

動作確認　

about:debugging にアクセスして manifest.json を読み込みましょう
アイコンが表示されたクリックすると console.log が表示されると思います

最後に

Firefox の Webextension でツールバーを操作する方法を紹介しました
コンテキストメニューの場合は右クリックが必要でしたがツールバーの場合はクリックのみなのでやることが一つ減ります

ただツールバーの場合はアイコン用の画像が必要になります
extension でやりたいことに合わせて適切な UI を選択しましょう

参考サイト

• https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action