Gmail Favicon Counter 開発ログ

Gmail Favicon Counter は「未読メールに気づきたい」という個人的なニーズから生まれた Chrome 拡張機能です。

💡 発想

Gmail では本来、未読件数が (3) のようにタイトルタグに表示されますが、タブをたくさん開いていたりGmailタブをピン留めしていると、タイトル部分が隠れてファビコンだけになることがあります。そうすると新着メールに気づけず地味に困る。

そんなとき「ファビコン自体に未読数を表示できたらめちゃくちゃ便利では？」と考えたのが開発のきっかけです。

理想にぴったり合う拡張機能が見当たらなかったため、だったら自分で作ろう！という流れになりました。

🛠 実装方針

Gmail タブのタイトル（document.title）から未読件数を取得
件数を canvas で描画し、丸背景＋白抜きの数字バッジを作成
<link rel="icon"> を更新してファビコンとして反映
setInterval() で定期的に更新（3秒おき）
複数アカウントを別タブで開いていても、それぞれに個別対応

🚀 開発の道のり

この拡張のコア処理は主に以下の2点で構成されています：Gmailのタブタイトルから未読件数を読み取る処理と、それをビジュアルに変換するファビコン生成処理です。

最初は aria-label を使って DOM から未読数を取ろうとしましたが、Gmail の DOM 構造は変化が激しく、安定性に欠けると判断。そこで常に安定して取得できる document.title を使う方式に決定しました。

canvas を使って数字入りバッジを描き、data:image/png;base64,... 形式で favicon に変換。それを <link rel="icon"> として DOM に追加・置き換えることで動的にファビコンを更新できました。

文字の中央配置が少しズレて見えるので Y 座標を微調整したり、桁数に応じてフォントサイズを変える工夫も入れています。色は Gmail らしい赤（#D93025）を使用し、世界観に馴染むデザインに仕上げました。

🌟 公開と改善

一度manifest.json に不要な scripting 権限が含まれていたためストア審査に落ちましたが、これを削除して再提出。無事に Chrome ウェブストアで公開されました！

公開URL: https://chromewebstore.google.com/detail/gmail-favicon-counter/nndmlfooannjiikoffjpnihnlfjjijnk
プライバシーポリシー: https://www.dottiq.com/policies/gmail-favicon-counter.html

📌 この拡張について

This Chrome extension displays the number of unread Gmail messages as a favicon badge on the tab. It helps users notice new emails even when many tabs are open or the Gmail tab is pinned.

Gmailの未読件数をタブのファビコンとして表示するChrome機能拡張です。タブをたくさん開いているひとやタブ固定しているひとでも新着メールに気づくことができます。

📚 技術的な補足

まず未読件数の取得については、document.title に含まれる (3) のようなパターンを正規表現で抽出するだけのシンプルな方式を採用しています。この方法はGmailのUI構造の変更に強く、DOM依存の手法より安定している点がポイントです。

バッジ付きファビコンの生成には、JavaScriptの canvas API を使って 64x64 ピクセルの赤丸に白文字を描画し、それを toDataURL() でBase64エンコードしたPNGとして取得します。これを <link rel="icon"> タグとして <head> に挿入・差し替えることで、動的にファビコンを上書きしています。

この処理は 3 秒ごとに setInterval() で繰り返し実行されるため、未読件数が変化するとすぐにバッジが更新されます。また、未読が 0 件のときには Gmail の通常のアイコンに戻すことも可能です（現時点では常にバッジが表示される仕様）。

🎀 おわりに

私がアプリや拡張機能を作るときは、基本的に「自分に必要だから」という理由が出発点です。つまり、まず自分の作業をちょっとでも快適にしたいというところから始まっています。

今回の Gmail Favicon Counter も日々の作業のなかで「地味に不便だな」と感じて作ったものでした。でもせっかく作ったからには、私と同じような状況の誰かにも役立ててもらえたら嬉しいなと思っています。

これからも日常の中で「あったらちょっと便利」「地味だけどニッチで刺さる」そんなツールや拡張をゆるく作っていきます。

デザイナーさんやエンジニアさん、もしよかったらときどき Dottiq をチェックしてみてください。