members

members

Chrome拡張機能の作り方

Tweet

ふだんからChromeを使う方なら、ブラウザの拡張機能を使っている方も多いと思います。
そんな拡張機能ですが、実はこの拡張機能、おなじみのHTML、CSS、JavaScriptといったWebのプログラミング言語で作ることができます。
今回は、拡張機能の概略を解説し、実際に簡単な拡張機能を作ってみたいと思います。

拡張機能の種類

拡張機能には大きく分けて3種類あります。

  1. Browser actions
  2. Page actions
  3. Override Pages

開発には直接関係ありませんが、それぞれの特徴を理解しておくと開発がちょっとだけ捗ります。

Browser actions

アドレスバーの右側にボタンが表示されます。
常にボタンが有効になっており、特定のWebページを対象としない拡張機能になります。

Page actions

Browser actions と同様に、アドレスバーの右側にボタンが表示されますが、Page actionsは特定のURLやWebページ内に特定の要素が存在する場合のみ有効になり、それ以外ではグレーアウトされて使用することができません。

Override Pages

Override Pagesは他の拡張機能とは異なり、Chromeが通常提供してる下記3つのページを代替HTMLファイルに置き換える機能です。

  1. ブックマークマネージャー
  2. 履歴
  3. 新しいタブ

つまり、Override Pagesは「新しいタブ」ページをカレンダーやメモ帳に置き換えるといったことができます。

※拡張機能1個につき1種類のページしか置き換えられません。
例えば「新しいタブ」と「履歴」ページを置き換えたい場合は、それぞれ別の拡張機能を使いましょう。

用意するツール

  • エディタ

ふだん使っているエディタのみで作ることができます。
特別な開発環境は必要ありません。

構成ファイル

  • HTML
  • CSS
  • JavaScript
  • Image
  • manifest

※この5つのファイルで拡張機能を構成しますが、すべてを必要としないケースもあります。

作り方

ここからは実際に拡張機能を制作してみようと思います。
今回は最もポピュラーな「Browser actions」で、初心者のプログラマらしく「Hello World」をポップアップさせてみます。

ディレクトリ構成

ディレクトリ構成は上記のようになります。
それぞれのファイルの役割は下記になります。

manifest.json

拡張機能の設定ファイルです。(注:ファイル名を変更すると読み込まれません)
ここで拡張機能の名前やバージョン、読み込むファイルを設定します。

hello.html

拡張機能のアイコンをクリックすると下に表示されるポップアップの中身です。
今回はそのまま使用しますが、一般的なHTMLと同じでCSSでレイアウトを装飾できます。

各種アイコン画像

拡張機能のアイコンです。
サイズは16×16、48×48、128×128があると良いですが、どれか1つでも問題ないです

作業用ディレクトリとmanifest.jsonファイルの作成

まず、ローカルドライブに作業用ディレクトリを制作します。
今回はextensionsというディレクトリを作成し、その中に必要なファイルをまとめます。
manifest.jsonは必ず作業用ディレクトリの直下に置いてください。

manifest.jsonの記述


マニフェストファイル自身のバージョンです。
現在はバージョン2を指定します。
※バージョン1はChrome18で廃止されました。


拡張機能の名称です。45文字まで設定できます。


拡張機能のバージョンです。
1~4つの数字をdotで区切り、バージョンを設定します。
例:1.0.0.0
※0以外の数値の前に0をつけることができないので、1.02.0.0のような数値は設定できません。
※区切りが4つ未満のとき、足りない部分には自動的に0が入ります。
例:1.0→1.0.0.0


拡張機能の説明文です。必須ではありません。


拡張機能のアイコンです。
Chromeウェブストアやファビコンで使用されます。
画像サイズは、3種類(16×16、48×48、128×128)用意します。
Chromeウェブストア、拡張機能管理ページ、拡張機能のページにファビコンに適したサイズが使用されます。
画像フォーマットは、透過処理に対応したpngが推奨されています。
※指定の際は画像のパスに気をつけてください。


ブラウザアクションの拡張機能を開発する際に記述します。
今回はポップアップを表示させたいので、後述するポップアップ用のHTMLとアイコン画像のみを読み込みます。

ポップアップ用のHTML作成

ポップアップで表示されるHTMLを制作します。

これで制作は完了しました。
最後に今回制作した拡張機能をChromeに適用します

Chromeへの適用方法

下記の手順で、制作したファイルを読み込ませれば完了です。

  1. その他のツール
  2. 拡張機能
  3. デベロッパーモードをON
  4. パッケージ化されていない拡張機能を読み込む
  5. 制作ディレクトリを選択

まとめ

Chrome拡張機能は、ルールと手順を覚えてしまえば、馴染み深いHTML/CSS/JSで誰でも手軽に作れます。

今回は、ポップアップでHello World!を表示するという単純なものでしたが、今後は実用性に富んだ拡張機能に挑戦し、業務や趣味で便利に活用していきたいと思います。

コラム執筆者

細川 太輔

BU4-AS11所属
好きなChromeの拡張機能はPastyとOneTabです。

カテゴリ: Webサイト構築
2019年08月29日