メールクライアントソフトの Thunderbird（サンダーバード）には、アドオンという機能を拡張する仕組みがあり、アドオン開発者の方が作成したアドオンを追加して、Thunderbird をより使いやすくすることができます。「アドオン開発」と言われると少し敷居が高く思われるかもしれませんが、JavaScript、HTML、CSSの知識があれば簡単に自分独自のThunderbirdアドオンを作成することができます。そこで今回は、Thunderbird アドオン開発のはじめの一歩として、アドオンの作成方法、デバッグ方法、作成したアドオンのインストールまでの手順をまとめてみました。
アドオンの作成方法
Thunderbird アドオン開発のはじめの一歩として、Thunderbird のバージョンを表示するだけの簡単なアドオンを作成してみましょう。
参考資料：A "Hello World" Extension Tutorial | Thunderbird
プロジェクトフォルダの作成
まずはじめに、アドオンを構成するプログラムや画像などのファイルを入れるためのプロジェクトフォルダを作成します。今回は「tb-version」という名前のフォルダを作成しました。
mkdir tb-version
manifest.json の作成
プロジェクトフォルダ「tb-version」直下に「manifest.json」というファイルを作成します。このファイルに Thunderbirdアドオンに関する情報を定義することによって、このプロジェクトフォルダ配下にあるファイルが Thunderbirdアドオンを構成するプログラムや画像などのファイルであると認識されます。
参考資料：A Guide to Extensions | Thunderbird
{
"manifest_version": 2,
"name": "バージョンを表示",
"description": "お使いのThunderbirdのバージョンを表示するアドオンです。",
"version": "1.0",
"author": "あぱーブログ",
"browser_specific_settings": {
"gecko": {
"id": "showversion@apar.jp",
"strict_min_version": "78.0"
}
},
"icons": {
"64": "images/icon-64px.png",
"32": "images/icon-32px.png",
"16": "images/icon-16px.png"
},
"browser_action": {
"default_popup": "mainVersion/version.html",
"default_title": "Thunderbirdのバージョンを表示",
"default_icon": "images/icon-32px.png"
}
}
manifest.json のキー（「マニフェストキー」と呼びます）の意味は次の通りです。ここで設定した値やアイコンが Thunderbird のアドオンマネージャーに表示されます。【必須】となっているマニフェストキーは省略できません。
manifest_version【必須】マニフェストのバージョンを定義するキーです。バージョン「2」と「3」がサポートされていますが、バージョン「3」は Thunderbird 110 以降でのサポートになっています。現時点（2023年11月）では、特別な理由がなければバージョン「2」を指定しておけば問題ありません。
name【必須】アドオンの名前を指定します。
description アドオンの簡単な説明を設定します。省略できますが、設定することをオススメします。
version【必須】アドオンのバージョンを指定します。
author アドオン開発者の個人名または会社などの組織名を指定します。
browser_specific_settings の下の gecko には以下のマニフェストキーを設定します。
id【必須】アドオンのIDです。他のアドオンのIDと重複しないように、一意となる値を設定する必要があります。例えば example.com ドメインを所有していて手放す予定が無い場合は「＜アドオン名＞@example.com」のような ID がベストプラクティスとされています。ドメインを所有していない場合は、「＜ATNのユーザー名＞.＜アドオン名＞@addons.thunderbird.net」とういう ID が使用できます。
あるいは、中括弧で囲んだUUID「例：{F4098AB3-B01F-4718-9266-E35CED68CC36}）」を使用することもできます。UUIDは uuidgen コマンドなどで生成できます。
strict_min_version アドオンが対応する Thunderbird の最小バージョンを指定します。例えば、バージョン「78」を指定した場合は、Thunderbird バージョン77 ではこのアドオンをインストールすることができなくなります。Thunderbird のバージョン「68」「78」「91」「102」で、対応するアドオンの仕組みが大きく変わっていますので、この辺りのバージョン指定するのが良いでしょう。
参考資料：Add-on Update Guides | Thunderbird
icons アドオンのアイコンのファイルパスを 64 32 16 のサイズ（単位はピクセル）ごとに設定します。省略した場合は、標準のパズルアイコンが使用されます。SVGファイルにも対応していますので、その場合は次のように設定します。
"icons": {
"64": "images/icon.svg",
"32": "images/icon.svg",
"16": "images/icon.svg"
}
ここまでのマニフェストキーでは、主にアドオンの情報（メタデータ）を設定しました。以下のマニフェストキーはアドオンの機能や構成するファイルなどを設定します。
browser_action Thunderbird のメインツールバーにボタンを追加します。以下のマニフェストキーでボタンをクリックした時にポップアップ表示されるHTMLファイル、タイトル、アイコンを設定します。
default_popup ポップアップ表示されるHTMLファイルのパスを設定します。
default_title ボタンの名前を設定します。設定した名前がボタンの横に表示されます。省略した場合は、name マニフェストキーで設定したアドオンの名前が表示されます。
default_icon ボタンのアイコンのファイルパスを設定します。省略した場合は、標準のパズルアイコンが使用されます。
HTMLファイルの作成
ボタンをクリックした時にポップアップ表示されるHTMLファイルを作成します。このHTMLファイルからスタイルシートとなる「version.css」と、プログラム部分の「version.js」を読み込んでいます。このあたりは一般的なWebページの構成と同じですね。
１点特徴的なのは、Thunderbird のアドオン開発では、JavaScriptモジュールを多用するため、「type="module"」を指定して「version.js」を読み込みます。今回は利用しませんが、これにより他の JavaScriptモジュールをインポートできるようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Thunderbirdのバージョン</title>
<link rel="stylesheet" type="text/css" media="screen" href="version.css">
</head>
<body>
<div id="version" class="version-page"></div>
<script type="module" src="version.js"></script>
</body>
</html>
CSSファイルの作成
Thunderbird のバージョンを表示する部分のスタイルシートを作成します。
.version-page {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
width: 150px;
height: 30px;
padding: 10px;
}
JavaScriptファイルの作成
今回作成するアドオンのメインとなる部分です。Thunderbird のバージョンを取得して、HTMLファイルに表示する JavaScriptプログラムを作成します。
Thunderbird のバージョンは、runtime API の getPlatformInfo() 関数で取得できますので、こちらを利用します。getPlatformInfo() は、非同期関数のため次のようなコードになります。
function gotBrowserInfo(info) {
document.getElementById("version").innerText = info.version;
console.log(info);
}
let gettingInfo = browser.runtime.getBrowserInfo();
gettingInfo.then(gotBrowserInfo);
Thunderbird のアドオン開発では、Promise を返す非同期関数をよく使いますので、JavaScriptの非同期処理について理解しておくとよいでしょう。
参考資料：Promise - JavaScript | MDN
ファイル構成の確認
以上でアドオンが完成しました。ファイル構成が以下になっていることを確認してください。
tb-version/
├─ manifest.json
├─ images/
├─ icon-64px.png
├─ icon-32px.png
└─ icon-16px.png
└─ mainPopup/
├─ version.html
├─ version.css
└─ version.js
アドオンのデバッグ方法
作成したアドオンが正しく動作するか確認してみましょう。
Thunderbird の「ツール」メニューから「開発ツール」＞「アドオンをデバッグ」を選択します。
「一時的なアドオンを読み込む」をクリックします。
作成したアドオンの「manifest.json」を選択して「開く」をクリックします。
アドオンが読み込まれると以下のような表示になります。失敗する場合は「manifest.json」の内容を見直してください。読み込まれたアドオンのコードを変更した場合は、「再読み込み」ボタンを押して変更を反映することができます。
Thunderbird のメインツールバーにアドオンのボタンが追加されます。正しく動作するか確認しましょう。
Thunderbird の「ツール」メニューから「開発ツール」＞「エラーコンソール」で JavaScriptのコンソールログや、エラーログを確認できます。
作成したアドオンのインストール
作成したアドオンを配布できる状態にして、インストールしてみましょう。
アドオンファイルの作成
アドオンを配布するには、１つのアドオンファイルにする必要があります。
アドオンファイルの作成方法は、プロジェクトフォルダ配下の内容をZIP圧縮 して１つのファイルにまとめて、拡張子を「.xpi」に変更すれば完成です。
注意：プロジェクトフォルダはZIP圧縮に含めないようにしてください。例えば、プロジェクトフォルダを丸ごとZIP圧縮して、拡張子を「.xpi」にした場合、アドオンをインストールする時に「このアドオンは壊れています」旨のメッセージ表示がされてインストールができません。
以下の要領でプロジェクトフォルダを含まないようにZIP圧縮して、拡張子「.xpi」のアドオンファイルを作成できます。
cd tb-version/ zip -r ../tb-version.xpi *
アドオンのインストール
Thunderbird の「ツール」メニューから「アドオンとテーマ」を選択します。
「歯車マーク」から「ファイルからアドオンをインストール」を選択します。
作成したアドオンファイルを選択して「開く」をクリックします。
「追加」をクリックします。
以上で、作成したアドオンがインストールされました。
Thunderbird アドオン開発者向けドキュメント
この記事でも参考にさせて頂いた Thunderbird アドオンの開発者向けのドキュメントです。
本家 Thunderbird の開発者向けドキュメントです。
https://developer.thunderbird.net/add-ons/
Thunderbird の WebExtensions API のドキュメントです。（Thunderbird アドオンは、Mozilla が開発した WebExtensions API というクロスブラウザ技術を使って作成します）
https://webextension-api.thunderbird.net/
Mozilla の WebExtensions API のドキュメンも参考になります。
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions
おわりに
作成した Thunderbird アドオンを配布する手順は以下の記事にまとめてみました。よければご参照ください。
関連記事：
Thunderbird アドオンの公開手順
Thunderbird アドオンの自主配布とアップデートサーバーの設定手順
コメント