やーまんぶろぐ

気が向いた時にだけ書くブログ

直感的にタブを切り替えられるGoogle Chrome拡張機能を作りたかった

ドットインストールでGoogle Chrome拡張機能入門の勉強をしました。
dotinstall.com

勉強がてらに直感的にタブを切り替えられるExtensionを作ってみたかったのですがあまりうまくいかず。。

とりあえず作ったchangeTabs を紹介したいと思います。

動作確認はmacでしかしてませんので、ご注意下さい。

完成品

f:id:yamano3201:20160501193046g:plain
Ctrl + Shift + K でchangeTabsを開くと、現在いるタブが緑色になっているのがわかります。

それぞれのタブに数字が割り当てられているので、その数字を選択するとタブ移動します。

上のgifでは左から3番目のタブと5番目のタブを行き来するというデモになっています。

イメージとしては下のように各タブにわかりやすく番号が振られて、直感的に切り替えられるようにしたかったのですが、htmlの横幅の制限のせいかうまく合わせることができませんでした。
f:id:yamano3201:20160501204132p:plain

公開手順

ここに来てデベロッパー登録するのに5$必要なことを知りました。。
qiita.com

無念。

インストール手順

公開しなかったので各自コードをgit cloneして読み込んでみて下さい。
github.com

chrome://extensions/ に移動して、「パッケージ化されていない拡張機能を読み込む」からgit clone したディレクトリを選択すると動かすことができます。
f:id:yamano3201:20160501200314p:plain

作成手順

アイコン作成

下のリンクからアイコンをダウンロードしてきます。
www.iconfinder.com

browser actionに必要なアイコンのサイズは19x19 です。

ダウンロードした画像を開いて、「ツール」→「サイズを調整」からサイズを調整します。
f:id:yamano3201:20160501201154p:plain

manifest.json作成

nameやiconなど必要な設定を書きます。

そして、ショートカットキーを作成したい場合にはcommandsを用意します。
Ctrl + Shift + P(一番右上のアルファベット) にしたかったのですが、指定できなかったのでKにしています。

Browser Action(JavaScript部分)作成

表示されるアイコンの動的なサイズ変更

タブが増えたり、ブラウザの大きさ自体を変更することによって、表示されるアイコンの横幅を動的に変更したかったのでタブのwidthを取得してサイズを決めています。

タブの数によって横幅は動的に変わるのですが、ブラウザの大きさを変更しても横幅は変わりませんでした。とりあえずそのままです。

また、そのままのタブのサイズで表示すると右端が切れてしまうので÷2してます。
ここらへんから既にグダグダしています。

現在いるタブのアイコンの背景色を変える

タブのactive値がtrueかどうかで現在いるかどうかがわかります。
trueであれば色を変える処理を入れています。

tabIdに移動する

押したキーボードの値を取得して移動するコードを書いて終了。

最後に

今回は公開まではしませんでした。もっと出来のいいExtensionができたら考えます。。

そして記事を書きながら思ったのが、タブの下に番号を表示させるのではなくタブの表示自体を番号に書き換えてやればいいのでは?と思い始めました。

日を改めて再挑戦したいと思います。。

気が向いたら、また書きます。