tttab開発日記

tttabを開発した

経緯

日々いくつかchromeの拡張機能（extension）を利用して仕事をしたり情報収集したりしている。

それなりにショートカットキーも使いこなすしブラウザの移動もvimiumが入っているのでvim仕様になっているからそこまで困ったことはないのだが、いつも同じようなページに飛んでいることにふと気づいた。

github, facebook, gmail, gcp console, twitter, messenger … などなど。

やり方は ctrl + t でタブを開けて、face とか入れると補完されるので移動する。といったような方法。馴染みすぎてかなり早いのだがそれでも多少はめんどくさいなと思っていることに気づいた。

なので作った。

URLを保存して、復帰することができるという機能だけを持つchrome拡張機能を。ブラウザのお気に入りと酷似している機能な気もするがまぁいいや。

実装プラン

以下のような流れ。

1. chrome拡張機能の作り方分からないから一通りドキュメントを読む。
   https://developer.chrome.com/extensions を読めばだいたい分かる。
   読みながら気づきとか覚えておく必要があることは note にまとめておく
2. hello worldをdownloadしてlocal実行
   Hello Extension
3. 魔改造して遊ぶ
   （ここまでで10時間くらい）
4. ttt で反応するようにする
5. tttr + number でlocal storageに保存するようにする
6. ttt + number で新しいタブで開くようにする
7. ctrl + shift + t で保存しているやつが一覧で開くようにする
   （ここまででさらに10時間くらい）
8. リリース作業（3時間くらい）

実装中の手詰まりポイント

1. ttt に反応させる

manifest.jsonに commands を設定するとショートカットキーにjsを反応させるのが容易にできるようになっている。しかし ctrl か alt を含めないといけないらしい。。。詰んだ。と少し途方に暮れていた。

ここでふと思いつく。

（ドキュメントにページ上のjsとして動作させるための機構があったような）

ということで Content Script を使って開発することにした。ソースコードとしては watch.jsが担当している。

なんてことはない。全ての keydown を監視して ttt となるかどうかを判別しているくらいのものだ。これで色々できるようになった。

2. Backgroundプロセス

chrome自体の機能を使うためには Content Script からBackgroundプロセスにメッセージを投げて依頼するような形式となっている。この時に、 都度Backgroundプロセスが立ち上がる のか 常にBackgroundプロセスが立ち上がっているのか を設定して使うことができる。特に要件がなければ前者の 都度Backgroundプロセスが立ち上がる 方を選ぶと良い。（Event Pageと呼ぶ）

3. developerサイト

試しにHello Extensionをドラフト状態でアップロードしたのだが、chrome拡張機能は一度アップロードすると消せない。。。アーカイブはできる。別な機能を作る時に上書きして使うことにしよう。

よかったこと

自分のためにスクリプトを作ることはあるが公開することはほぼない。職業プログラミングとしてお仕事でものを作ることはあるが、それ以外で公開するものを作ったのはかなり久しぶりかもしれない。去年メーカーズフェアという「作る人のための祭典」みたいなのを見に行ったが、みんなこんな感じだったのかなとふと思い出された。

なんのための、誰のためのものづくりなのか。

今回は自分と似たような人が困ってたら使ってくれればいいかなくらいのもの。どちらかというとvimiumとかすでにキーボードベースで色々作業をする方向けなのでだいぶ絞られた形になるだろうとは思う。

アプリとかサービスとか100個くらいのんびり作ろう作戦の1つというのもあるので作品集の一つとして位置付けしておこうかな。

他の良かった点としてはデザインとか機能の絞り込みとかでは嫁の力を借りた。特にデザインに関しては、 コーディングしやすいようにデザインを考える という悪い癖に気づけたのが大きい。ゼロベースでデザインをし、それを元にデザインを組み上げる。まぁまぁhtml力とcss力は上がった気がする。

これから

tttabに機能を持っていくか。別なwebサービスとかゲームとかIoTっぽい何か作ったりとかしていこうかなー。他の言語も使いつつ遊ぶとなるとwebサービスが楽しいから純webサービスかゲームとapiサーバーか、IoTとapiサーバーか。あたりが楽しそうかなー。