Firefox のアドオンを作ってみたメモ

Firefox のタブバーの右端に現在のタブを閉じるボタンが欲しかったので既存のアドオンを探してみたらいくつかあったのですが、ピン留めされたタブまで消えてしまうので、自分で作ってみました。

基本的にはここ https://developer.mozilla.org/ja/Add-ons/WebExtensions に書かれている通りなのですが、自分用のメモとして残しておきます。

manifest.json をテキトーに作る。

manifest.json

{
    "manifest_version": 2,
    "name": "Close current tab",
    "version": "1.0",
    "description": "Adds button to close current tab.",
    "icons": {
        "48": "icons/icon.png"
    },
    "browser_action": {
        "default_area": "tabstrip",
        "default_icon": "icons/icon.png",
        "default_title": "Close current tab"
    },
    "background": {
        "scripts": ["close_current_tab.js"]
    }
}

icons はアドオンマネージャーで表示される 48px の画像ファイルを指定。

ツールバーにボタンを配置するので browser_action を定義。https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/browser_action

default_areba: tabstrip はタブバーにボタンを配置。

default_icon はタブバーに表示されるアイコンファイルを指定。

background は拡張機能が有効になった時に自動的にロードするJavaScriptを指定。https://developer.mozilla.org/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts

close_current_tab.js

browser.browserAction.onClicked.addListener(function(tab) {
    if (!tab.pinned) {
        browser.tabs.remove(tab.id);
    }
})

browser.browserAction.onClicked.addListener() でボタンを押した時に呼ばれる関数を定義する。関数の引数は現在のタブ。 https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/BrowserAction/onClicked

tab については https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/Tab

browser.tabs.remove については https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/remove

Firefox のアドレスバーで about:debugging を入力すると「Firefox 開発ツール デバッガー」が開くので、そこでアドオンを読み込んでテストすることができる。 https://developer.mozilla.org/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox

アドオンの公開 https://developer.mozilla.org/ja/Add-ons/Distribution/Submitting_an_add-on

まず https://addons.mozilla.org にアカウントを作る。

manifest.json と必要なファイルをZIPにして https://addons.mozilla.org/ja/developers/ にアップロード。

色々聞かれるのでポチポチと入力。

問題なければしばらくすると公開される。

今回作ったのは https://addons.mozilla.org/ja/firefox/addon/close_current_tab/ で公開されてます。

思いのほか簡単でした。