開発‎ > ‎Google‎ > ‎

Google Chrome 拡張の開発

すっかり Chrome づけですので、拡張の一つも作れるようになっておかんといかんですね。

概要

技術情報は右記にあります ∥ Google Chrome Extensions - Google Code

拡張のメタ情報を記述する manifest ファイルについては、右記に記述があります。各サイズのアイコン等についても記述されています ∥ Formats: Manifest Files - Google Chrome Extensions - Google Code

manifest ファイルを修正すれば任意のファイルをポイントできますが、典型的には以下のようになっています。

main.htmlアプリアイコンクリックで飛ぶ先
options.html右ボタンで「オプション」や、拡張設定の「オプション」から飛ぶ先
background.html拡張が組み込まれている間はずっと存在しているページ
popup.htmlツールバーアイコンからポップアップする画面

拡張の開発手順としては、開発中は、関連ファイルが入ったディレクトリを対象として開発を行い、リリースの際に、各 extension をパッケージするための秘密鍵を用いて、*.crx ファイルを作成します (秘密鍵は、初回の CRX 作成の際には省略すると新たに振り出されますが、アップデートの際には同じキーを指定しないと拡張 ID が変わってしまうため、アップデートの際にデータが引き継げなくなります)。

開発パッケージをインストールするには、Chrome ブラウザで拡張機能の設定ページ ( chrome://extensions ) にアクセスし、「デベロッパーモード」にチェックを入れると、「パッケージ化されていない拡張機能を読み込む…」ボタンが出てきますので、それで、開発ディレクトリを指定してください。

後は、HTML 等のコンテンツを書き換えてリロードすれば、反映されます。manifest やロケール情報などを書き換えた際には、拡張機能設定ページで「再読み込み」をクリックすれば反映されます。

拡張をパッケージ化する (CRX ファイル化) には、同じく拡張機能設定ページで「拡張機能のパッケージ化…」を押します。開発に使っていたディレクトリと、アプリごとの秘密鍵を指定すると、CRX パッケージができます。ローカルであれば、ブラウザに CRX ファイルをドロップすればインストールできます。

CRX ファイルは ZIP ファイルなのですが、CRX 用のヘッダとして余分な領域を持っていて、そこに先の PEM 形式の秘密鍵に対応する公開鍵を格納しています ∥ CRX Package Format - Google Chrome Extensions - Google Code

chrome://extensions で、各拡張の左の「>」を展開すると、「ID: afnaelggchgdbjocdbcnmfiemjdbmkoc」のようなかたちで、各拡張に固有の ID が振られますが、この値は、CRX 作成時に使用した公開鍵のハッシュですので、うっかり同じ鍵で別の拡張をパッケージしてしまうと、別の拡張に同じ ID が振り出されてしまい、変なことになると思います。ですので、秘密鍵は、拡張 1 つごとに 1 つ必要です。

そして、拡張内のリソースには、chrome-extension://afnaelggchgdbjocdbcnmfiemjdbmkoc/main.html のようにアクセスすることが可能ですので、アプリケーション相互間での呼び出しは、この ID を使って行うことができます。

それと、I18N ですが、基本的に JavaScript を使って実装されています ∥ Internationalization (i18n) - Google Chrome Extensions - Google Code

_locales/{en,ja}/messages.json にメッセージを入れて、それを JavaScriptで変換する仕組みですが、ちょっと面倒くさそうです。innerHTML プロパティを JavaScript で書き換える仕組みもあり得ます。

拡張の分類

元々 “extension” と呼ばれていたのは、どうも以下で言う「狭義の」拡張であるせいか、これを指す名称が無いようです。

  • Extensions (*.crx) の分類:
    • 狭義の、従来の意味での Extensions (ツールバーやコンテキストメニュー内の小物たち)
    • Installable Web-apps (Web アプリケーション):
      • Hosted apps (コンテンツはリモートにあるが、メタ情報だけをローカルにインストールするもの)
      • Packaged apps (コンテンツまで含めて、ローカルで完結するもの)

インストール先

パクる? パクる?

Mac OSX$HOME/Library/Application Support/Google/Chrome/Default/Extensions/<拡張 ID>/<バージョン>_?/

古メモ

Hosted Apps - Installable Web Apps - Google Codehttp://code.google.com/intl/en/chrome/apps/docs/developers_guide.html

Packaged Apps - Google Chrome Extensions - Google Codehttp://code.google.com/chrome/extensions/apps.html

単純なバッジサンプル。

Google Chrome Extensionを作ってみた-その3- | Classmethod.dev()http://dev.classmethod.jp/ria/google-chrome-extension-3/

本格的には、ここから。

Overview - Google Chrome Extensions - Google Codehttp://code.google.com/chrome/extensions/overview.html

predefined message http://code.google.com/chrome/extensions/overview.html#arch

バックグラウンド

あったー ∥ Autoupdating - Google Chrome Extensions - Google Code

なんでだよ… ∥ Issue 58904 - chromium - Don't allow app launcher to be combined with browser actions or page actions - An open-source browser project to help move the web forward. - Google Project Hosting http://code.google.com/p/chromium/issues/detail?id=58904 。

localstorage | オプションページとローカルストレージ ∥ Options - Google Chrome Extensions - Google Code ∥ http://code.google.com/chrome/extensions/options.html

Browser Actionを持ったChrome packaged appが作れなくなってる件。ショボンヌ… ∥ Issue 58904 - chromium - Don't allow app launcher to be combined with browser actions or page actions - An open-source browser project to help move the web forward. - Google Project Hostinghttp://code.google.com/p/chromium/issues/detail?id=58904

NPAPI拡張 iTunes Daemon - 枕を欹てて聴く http://d.hatena.ne.jp/Constellation/20100311/1268272374

Writing an NPAPI plugin for Mac OS X | Boom Swagger Boomhttp://boomswaggerboom.wordpress.com/2008/10/24/writing-an-npapi-plugin-for-mac-os-x/

mozilla2.0 mozilla/modules/plugin/sdk/samples/basic/mac/http://mxr.mozilla.org/mozilla2.0/source/modules/plugin/sdk/samples/basic/mac/

ローカルの画像ファイルを開いて返すとか、GD を叩いて返すとか、そういうの書ければな。

Mac だと、MIME type は info.plist の WebPluginMIMETypes とかに書くのかな?。

そこは chrome-extension://edjgccpdfkglnecndolkeepgilmfmola/main.html#fuga で飛べる。

“The extension's ID is based on a hash of the public key” だそうなので、private key をなくさなければ、何とかなる ∥ Packaging - Google Chrome Extensions - Google Codehttp://code.google.com/chrome/extensions/packaging.html

Comments