Google chromeの拡張機能について書かれた記事をよく見かけます。「Google chromeの拡張機能は開発がとてもカンタン！」ということが書かれていたので、それならちょっと作ってみようと思いました。

 

Google chromeのベータ版をダウンロード

 

以下のURLよりGoogle chromeのベータ版をダウンロードします。

Google Chrome（BETA）

 

開発用フォルダを準備する

好きなところに開発用のフォルダを作成します。

私はC:\work\chrome-extというフォルダを作成しました。この中に拡張機能ごとのフォルダを作成していきます。今回はhelloworldという名前の拡張機能を作ってみることにします。

 

必要なファイルを作成

 

Google chrome拡張に必要なファイルを作成します。

最低限必要なのは以下の三つです

• マニフェストファイル
• アイコン画像ファイル
• HTMLファイル

   

 

マニフェストファイル

マニフェストファイルには拡張機能の名称やバージョン情報などをJSON形式で書きます。アプリケーションの設定ファイルのようなものです。ファイル名は「manifest.json」にしないといけません。

 

manifest.json

{
  "name": "はじめてのGoogle chrome拡張機能",
  "version": "1.0",
  "description": "世界にあいさつする程度の拡張",
  "browser_action": {
    "default_icon": "icon.png", // アイコンの画像ファイル
    "popup": "popup.html" // ポップアップ表示されるHTMLファイル
  },
  "permissions": [
  ]
} 

 

アイコン画像

マニフェストファイルのbrowser_action - default_iconで指定したファイルが、chrome拡張のアイコンとしてブラウザに表示されます。

 

アイコン画像は以下のサイトで公開されているアイコンを使わせていただきました。

http://www.pinvoke.com/

Copyright (C) 2009 Yusuke Kamiyamane. All rights reserved.

 

HTMLファイル

ブラウザに表示されたアイコンをクリックしたときに表示されるHTMLファイルを作成します。

このHTMLファイルにchrome拡張が提供する機能を実装していくことになるわけです。

 

popup.html

<p>Hello World!</p>

 

今回はとりあえずやってみるのが目的なのでHTMLしか書いてませんが、HTMLファイルなのでWebページを作成するときのようにJavaScriptを書くことができるし、JQueryなどのライブラリを使用することもできます。

 

この3つのファイルだけでGoogle chromeの拡張として機能します。確かにカンタンですね。

 

動かしてみる

作成したchrome拡張の動作確認をしてみます。

ブラウザ右上のスパナボタンから「拡張機能」を選択します。

 

以下のような画面が表示されたら「デベロッパーモード」って書いてあるところの「+」マークをクリックします。

 

ボタンが三つ表示されました。

 

「パッケージ化されていない拡張機能を読み込みます」というボタンをクリックして、さっき作成した「C:\work\chrome-ext\helloworld」フォルダを選択します。

 

helloworld拡張機能が読み込まれて、画面右上にアイコンが表示されました。

 

アイコンをクリックすると「Hello World!」と表示されます。

 

やったね！

 

パッケージ化

 

せっかくなのでパッケージ化してみましょう。

「拡張機能のパッケージ化」というボタンを押してみます。

 

パッケージ化するディレクトリを選択するダイアログが表示されました。「参照」ボタンをクリックしてディレクトリを選択します。

 

 

なんだかよくわからないメッセージが出ました。

 

「C:\work\chrome-ext」フォルダを見るとhelloworld.crxとhelloworld.pemファイルが作成されています。pemファイルは秘密鍵ファイルです。chrome拡張を更新するときに指定するのでしょう。

 

chrome拡張のダッシュボード画面を開きます。

https://chrome.google.com/extensions/developer/dashboard

 

「Add new item」というボタンをクリックします。

 

 

zipファイルをアップロードする画面が表示されました。「C:\work\chrome-ext\helloworld」フォルダをzip圧縮してアップロードします。 

 

アップロードすると以下のような画面が表示されます。詳細な説明を入力して「Publish」ボタンをクリックします。 

 

 

以下のURLで世界中に公開されました。すごい！早い！

https://chrome.google.com/extensions/detail/ldommckbjfggdcpgalnpacdpjpchbdeb

 

 

 

思ったこと

拡張を作ってから公開するまでの道のりが短いのでとってもラク。

HTMLとJavaScriptだけ知ってれば開発できるのでカンタン。

アイコンとフキダシの中でしか表示できないのが気になる。今見ているページに空から女の子が降ってくるような拡張は作れないのかな。どうなんだろう。

 

参考：空から女の子が降ってくる