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という例を見ます(ダウンロードリンクは切れていました)。

 

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以外の動画も再生速度を変更できたので、同様に他のサイトでも回転できると思ったんですが、サイトによるみたいですね。

もっといいもの作る余地ありです。

 

参考

コメントを残す