もくじ
はじめに
Chrome拡張は、主にHTMLとJavaScriptでつくることができる。てっきり（GAEみたいに）Pythonか何かを使うものだとばかり思っていたので意外だった。じゃあ俺にも作れるんじゃないか？ということで試しにつくってみることにする。
今回は手始めとして、アドレスバーの右側に出るアイコンを押すとメッセージがポップアップするだけの簡単なやつにする。
用意するファイル
- manifest.json
- 設定ファイル。ここにアプリの設定を書いていく。
- popup.html
- 今回のアプリのメイン。HTMLとJavaScriptをひとつにまとめて記述する。
- icon.png
- 使用するアイコン。
manifest.jsonの作成
|
1 2 3 4 5 6 7 8 9 |
"name": "Hello Unko!", "version": "0.1", "description": "ようこそうんこ！", "browser_action": { "default_icon": "icon.png", "popup": "popup.html" }, "permissions": [ ] |
- 「Name」はアプリケーション名、「version」はバージョン番号。これらは必須。
- 「description」は拡張機能の解説。「chrome://extensions/」でインストールした拡張機能一覧を見たときなどに表示される。
- 「browser_action」は、ツールバーの右にボタンを作成してそれを押すとポップアップが出るアプリの場合に必要となる。今回はボタンを押すとメッセージを出すアプリを作成するのでこの部分の設定を行う。アイコンと、ポップアップの中身を表すhtmlを指定する。
- 「permissions」は、拡張機能のアクセス権限に関する設定。拡張から特定のサイトにアクセスしたり、お気に入りを操作したり、デスクトップ通知を出したりといった動作をする場合にここで指定する。今回は特に何もしないので空欄。
popup.htmlの作成
ボタンを押したときに出るHTMLを作成する。
|
1 2 3 4 |
<html> <head></head> <body>Hello うんこ!</body> </html> |
ロジックを含めたい場合はJavaScriptで記述する。
icon.pngの作成
ツールバーの横に表示させるアイコンを作成する。最大で19*19まで。
Chromeで読み込み
- 「設定」→「ツール」→「拡張機能」、またはアドレスバーに「chrome://extensions/」を入力して拡張機能画面に飛ぶ。
- 右上の「デベロッパー モード」を開き、「パッケージ化されていない拡張機能を読み込みます…」を選択。
- 作成したChrome拡張用ファイルの入っているフォルダを選択。
- 作成したアプリが表示される。アプリ名とバージョン番号の横に「（開発中）」が表示されている。
- ツールバーの横のアイコンをクリックしてポップアップが表示されれば成功。
パッケージ化（自分のサイトで配布したりする場合）
- 「設定」→「ツール」→「拡張機能」、またはアドレスバーに「chrome://extensions/」を入力して拡張機能画面に飛ぶ。
- 右上の「デベロッパー モード」を開き、「拡張機能のパッケージ化…」を選択。
- 「拡張機能のルート ディレクトリ」に、作成したChrome拡張用ファイルの入っているフォルダを選択。
- 「秘密鍵ファイル」は、初回は空欄。二回目以降は、前回自動作成されたpemファイルを指定する。
- Chrome拡張（crxファイル）が作成される。「秘密鍵ファイル」を空欄にした場合は、pemファイルも作成される。
Google Chrome 拡張機能 に登録する
- 作成したChrome拡張用ファイルの入っているフォルダ以下のファイルを、一つのzipファイルとして圧縮する。（crxファイルは使用しない）
- Google Chrome 拡張機能にアクセスする。
- 左側の「拡張機能を公開」を選択する。
- zipファイルをアップロードする。
- スクリーンショットや解説文など、各種情報を入力する。
- Publishを選択して公開する。