Chrome拡張を作ろう - ReDo

2013年1月 6日

Chrome拡張を作ろう

HirobaXのPC Browser版が欲しいので、作ることにしました。

○先にオチ

Chromeウェブストアで「HirobaXC - HirobaX for Chrome」で公開しました。他のユーザでまったく試してなくて不安なのでDQ10ユーザの方は動作確認という人柱にご協力いただけると助かります。

思い出アルバムの閲覧・整理を便利にするChrome拡張作ってます #HirobaXC - ゆこX
http://greety.sakura.ne.jp/redo/x/2013/01/chrome-hirobaxc.html


○とりあえずぐぐってふいんきを掴む

公式
http://developer.chrome.com/extensions/
すごく簡単!オリジナル Chrome 拡張機能を作ってみよー!manifest version 2編 : actyway
http://actyway.com/7497

まずはChrome Extension 作り方、でぐぐって出てきたサイトを何個か見ました、
使ってみたかったのですが縁のなかったドットインストールに講座があったのでこれを受講してみます。

○ドットインストール面白い

※少し進めていくと、Manifest version 2でチマチマ変わったところでひっかかると思いますが、Chromeのconsole見ながらぐぐればなんとかなります。

Google Chrome拡張の基礎 (全23回) - ドットインストール
http://dotinstall.com/lessons/basic_chrome

Chrome拡張には主に4種類ぐらいあるらしいです。

Browser Action(ツールバーにあるアイコン。常時表示)
Page Action (特定のページで表示されるアイコン) ★←最終目標は多分これだな!
Content Scripts (特定のページで自動実行されるもの)
Context Menu(右クリックメニュー)

○console.logデバッグ

とりあえずconsole.logデバッグしようと思ったのですが、意外とつまづきました。
PageAction+popupで作ったのですが、popupをタブでCtrl+shift+iしても出ないのでご注意ください。
・backgroundはChrome設定の拡張機能から「ビューを調査:?」のあたりのリンクをクリックして増えるWindowに出ます。
・popupは表示されたpopupで右クリックして「要素を検証」で出ます。

久しぶりにJavaScriptで長文書いた!

コメントする