同じサイトを3つのアカウントで開くと、タブが全部同じ名前になる。それを直す拡張の v0.2 を出しました
同じサイトを、仕事用と個人用と検証用の 3 つのアカウントで開いています。タブが 3 つ並びます。名前は 3 つとも同じです。
この拡張きのうはタブに名前を表示できます。
どれがどれか分からないので、いちいちクリックして確かめます。間違えて仕事用の画面で個人用の操作をしかけたことも、正直あります。
先にひとことで
タブの名前の先頭に、目印を自動で付ける拡張を作っています。7 月に公開したものに、今日 v0.2 を出しました。今回から、目印を自分で決められます。
何をする拡張か
自作で tab-title-prefix というブラウザ拡張を作っています。タブのタイトルに、コンテナ（Firefox）や URL ルール（Chrome）ベースで接頭辞を付ける拡張です。似たタブが並んでも一目で見分けられます。
・何ができるかの紹介ページ: https://ishizakahiroshi.com/work.html?id=tab-title-prefix
・リポジトリ（Star をいただけると励みになります）: https://github.com/ishizakahiroshi/tab-title-prefix
Firefox をお使いなら、下のページから 1 クリックで入ります。
https://addons.mozilla.org/ja/firefox/addon/tab-title-prefix/
入れたあとに設定する必要はありません。Firefox の「コンテナ」機能でタブを開いていれば、その瞬間からタブの名前が [仕事] ○○ のように変わります。目印を自分で決めたいときだけ、設定画面をひらきます。
Chrome 版も作れる状態にはしていますが、ストアには出していません。Chrome にはコンテナに当たる機能がなく、似た拡張が既にいくつもあるためです。
そもそもコンテナって何ですか
Firefox には「Multi-Account Containers」という公式の追加機能があります。ざっくり言うと、1 つのブラウザの中に、仕切りのある別々の入れ物を作れる機能です。
入れ物ごとにログイン情報が分かれるので、同じサイトに 3 つのアカウントで同時にログインしたままにできます。ログアウトと再ログインを往復しなくてよくなります。
便利なのですが、タブの名前は変わりません。3 つとも同じ名前のまま並びます。この最後の 1 個が不便で、拡張を作りました。
7 月に出した版でできたこと
コンテナ名をタブの名前の先頭に付ける。それだけです。
[仕事] ホーム / X と [個人] ホーム / X のように並ぶので、クリックしなくても見分けられます。コンテナを使っていない普通のタブでは何も起きません。今までどおりです。
今日出した版で増えたこと
大きいのは「目印を自分で決められる」ことです。
たとえば「github.com を開いているタブには [GH] を付ける」というルールを、自分で 1 行足せます。コンテナを使っていない方でも、見分けたいサイトにだけ目印を付けられます。
細かいところでは、こんなことができます。
・ルールをいくつも作って、並び替えたり、一時的に止めたりできる
・全部のルールをまとめて止めるスイッチがある
・保存する前に「こういう名前になります」というプレビューが出る
・いま開いているタブから、ルールの下書きを 1 クリックで作れる
それと、地味ですが効く直しを 2 つ入れました。
1 つは、ページの中で画面が切り替わるタイプのサイト（管理画面やダッシュボードでよくあります）で、切り替えたときに目印が消えてしまうことがあった件です。原因は、こちらが「動いている」と思い込んでいたコードが、実は最初から効いていなかったことでした。作り直しています。
もう 1 つは、コンテナの名前を変えたときです。今までは、開きっぱなしのタブは古い名前のままでした。今回から、そのタブを開き直さなくても新しい名前に変わります。
気をつけていただきたいこと
タブの名前は、そのページの一部として扱われます。つまり、訪問先のサイト側からも読めます。
コンテナの名前に、たとえば銀行名やお客様の会社名のような、人に見られたくない単語を入れている場合は、中立的な名前に変えるか、目印の書き方を変えることをおすすめします。設定画面から変えられます。
この拡張自体は、何も集めませんし、どこにも送りません。設定はお使いのブラウザの中だけに保存されます。Firefox の配布ページにも「開発者によると、この拡張機能はデータ収集を必要としません。」と表示されています。
作ってみて思ったこと
今回いちばん時間を使ったのは、新しい機能ではありませんでした。「動いていると思っていたけれど、実は効いていなかった」コードを 2 か所見つけて、消した部分です。
消したらコードは短くなって、動く場面は増えました。効いていなかったのだから当たり前なのですが、見つけるまでは「たまに効かないことがある機能」だと思い込んでいました。思い込みのほうが厄介です。
書いていて、直すより気づくほうが難しいな、と改めて思いました。
技術的な中身（何がどう効いていなかったのか、ブラウザ判定でつまずいた話など）は、Qiita のほうに書きました。
拡張を試す:
画面と使い方を見る:
※ 各記事の図解版（画像と図と関連リンクをまとめたページ）は、個人サイトの記事一覧から辿れます。
https://ishizakahiroshi.com/#articles
※ ヘッダー画像とインフォグラフィックは AI（画像生成）で作成しています。
※ 本文の挿絵も AI（画像生成）で作成しています。
書いた人: ishizakahiroshi
群馬の北部で、保護猫2匹と暮らす、在宅エンジニア（何でも屋）
https://ishizakahiroshi.com/
https://github.com/ishizakahiroshi
X（業務委託・各種相談はこちら）：
https://x.com/ishizakahiroshi
バックエンド・インフラ・AI連携まわりで、業務委託のご相談を受け付けています。フルリモートです。スポットや週2〜3時間からでも歓迎で、いろんな案件に携われたらうれしいです。こんな相談、歓迎です。
#ブラウザ #Firefox #拡張機能 #タブ管理 #仕事効率化 #個人開発 #パソコン #初心者向け #複数アカウント #SNS運用 #学び #自動化 #デスクワーク
