読者です 読者をやめる 読者になる 読者になる

verbalize

文章書く練習.適当でいいから色々書きたい.

Chrome extensionに入門した

http://dotinstall.com/lessons/basic_chrome_v2dotinstall.com

前回の記事でスターをつけてくださった方のブログを眺めていたらChrome拡張機能を作っていて、Chrome拡張機能ってHTML/CSS/JSだけで作れるのか!ということを知りました。せっかくの機会なので入門して自分なりに簡単な拡張機能を作ってみました。

モチベーション

シンプルにChromeを使っていて不便だと思う部分を解決するために作りました。

私の考える問題点

例えば、Chromeブラウジングしていて、最初はあることについて調べていたんだけど、気づいたら全く違うテーマのページを開いていた、なんてことありませんか?特に自分は学校の課題で調べ事してたんだけど退屈すぎていつの間にかネットサーフィンしてた、みたいなのがよくあります。

そんな時、そのウィンドウには、もともと調べていたテーマに関するタブと、新しく調べ始めたテーマに関するタブが混在してしまっている状態です。こういう時、テーマによってウィンドウを分けたくなります。そんなときみなさんどうしますか?単純にやるとこう↓なりませんか。

(左側3つのタブと右側2つのタブを切り分ける様子)

f:id:bonhito:20160811231648g:plain

このようにブラウザって複数のタブに対してはあまり柔軟に操作できないなと感じます。とくにウィンドウをまたぐと辛い。そこでタブ(ウィンドウ)操作を柔軟にする拡張機能をつくりました。  

つくったもの

github.com

 そのような流れでChrome拡張機能の入門として↑を作りました。インポートすると右上にタブっぽいアイコンが出てきますので、これをクリックすると使うことができます。この拡張機能は、タブのかたまりに対して主に分割する機能(split)と、保存する機能(storebookmark)で合計3つの機能を備えています。

split: 現在開いているタブを含め右側のタブを新しいウィンドウで開く

f:id:bonhito:20160811231649g:plain

一つのウィンドウに存在する異なるテーマのタブ群を分割(split)します。splitボタンを押すと、今開いている(activeな)タブを含め、そこから右側にあるタブを新しいウィンドウで開きます。

store: 今開いているウィンドウをWebStorageに一時保存

f:id:bonhito:20160811231650g:plain

保存したいタブ群をまずsplitで切り出した後に、保存したいウィンドウでstoreボタンを押すとあなたのlocalStorageにウィンドウが保存されます。

他のデバイスで見たりするわけじゃないけど、少しの間しまっておきたい時に使います。取り出すときは、先ほどのstoreボタンがretrieveボタンになっているのでそれを押して下さい。

bookmark: 今開いているウィンドウのタブを全てブックマークする

f:id:bonhito:20160811231651g:plain

store機能は使っている端末のlocalStorageに保存するので、他の端末では開くことができません。もちろんスマホChromeでは拡張機能自体が使えないので共有できません。そんなとき今開いているウィンドウの全てのタブを一括ブックマークできるのがbookmarkボタンです。

bookmarkボタンを押すとパスの設定画面が現れます。新しいフォルダ名とそのフォルダをどこに置くかを決めてsaveボタンを押してください。もしフォルダ名が空であった場合、新しくフォルダは作らずそのまま展開してブックマークされます。

課題

  • store機能の改善

    保持したウィンドウの情報を見れる機能、もう要らないって場合に捨てられる機能があったらよいかも。

  • splitできるならjoinも?

    splitの逆で複数のwindowを1つにまとめられる機能があってもよいかも。

  • バグの修正

    • 初回のウィンドウに限ってsplitがうまく動かない時がある。
    • jsの非同期処理による弊害をあんまり考慮せず作ったのでそのあたりを見直したい。
  • popup.htmlを改良する

    最低限のデザインにしていきたいんだけど、レイアウトの仕方について要勉強。この手のページを作るとき、大体HTML/CSSを書くのにJavaScriptと同じくらい時間かかるのもどうにかしたい。  

  • 名前

    tabs_splitterなんかしっくりこない。英語的にもおかしい気がするしtabをキーワードとして残したい。

所感

  • ボタンの名前をどう表記するのがベスト?

    単に split?それとももっと詳しく open right tabs in a new window?あるいは日本語で ◯◯◯?どれがわかりやすいんだろう。

  • 機能をどの程度柔軟なものにするか

    現在のstore機能とbookmark機能は、今開いているウィンドウの全てのタブに適用するので固定になっている。なので、ユーザーは任意のタブにたいしてこれらの機能を適用したい時には、

    1. ユーザー自身が保存したいタブをかためて右に寄せる。
    2. 境界タブでsplitして保存したいタブを新しいウィンドウに切り出す。
    3. bookmarkを押してそのウィンドウを保存する。

    というステップを踏む必要がある。もしこれが今開いているタブの一覧から選択できるようになれば、より柔軟で良い気がするんだけど、今のsplitとの組み合わせで実現できるというのも結構シンプルで良いと思うので迷う。この方がsplit機能の良さを感じてもらえる気がする...。どうなんだろうか。

  • extensionに付与する権限って限定はできないのか?

    bookmarkを編集する権限ってかなり重いと思う。例えば「ためになる拡張機能作りました!」と公開してchrome.bookmark.remove(all)みたいなことしたとしたらかなり深刻だと思う。bookmarkがいきなり消えて「え、あ、あらら」と慌てている間にあらゆるデバイスで一斉に同期が始まって...という光景は想像すると面白いけど(最低)。

    なのでユーザーがtabは良いけどbookmarkはダメ、みたいに権限の委譲を部分的に制限することはできないのか?と思ったり。まぁ仮にできたとしても、今回であればbookmarkボタンを押して何も起こらなくなるだけなので万々歳だけど、世のextensionには複数の権限が必要な単一の機能ってのもいくらあるでしょうからね…。

  • 時間をかけすぎた

    やってることはとてもシンプルなのに、考え始めてからページをつくり、中身を実装するのに結局丸3日くらい使ったので残念。もっとスピードがほしい。

  • 普通に既出かな?

    特に新規性を求めたわけではないので良いけれど、既にこういう機能を提供するものはいくらでもあると思う。あるいはChromeに元々こういう機能があるかもしれない。もしご存知のかたいたらコメントで教えていただけるとありがたいです。結構使いたいです。笑