taichino.com

Chrome Extensions TechTalkのUstreamを見ていて、僕も作りたくなったので、去年作ったFirefoxプラグインのLiveTopHatenarを移植してみました。

HTMLとJavasciptで組んで行くので、雰囲気としてはFirefoxの拡張機能と同じ感じで作れますが、Firefoxの拡張機能を作るより断然作り易かったです。特にFirefoxではソースを修正する度にブラウザ再起動という酷い状態だったのが、Chromeでは開発中モジュールの単体リロードが可能だったので非常に助かりました。

また公式ドキュメントの質が良くて、チュートリアルを10分くらいすれば、おおよその雰囲気が掴めて、開発を開始できました。しかも覚える事が少ないので取っ付き易いです。

本拡張機能のプロジェクト一式の構造は以下のようになっています。アイコンファイルを除けばmanifest.jsonとpopup.htmlの２ファイルのみです。

$ tree
`--- livetophatenar
   |-- icon.png
   |-- icon128.png
   |-- icon48.png
   |-- manifest.json     # 拡張機能の設定ファイル
   `-- popup.html        # 拡張機能本体

manifest.jsonはfirefox拡張機能でいうところのinstall.rdfで、バージョンや概要などのメタ情報からプラグインの動作概要まで定義されています。install.rdfに比べるとJSONフォーマットなので非常に見通しが良いですね。

{
  "name": "LiveTopHatenar",
  "version": "0.1",
  "icons" : {
    "48" : "icon48.png",
    "128": "icon128.png"
  },
  "description": "LiveTopHatenar provides TopHatenar's score of current page",
  "browser_action": {
    "default_icon": "icon.png",
    "popup"       : "popup.html"
  },
  "permissions": [
    "tabs",
    "http://tophatenar.com/"
  ]
}

popup.htmlは拡張機能の本体で、firefoxの元と同様に現在のURLでTopHatenarにリクエストを投げてレスポンスを解析して結果を表示しています。ここでは省略します。以上、簡単なので暇つぶしにでも何か作ってみたら良いと思います！

というわけでインストールはコチラから。ソースコードはgithubから。

これで一応firefoxとchromeの拡張機能が作れるようになりました。実は作りたい拡張機能あって習得したわけですが、中々重い腰をあげれません。。頑張らねば。

関連する記事

• 2009/8/10 月曜日 -- pythonとperlとphpとas3とjavascriptで日時計算
• 2009/8/9 日曜日 -- pythonとperlとphpとas3とjavascriptでJSON
• 2009/7/24 金曜日 -- jTemplatesのMultiTemplatesが思ったのと違う件

タグ: chrome extension, javascript, livetophatenar

この投稿は 2010年4月10日 土曜日 8:00:49 に javascript, programming カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 コメントを残すか、ご自分のサイトからトラックバックすることができます。