Tabs to Front とは

新しいページを開いた時に、開いたタブにフォーカスが移る・アクティブになると言うだけの拡張機能です。新しく開いたタブを閉じるとその前にいたタブに戻ります。これはブラウザの機能で拡張機能の実装ではありません(後述)。
つまり、新しいページを開いても現在見てるタブ・ページにフォーカスが残って、その裏で開くとわざわざ開いたタブをクリックしてアクティブにする必要があって面倒くさいだろ？っていう拡張機能です。なぜすぐにフォーカスが映らないのかは想像で後に書いておきました。

拡張機能は色々と仕様があって、参考資料が豊富にあるわけでもなくいざ作ろうとしてもなかなか難しいわけですが、やってることは簡単です。

準備

任意の場所に保存するフォルダを作る

後でブラウザで拡張機能を読み込ませないといけないので、フォルダを作ります。自分がわかりやすいように名前をつけとけばよいかと思います。

しかしその中身には決まりがあって、

  • manifest.json

  • それらに必要なhtml、css、jsファイル

が必要になります。拡張機能のフォルダをブラウザで読み込ませる際にmanifest.jsonをまず読み込むのでこれは必須です。後はどのような拡張機能を作るかによって必要なものが変わってきますが、これらはGoogleの拡張機能のページなどでヘルプやドキュメントを参考にして下さい。

manifest.jsonを作る

これは基本的にはどういうものであるかを定義するためのものです。Chromeの拡張機能の管理から拡張機能のページを開くと、拡張機能の名前やバージョン、説明等が書いてあって拡張機能のON/OFFができる一覽が表示されると思いますが、そこに出てくるような内容です。

今回作るものは、新しいタブを開いたら、そこにフォーカスをあてるというだけですので何かしら操作するような画面であったりオプションはありません。 

{
  "manifest_version": 3,
  "name": "New Tab Focus",
  "version": "1.0",
  "description": "新しいタブを開いた時にそのタブにフォーカスを当てる拡張機能",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs"]
}

JSONはこのようになっています。

manifest_version はv3を利用するので　3 としています。

次いで拡張機能の名前、そのバージョン、また説明としてdescriptionで、ここまでは全ての拡張機能にどれでもあるものでしょう。

次の、background では、service_worker に background.js を指定しています。 今作ろうとしている拡張機能は何かしらの操作画面やオプション画面を持たず、ブラウザが動作する裏で状況を監視しています。そのためbackground.jsを作る必要があります。
もちろんタブに関して操作が行われるわけですから、tabの使用許可と言うか権限を得るためにpermissionsでtabを指定して宣言しておきます。

これらによって、タブに対して何かしらが行われるとbackground.jsが利用されます。

background.jsを書く

これはモロにjsです。

chrome.tabs.onCreated.addListener(function(tab) {
  chrome.tabs.update(tab.id, {active: true});
});

新しいタブが作られるとchrome.tabs.onCreatedイベントが発生して、そのタブのidからブラウザにtab.idがアクティブやでというのをアップデートしてやるわけです。するとブラウザみたいなもんはtab.idがアクティブになったと思いますんで、自動的にフォーカスがあたるという寸法です。

ブラウザで動作するようにする

ブラウザの拡張機能のページ1を開きます。

デベロッパーモード をONにすると、「パッケージ化されていない拡張機能を読み込む」と言うのがでてくるかと思うので、そこから保存したフォルダを読み込みます。
ここで作成したファイルの入っているフォルダを読み込むのでフォルダがどれなのかわかりやすいディレクトリ・名称にしておいて下さい。

特別エラーがなければこれでブラウザでこの拡張機能が動作するはずです。 また、タブが3つ開いていたとして、2つめのタブを見ている時に、タブ横の「+」から新しいタブを開いたとします。何かしらの後、その開いた4番目のタブを閉じるとタブ2に自動的にフォーカスが移ります。 これはブラウザの挙動なので新しいタブを開く時に、今見ていたタブのidを保持して閉じる時に戻すというような特別な処理をjsファイルに書く必要はありません。

最後に

このような機能を持った拡張機能、あるいはもっと便利で使いやすくもっと応用できるような便利な拡張機能はウェブストアにたくさんあるかと思いますが、信用できる作者が作ってるものであれば何も問題ないですが、同じような名前で中国人が作っていたりと怪しさ満点の、隙があったら情報抜き取りますやでと宣言してるような拡張機能がたくさんあったりして、危険だと判断した場合は使わない方がもちろん良いわけです。

そうなってくると複雑なものは自力で作るのは大変ですが、今回のようなごく簡単な仕組みのものであれば作ってしまった方が早いというわけでここに書いておく次第です。

何かしらのウィルスに感染してたくさんのページが表示される度にそこがアクティブになっていると今やっている作業画面がどこにいったかわからなくなったりすることもあります。またおそらくですがアクティブになったらメモリを消費する量も増えるのではなかろうかと。
裏で非アクティブな状態である時はメモリーセーバーのような機能が動作するようになったとも聞きます。そこらの仕様は確かではありませんが、このあたりも新規タブがすぐにアクティブにならない要因ではないでしょうか？

言うて、危険なページでは予め「警告」などもでるわけですし、それを無視して利用した人がウィルスに感染してどうなろうと知ったことではないのですが、警告が出るのであればそういったページから感染することもないわけで、やっぱりデフォルトで組み込んでおいてくれと思ったりもします。オプションで選択できるようにしてくれるだけでもいい、とも。

何にしてもPCの中に流出するとまずいものを入れておかないのが一番の得策かもしれませんね。日本では国ぐるみでマイナンバーを利用させて、情報を管理したいやでと言うてる感満載ですが、情報を渡すもなにも入っていなければ渡しようがないわけですから、多分「秘密をPCに保持しない」がベストプラクティスなのは間違いないかと思う次第です。