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

#Chrome#Extension#Google

Chrome拡張機能とは

Google Chrome 拡張機能（chrome extension）はChromeに追加できる拡張機能です。 Chromeの右上、アドレスバーの隣に表示されるやつです。   例えばWebページの任意の点のカラーコードを取得するものや、動画の再生速度を変更できるものなどがあります。 ブラウザにchrome://extensions/と打つことで自分の拡張機能を確認できます。 こちらからも確認可能です。   新しい拡張機能はChromeウェブストアで確認できます。 ほとんどは無料です。

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

実はこのChrome拡張機能はHTML、CSS、JavaScriptで構成されます。 これらのファイルが1つの.crxファイルとして圧縮され、ユーザに実際に使われます。   では公式の例を追って理解を深めます。 Hello Extensionsという例を見ます（ダウンロードリンクは切れていました）。

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拡張機能を作ろうと思いましたが、すでにありました！

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

参考