【Google Chrome】拡張機能の作成方法を分かりやすく解説してみた Part. 2

#準備
前回は**"manifest.json"**を作成し、Chromeで確認した所で終わっていましたね。今回は**スクリプト（純正JavaScript）**も作成していきます。では、前回の**"example_extension"**フォルダを開いて下さい。

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989394/09a08721-9ce5-d06d-0abe-5a7f5f7973e6.png)
**background.js** //名称通りバックグラウンドで動作するスクリプトです
**"example_extension"**フォルダ上に作成して下さい。

自作拡張機能を追加した際にログを表示させるコードを**background.js**に書き込みます。しかし、このままでは**background.js**が認識されないので**manifest.json**を開き、下記の内容を追加して下さい。

```json:manifest.json
{
    
    "name": "example_extension",
    "version": "1.0",
    "description": "hoge",
    "manifest_version": 2 ,

    "permissions" : ["storage" , "declarativeContent"] ,
    "background" : {
      "scripts" : ["background.js"]
    }

}
```
(新) **"permissions"** //付与する権限を指定します
(新) **"background"** //バックグラウンドで動作するスクリプトの指定
#作成
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989394/b386984e-2496-f46c-db6a-b13859ad552e.png)

作成した**background.js**ファイルをエディタで開き、下記のコードを入力して下さい。

```javascript:background.js
(function(){
    //拡張機能インストール時に実行されるメソッド
    function onInstall(){
        console.log("hoge");
    }
    //chrome.runtime.onInstalledイベントに
    //ラムダ式を使用してonInstall()をトリガーします
    chrome.runtime.onInstalled.addListener( () => {
        onInstall();
    });
})();

```
終わったら保存してGoogle Chromeで動作チェックしてみましょう！
Chromeを開き、URLの欄に**chrome://extensions**と入力してください。
拡張機能の一覧が出てくるので、前回と同じ様に右上の**デベロッパーモード**を有効にし、**パッケージ化されていない拡張機能を読み込む**をクリックしてください。

エクスプローラが出現するので**"example_extension"**フォルダーを選択し、読み込ませます。
今回はログが出力されているか確認するので、下の画像の下線が引かれている所をクリックしてください。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989394/c54ae329-8e84-427c-5068-910f4d807dfc.png)
するとChromeのデバッグツールが出現し、Console上に**hoge**と出力されていることが確認出来ると思います。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989394/6a11ebac-d8b0-aabe-2b9d-8506cd0fb2df.png)
成功しましたね。でもこれじゃ寂しすぎるので次は拡張機能っぽく右上の拡張機能のアイコンをクリックした時に出てくるポップアップも作成してみましょう！
今度は**popupdayo.html**という名称のファイルを**"example_extension"**フォルダ上に作成して下さい。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989394/1ac77dab-0f3e-2f04-5a04-3369dcafffe3.png)
hogedayoと表示させてみましょう
エディタで**popupdayo.html**を開いて下記の内容を入力して下さい。

```html:popupdayo.html
<!DOCTYPE html>
<html>
    <body>
        <h1>hogedayo</h1>
    </body>
</html>
```

終わったら次は**manifest.json**に、**popupdayo.html**を指定させてあげます。

```json:manifest.json
{
    
    "name": "example_extension",
    "version": "1.0",
    "description": "hoge",
    "manifest_version": 2 ,

    "permissions" : ["storage" , "declarativeContent"] ,
    "background" : {
      "scripts" : ["background.js"]
    } ,

    "browser_action" : {
      "default_popup" : "popupdayo.html"
    }

  }
```

(新) **"browser_action"** 右上バーのアイコンやツールチップ、ポップアップ等のアクション
(新) **"default_popup"** ポップアップした際に表示するデフォルトHTMLファイルの指定

入力し終わったら、先程の手順でもう一度拡張機能のテストをしてみましょう！
#実行
**"example_extensions"**を読み込ませ、自身の拡張機能アイコンをクリックしてみると...
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989394/a48728d6-bcb8-672a-2ecf-d5e80c79025e.png)
表示されましたね！(´・ω・`)
ひとまずここで終了です。お疲れ様でした( ^^) _旦~~

Chrome拡張機能APIリファレンスのリンクを貼っておくので、ｋｗｓｋの方は下記リンク
https://developer.chrome.com/docs/extensions/reference/