ソーシャルてんこ盛りな Chrome 拡張機能を作りましたー!

ソーシャルてんこ盛り for Chrome
お茶碗に入れたら意外とかわいかった Chrome!!

ソーシャルてんこ盛り!

ソーシャルてんこ盛り for Chrome

パソコン用にはもうブックマークレットがすでにあるので作る予定は無かったのですがただの勢い作ってみました!初拡張機能です。ブックマークレットは使い慣れていないから拡張機能の方が使いやすい!とか色々な人がいらっしゃると思いますので、ぜひぜひ使ってみてくださ〜いw

ソーシャルてんこ盛り!は現在開いてる URL のツイート数とかいいね!数とかササッと確認出来て尚かつ、はてぶしたりEvernote でクリップしたりと色々とソーシャル系のサービスを使われている人には便利な拡張機能です!

パソコン用ブックマークレットスマホ用ブックマークレット もあります。

拡張機能の読み込み方法!

Chrome の拡張機能

今回わたしが作った拡張機能は、みなさんが普段使っている拡張機能とは違い、インストールに一手間かかります! Chrome ウェブストア に登録していないのとインストールが簡単なパッケージ化されていないので、一度パソコンのデスクトップなどにダウンロードして解凍してから入れる手順になります!

ダウンロード!

今回も、ブルー、グレー、ピンクの3色用意しました!!!が、アイコンはどれもブルーのみです>< すみませんっすみませんっすみ・・・。

デスクトップなどにダウンロードして解凍してくださいね〜w ファイルは ZIP です!

★ソーシャルてんこ盛りブルー!
★ソーシャルてんこ盛りグレー!
★ソーシャルてんこ盛りピンク!

Chrome 側の設定!

Chrome 拡張機能

Chrome の拡張機能の画面を開いてくださいっ!!
アドレスバーに chrome://settings/extensionSettings と打ち込んでも開きます!画面右上に「デベロッパーモード」とチェックボックスがあるのですが、これをチェックしないとインストールできません><っ

Chrome デベロッパーモード

チェックを入れるとこんな感じで3種類のボタンが表示されます!!!これで受け入れ体勢 OK なんです〜!

で、フォルダの置き場所なんですが今のまま、デスクトップとかに置いたままインストールして邪魔だ!と思って削除するとたぶんソーシャルてんこ盛りも Chrome の再起動後とかに消えてしまうと思うので、Windows ならマイドキュメントとか Mac なら /Users/ユーザー名/Documents とか無難なところに移動させてからにしてください〜w (ちょっと詳しい仕様がわかりません・・・汗)

Chrome デベロッパーモード

「パッケージ化されていない拡張機能を読み込む…」のボタンを押すとファイル選択のウィンドウが開くので、さきほど移動したソーシャルてんこ盛りのフォルダを選択すれば OK です!

Chrome デベロッパーモード

こんな感じに一覧とアドレスバーの横のアイコンいっぱい並ぶところに表示されたら正常に入っていると思います!

アイコンのボタンをクリックしたらポップアップで開きますのでピコピコしてみてくださいw

動かない場合!(追記)

Twitter で教えていただきました!Windows 7 でオプションを指定しないと起動できないみたいです。Windows 全部がそうなのか Chrome のバージョンの問題なのか分かりません。(汗

Chromeのショートカットで chrome.exe の後に
「 –enable-experimental-extension-apis」
(※先頭の半角スペース1個必要)
を追加してあげると良いみたいです。起動オプションの設定方法 – Google Chrome まとめWiki が分かりやすいかもしれません。

拡張機能に関連する実験的なAPI群を有効化します。(開発者向け)と説明があったので、ここでピーン!ときました。恐らくですけど、上の方法じゃなくても chrome://flags/ をアドレスに入力して開いた画面に「試験運用版の拡張機能 API」って項目があると思います、それを有効にすれば動くと思います。わたしはこれが有効だったから問題なかったんですね。

削除方法!

アンインストールは普通の拡張機能と同じにおこなっていただいて、インストールした時点の位置のフォルダは残っていると思いますので、これを削除しておしまいですw

ほぼひとりごと

そうだ!言い忘れてましたが Windows で動作確認はしてません〜w 動かなかったら教えてください!

今回の拡張機能はブックマークレットって言う土台があったので結構簡単に作れました!が、かなり適当です〜w 時間を作ってブラッシュアップしていきたいと思います。一番大変だったのはアイコンですwww 時間かかった割に全然良くない><

アイコンもそうですが、拡張機能の仕様をあまり把握せずに作ったのでひどい内容になっているのかもしれません〜。アイコンサイズは 19px だとかすっごく半端な気がします、キャプチャして計ってみるとボタン部分は 25px あるのに謎仕様ですよね〜、19px より大きい物は自動的に縮小されるみたいです。

Samples – Google Chrome Extensions – Google Code こちらに拡張機能のサンプルコードがたくさん置いてあるので、このあたりを触りながら作ると理解しやすいと思いました!わたしも今回サンプル触りながらって感じです。ネット上に情報は思っていたより多くあったので比較的簡単に作れると思います! JavaScript がそこそこ出来れば。