Google Chrome 拡張機能を開発する -入門 Hello Extensions-

Chrome拡張機能とは

Google Chrome 拡張機能（chrome extension）はChromeに追加できる拡張機能です。 Chromeの右上、アドレスバーの隣に表示されるやつです。

例えばWebページの任意の点のカラーコードを取得するものや、動画の再生速度を変更できるものなどがあります。ブラウザにchrome://extensions/と打つことで自分の拡張機能を確認できます。こちらからも確認可能です。

新しい拡張機能はChromeウェブストアで確認できます。ほとんどは無料です。

入門Chrome拡張機能の開発 Hello Extensions

実はこのChrome拡張機能はHTML、CSS、JavaScriptで構成されます。これらのファイルが1つの.crxファイルとして圧縮され、ユーザに実際に使われます。

では公式の例を追って理解を深めます。 Hello Extensionsという例を見ます（ダウンロードリンクは切れていました）。

What are extensions? - Google Chrome

manifest.jsonの作成

まずmanifest.jsonというファイルを作成します。名前、説明、バージョンをコピペ。コードはこちらからコピペしてください。

browser_actionフィールドを追加します。ここでアイコンとクリックした時のポップアップに表示するhtmlファイルを指定します。（ハイライトが付いていませんが、前段のカンマも忘れないように）

hello_extensions.pngはページからダウンロードできるとのことでしたが、リンクが切れていました。適当なpngファイルを用意してhello_extensions.pngと名付けてmanifest.jsonと同ディレクトリに配置しましょう。今回は適当にgmailのアイコンでも使わせてもらいます。

次にhello.htmlにポップアップに表示する内容を貼り付けます。

これで最低限のChrome拡張機能が完成しました。ローカルで確認しましょう。

Chrome拡張機能の読み込み

ブラウザにchrome://extensionsと打ち込んで拡張機能のページを開きます。ブラウザ右上の3点から開くこともできます。

デベロッパーモードにチェックを入れて、「パッケージ化されていない拡張機能を読み込む」を選択します。ウィンドウが開くので、先ほどのmanifest.jsonなどのファイルが入ったディレクトリ（フォルダ）を選択します。

Hello Extensionsが読み込まれました。

アイコンをGmailにしたのでわかりにくいですが、右に新しいアイコンが追加されました。 before after

クリックするとhello.htmlの内容が表示されました。

Chrome拡張機能のパッケージ化

再度chrome://extensionsを開いて、デベロッパーモードの「拡張機能のパッケージ化」をクリックします。

先ほどのようにディレクトリを指定し、初回は秘密鍵ファイルの欄を省略します。

すると拡張機能のパッケージ化が完了します。

作成したChrome拡張機能のディレクトリと同じ場所に圧縮ファイル（crxファイル）と秘密鍵（pemファイル）がダウンロードされています。

以前まではこのcrxファイルとpemファイルをchrome://extensionsにドラッグ&ドロップすれば先ほど同様に拡張機能の追加ができたそうですが、現在はできないとのこと。これに関して詳しくは次項へ。

Chrome拡張機能の公開に関して

ちょっと前までパッケージ化したアプリも公開できていたみたいですが、できなくなってしまったようです。暗号化できるならAPIキーなどを含んで外部APIと連携したChrome拡張機能なんかも作れるかと思ったのですが。後述しますが、Chrome拡張機能のソースコードは丸見えなので気をつけましょう。詳細はこちら。

また作ったChrome拡張機能をグローバルに公開するには$5.00払ってデベロッパー登録をする必要があるそうです。良さげなのができたら公開してみます。

既存のChrome拡張機能のソースコードを見る

リバースエンジニアリング。 chrome://extensionsを開いてChrome拡張機能のIDを確認します。 IDを確認するにはデベロッパーモードを有効にしている必要があります。

Macなら~/Library/Application Support/Google/Chrome/Default/Extensions/EXTENSION_IDに、 WindowsならUSER_NAME\AppData\Local\Google\Chrome\User Data\Default\Extensions\EXTENSION_IDあるそうです。

Extension一覧

ディレクトリの中身。暗号化はされていないので、見られたら困るようなものを記述しないようにしましょう。

おまけ

勝手に難しいと思い込んでいましたが、さっくり作ることができました。 JavaScript APIも用意されているようです。色々試してみます。ネット生活で不便に思うことが多々ありますが、文句を言わず作って解決したいですね。早速動画を回転するChrome拡張機能を作ろうと思いましたが、すでにありました！

Rotate that Video Player

裏が透けとる。。。

また、こちらのお気に入りのHTML5動画の再生速度を変更できるChrome拡張機能（Video Speed Controller）ではYoutube以外の動画も再生速度を変更できたので、同様に他のサイトでも回転できると思ったんですが、サイトによるみたいですね。もっといいもの作る余地ありです。