直感的にタブを切り替えられるGoogle Chrome拡張機能を作りたかった
ドットインストールでGoogle Chrome拡張機能入門の勉強をしました。
http://dotinstall.com/lessons/basic_chrome_v2dotinstall.com
勉強がてらに直感的にタブを切り替えられるExtensionを作ってみたかったのですがあまりうまくいかず。。
とりあえず作ったchangeTabs を紹介したいと思います。
動作確認はmacでしかしてませんので、ご注意下さい。
完成品
Ctrl + Shift + K でchangeTabsを開くと、現在いるタブが緑色になっているのがわかります。
それぞれのタブに数字が割り当てられているので、その数字を選択するとタブ移動します。
上のgifでは左から3番目のタブと5番目のタブを行き来するというデモになっています。
イメージとしては下のように各タブにわかりやすく番号が振られて、直感的に切り替えられるようにしたかったのですが、htmlの横幅の制限のせいかうまく合わせることができませんでした。
インストール手順
公開しなかったので各自コードをgit cloneして読み込んでみて下さい。
github.com
chrome://extensions/ に移動して、「パッケージ化されていない拡張機能を読み込む」からgit clone したディレクトリを選択すると動かすことができます。
作成手順
アイコン作成
下のリンクからアイコンをダウンロードしてきます。
www.iconfinder.com
browser actionに必要なアイコンのサイズは19x19 です。
ダウンロードした画像を開いて、「ツール」→「サイズを調整」からサイズを調整します。
manifest.json作成
nameやiconなど必要な設定を書きます。
そして、ショートカットキーを作成したい場合にはcommandsを用意します。
Ctrl + Shift + P(一番右上のアルファベット) にしたかったのですが、指定できなかったのでKにしています。
Browser Action(JavaScript部分)作成
表示されるアイコンの動的なサイズ変更
タブが増えたり、ブラウザの大きさ自体を変更することによって、表示されるアイコンの横幅を動的に変更したかったのでタブのwidthを取得してサイズを決めています。
タブの数によって横幅は動的に変わるのですが、ブラウザの大きさを変更しても横幅は変わりませんでした。とりあえずそのままです。
また、そのままのタブのサイズで表示すると右端が切れてしまうので÷2してます。
ここらへんから既にグダグダしています。
現在いるタブのアイコンの背景色を変える
タブのactive値がtrueかどうかで現在いるかどうかがわかります。
trueであれば色を変える処理を入れています。
tabIdに移動する
押したキーボードの値を取得して移動するコードを書いて終了。
最後に
今回は公開まではしませんでした。もっと出来のいいExtensionができたら考えます。。
そして記事を書きながら思ったのが、タブの下に番号を表示させるのではなくタブの表示自体を番号に書き換えてやればいいのでは？と思い始めました。
日を改めて再挑戦したいと思います。。
気が向いたら、また書きます。
