mitukiii.jp

先日書いた記事 で紹介しましたが Chrome Extension を初めて作成しました。

Chrome ウェブストア – Make::Booth Stream

おそらく、何を考えてどんな作業をしたか忘れるであろう自分のために
今度 Chrome Exntension を作る時のメモを残しておきます。

参考資料

Chrome拡張入門
Chrome Extension の概要と作り方、また各種参考記事についてまとまっています。
まずはこの記事に目を通すのがオススメです。

Google Chrome Extensions – Google Code
公式ドキュメント（英語）です。

Chrome Extensions API リファレンス
上記の日本語意訳です。

プロジェクトの作成

僕は手動でディレクトリやマニフェストファイルを作成しました。
プロジェクトのディレクトリ構造は taberareloo を参考させて頂きました。

├── Rakefile
└── src
    ├── manifest.json
    ├── popup.html
    ├── background.html
    ├── images
    │   ├── icon.png
    ├── stylesheets
    │   └── popup.css
    └── javascripts
        ├── background.js
        └── popup.js

プロジェクトの作成から開発の流れはこちらが参考になります。
はじめてみよう | Chrome Extensions API リファレンス

ジェネレータを使う

後から調べると Ruby 製のジェネレータがありました。

https://github.com/piglop/chrome-extension-scaffold

JavaScript を .coffee、HTML を .haml で記述出来ます。
ファイルの変更を感知しコンパイルまで面倒を見てくれます。
普段から .coffee や .haml を利用している方は使えば楽を出来ます。

パッケージ用の Rakefile を作成

作成した Chrome Extension をギャラリー公開用の .zip にパッケージするため Rakefile を用意します。
Ruby ライブラリの crxmake を使います。

Rakefile

require 'rubygems'
require 'crxmake'
require 'json'

NAME          = 'YOUR EXTENSION NAME'
PEM           = 'YOUR PEM PATH'
MANIFEST_PATH = File.join(File.dirname(__FILE__), 'src', 'manifest.json')
MANIFEST      = JSON.parse(open(MANIFEST_PATH).read).freeze
VERSION       = MANIFEST['version']

namespace :pkg do
  desc 'create zip for Google Extension Gallery'
  task :zip do
    mkdir_p 'pkg' unless File.exists? 'pkg'
    package = "pkg/#{NAME}.zip"
    rm package if File.exists? package
    CrxMake.zip(
      :ex_dir     => 'src',
      :pkey       => PEM,
      :zip_output => package,
      :verbose    => true,
      :ignoredir  => /^\.git$/
    )
  end
end

NAME, PEM（秘密鍵）は適宜読み替えて下さい。

後は

rake pkg:zip

上記コマンドで “pkg/#{NAME}.zip” にパッケージが作成されます。

パッケージングに関してはこちらが参考になりました。
パッケージング | Chrome Extensions API リファレンス

アイコンとスクリーンショットの準備

パッケージの中に含めるものとして

• 128×128 の png アイコン
• 48x48p の png アイコン

ギャラリーへ公開時に

• 440×280 の宣伝用画像
• 1280×800 または 640×400 のスクリーンショット

が必要になります。
（2012/5/2 現在）

僕は公開直前になって慌てて準備したので、予め準備しておくと良いんじゃないでしょうか。

アイコンのフォーマットとマニフェストファイルへの記述の仕方は下記記事をどうぞ。
Formats: Manifest Files – Google Chrome Extensions – Google Code

ギャラリーへ公開

ギャラリーへの公開はそのまま下記の記事での流れを参考にさせて頂きました。
続・先取り！ Google Chrome Extensions：第10回　Chrome拡張の国際化とギャラリーへの公開と総まとめ｜gihyo.jp … 技術評論社

最後に

ほぼつまづくことなくプロジェクトの作成からギャラリーへの公開まで出来ました。
Chrome Extension は気軽に作れて楽しいですね。

今回作ったもののソースコード
https://github.com/mitukiii/make-booth-stream-chrome-extension