Chrome拡張TabTabTabをReact/TypeScriptでリニューアルしました

TabTabTabとは

開いたタブを管理しやすくするためのChrome拡張です。

以下のように、ウィンドウごとに開いているタブを一覧することができ、選択したタブに移動したりタブを削除したりすることができます。

ストアはこちら

リニューアルでやったこと

今回のリニューアルでやったことは以下の2つです。

• UIの大幅刷新
• Chrome89から使えるようになったグループ化タブに対応

特にUIを刷新するにあたり、React/TypeScriptを導入し、UIフレームワークにMaterialUIを使用しました。今まではJSを使って直接DOMを操作していたので、かなり開発がしやすくなりました。

ちなみに前のバージョンのUIはこんな感じでした。

テンプレート化

上記のようなReact/TypeScriptなChrome拡張開発環境をすぐに構築できるようにテンプレート化しました。READMEに使い方を書いているのでぜひ使って自分なりのChrome拡張を作ってみてください！

GitHub - okaryo/chrome-extension-tsx-template: A template for developing Chrome extensions using TSX.

A template for developing Chrome extensions using TSX. - okaryo/chrome-extension-tsx-template

github.com