Chrome拡張機能の開発 その1：拡張機能の基礎

# この記事について
この記事はChrome拡張機能の公式ページを~~わかる部分だけ~~日本語に翻訳しながら補足を追記したものである。なお、筆者の英語力はお察しなのでご注意を。
引用元（公式）：https://developer.chrome.com/extensions  

関連する次の記事は以下。本記事（その１）ではまずは手を動かして動くものを作る、そしてその２で概要を学ぶ、という流れとなる。

Chrome拡張機能の開発 その1-1：概要編
https://qiita.com/gtracker64/items/4a6b0ffca3935a90d4d3

# 拡張機能の基礎
## 拡張機能とは？
* ブラウザの機能をカスタマイズ（拡張）することができる小さなプログラムのこと。
 * プログラムはHTML、JavaScript、CSSなどのWeb技術に基づいて構成される。
* 拡張機能はシンプルな単一の目的を持つ必要がある。
 * ただし、目的がひとつであれば複数のコンポーネントと機能を含めても良い。
* 拡張機能を構成するファイル群は`.crx`というひとつのパッケージに圧縮され、ユーザがそれをダウンロード＆インストールする。
* 拡張機能はChromeデベロッパーダッシュボードを介して配布され、Chromeウェブストアにて公開される。

## Hello Extensions (クイックスタート)
ここでは簡単な拡張機能を開発、Chromeに追加する。いわゆる"Hello World"のChrome拡張機能版である。開発する拡張機能の仕様は以下の通り。  

* Chrome右上に拡張機能ボタンを追加し、そのボタンを押すと"Hello Extensions"というポップアップ画面を表示する。
* 画面表示中にキーボードの`Ctrl+Shift+F`ボタンを押しても同様のポップアップ画面を表示する。

![スクリーンショット_2018-01-21_2_52_09.png](https://qiita-image-store.s3.amazonaws.com/0/100776/a1b7994d-4a31-b15e-aab2-6d26f2b9335b.png)

### マニフェストファイルの作成
まずは適当な場所に作業用のディレクトリ(ここでは`hello-extensions`)を作成する。
以降このディレクトリを作業用ディレクトリと呼び、このディレクトリ以下で作業を行う。
次に作業用ディレクトリ直下にマニフェストファイル=`manifest.json`を作成する。

```:ディレクトリ構成
hello-extensions/         作業用ディレクトリ
└── manifest.json         マニフェストファイル
```

```json:manifest.json
 {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2
  }
```
全ての拡張機能には上記のマニフェストファイルが必須となる。
ただし、前述のマニフェストファイル内の項目だけでは機能しないので、ここでは`"browser_action"`フィールドを追加する。なお、`"browser_action"`内にてポップアップ表示用ページ(.html)と、拡張機能のアイコン(.png)のパスを指定している。

```json:manifest.json
 {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }
  }
```
### ポップアップ表示用ページとアイコンの配置

前の手順で設定したポップアップ表示用ページ(.html)とアイコン(.png)を実際の作業用ディレクトリに配置する。配置後のディレクトリ構成は以下となる。

```:ディレクトリ構成
hello-extensions/         作業用ディレクトリ
├── hello.html            ポップアップ表示用ページ
├── hello_extensions.png  アイコン(ここでは48x48ピクセルを利用)
└── manifest.json         マニフェストファイル
```

```html:hello.html
<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>
```

アイコン(.png)は以下をダウンロードし、名前を`hello_extensions.png`に変更すれば良い。
このアイコンは48x48ピクセルのPNG形式の画像である。
![hello_extensions.png](https://qiita-image-store.s3.amazonaws.com/0/100776/19b3a919-4265-596a-9110-40edb4fe1646.png)

ここまでの設定で右上の拡張機能ボタンを押下すればポップアップで`hello.html`が表示されるものができあがった。次のステップではキーボードショートカットによりポップアップ用ページを表示するコマンドをmanifest.jsonに含める。このステップは最低限のChrome拡張機能を開発する上では必須でない。

### キーボードショートカットの設定（オプション）

下記の通りマニフェストファイルに`"commands"`フィールドを追加する。
コマンドの内容：`Ctrl+Shift+F`が押された時に`"browser_action"`を実行(execute)する。

```json:manifest.json
{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}
```

### 拡張機能のインストール（ローカル環境）

最後に作成した拡張機能ファイルをローカル環境のChromeにインストールする。手順は次の通り。

1. Chromeの拡張機能ページ[chrome://extensions](chrome://extensions)を開く。  
（Chrome右上の設定ボタンから"その他のツール">"拡張機能"でも開くことができる。）
2. *"デベロッパーモード"*にチェックを入れる。
3. *"パッケージ化されていない拡張機能を読み込む..."*ボタンを押下する。
4. ディレクトリ選択画面が表示されるので作業用ディレクトリ`hello-extensions`を選択する。

![スクリーンショット_2018-01-21_3_01_35.png](https://qiita-image-store.s3.amazonaws.com/0/100776/9ba5cb11-16cd-c25d-fb4d-d30b1591bbb2.png)


### 動作確認
拡張機能の読み込みが完了していれば、Chromeの右上にアイコン`hello_extensions.png`が表示されているだろう。右上のアイコンをクリックするとポップアップ表示用ページ`hello.html`が表示される。また、`Ctrl+Shift+F`を押しても同様にポップアップが表示される。

![スクリーンショット_2018-01-21_2_52_09.png](https://qiita-image-store.s3.amazonaws.com/0/100776/a1b7994d-4a31-b15e-aab2-6d26f2b9335b.png)

以上でChrome拡張機能の基本は終了。
本記事ではマニフェストファイル内の各項目の意味、詳細については触れていないが、公式ページに沿って追々確認していきたい。