放っておいたタブは植物に覆われる、ナタで切り払うまで中身を触れない
Charlie Gerard が自分用に作った Chrome 拡張。タブごとに放置タイマーがあり、見ていない間に植物が端から内側へ伸びてくる。5% を超えるとページは操作を受け付けず、マウスでドラッグしてつるを斬り払う必要がある。武器はナタ、チェーンソー、火炎放射器から選べる。
日本語
コピー
「Overgrowth」という言葉で、ちょっとした創作の練習をしていた。最初に浮かんだのは終末ものの光景で、『The Walking Dead』や『The Last of Us』のように、植物が放置された建物を覆い尽くしていくイメージだった。
次にこのアイデアをデジタルの世界に当てはめてみたくなり、「放置された」という言葉からブラウザのタブを思い出した……タブを読まないまま放っておくほど、植物にじわじわ乗っ取られていったら？再びタブにアクセスするには、この侵略してくる植物を片付けなければならなかったら？植物に覆われたドアを開けようとする感じで……
というわけで、まさにそういう動きをする小さな Chrome 拡張を作ってみた。タブを読むようになるかというと、必ずしもそうではないけれど、まあいい。
デモ
アイデア
- どのタブにも放置タイマーがある。タブが表示されていない間は進み、見ている間は止まる。
- 放置すればするほど、タブの上に植物が増えていく。端から中央に向かって。
- タブが 5%以上覆われると、蔦の向こうのページは封鎖される。スクロールはできるが、クリックも選択もドラッグもできない。
- ページを取り戻すには、マウスをドラッグして蔦を切り払う。5%まで減らせば残りは自然に落ちる。もう一度タブを放置すれば、またジャングルが育ち始める。
- おまけとして、武器は錆びたマチェーテ、チェーンソー、火炎放射器から選べる。
- タブが完全に覆われるまでの時間も変更できる。
最初は、植物をすべて切り払うまで覆われたタブを閉じられないようにしようかと考えていたけれど、さすがに煩わしすぎると思ったのでやめた… 😅
拡張機能
コードは大きく 3 つの部分に分かれている。バックグラウンドのロジック、タブ上に植物とアニメーションを表示するコンテンツスクリプト、そして拡張機能自体の UI を扱う popup フォルダだ。
バックグラウンドワーカー
background.js ファイルが、開いているタブごとにジャングルを開始し、タブが閉じられるとそれを忘れる。
popup
このフォルダは拡張機能の UI を扱う。時間設定、武器の選択、タブの一覧と現在の状態を表示する小さなコンポーネントが入っている。
オーバーレイ
content フォルダには、植物と武器の SVG、クラスタを配置して成長させるロジック、neglect clock、サウンドが入っている。
しばらく何かを作りたいと思っていて、このプロジェクトはその小さくて楽しいきっかけになった。新しいパソコンでこれを書いているので、今は「まだ」22 個しかタブを開いていないけれど、そのうち 14 個はすでに完全に覆われている… 😂 これで読む量が増えるわけではないかもしれないが、蔦を切り払うおかげでタブに戻るのが少し楽しくなった！🪚🌿