Chrome拡張は作るもの

Chromeおすすめ拡張〇〇選！で摩耗しているみなさんこんにちは。
そしてようこそ、Chrome拡張作成空間へ。

## Chrome拡張にひつようなもの

- 作るもの
    - manifest.json（設定ファイル）
    - jsファイル
    - htmlファイル（ポップアップ画面出す場合必要）
    - imgファイル（アイコン用、任意）
    - cssファイル（見た目用、任意）
- どこかから持ってくるもの
    - GoogleChrome

## 作っていく

### manifest.jsonについて

[リファレンス](https://developer.chrome.com/extensions/manifest)をみた方がいいです。

とりあえず以下は必須です。

``` json
{
  "manifest_version": 2,
  "name": "（なまえ）",
  "version": "（0.1、、、など）",
}
```


その他は必要に応じて記載します。

今回は

- permissions
    - 拡張機能に干渉を許可するオブジェクトのリスト
- content_scripts
    - dom操作まわりの指定
- browser_action
    - ブラウザに対する動作まわりの指定

を使用しました

実装する機能としては

・自動書き込みを行いたいサイトへ行く
・ツールバーの拡張機能アイコンをクリック -> ポップアップ画面が表示される
・画面上からファイル選択ボタンをクリック -> ファイル選択ダイアログが表示される
・形式通りに書かれたテキストファイルを選択
・フォームに書き込まれる
というものを実現します。

ユーザ登録とか、毎回面倒なのでこれをブラッシュアップして楽にしたい

テキストファイルの形式はこんな感じです
改行と'='で分けます

```
name=testboy
email=aaa@example.com
tel=0123456789
password=QWERasdf123!
```

ポップアップ画面を作ります

``` html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pop</title>
</head>
<body>
<input type='file' id="reader" />
<script src="js/main.js"></script> 
</body>
</html>
```

ポップアップ画面の処理を書きます

```javascript
// domが読み込まれたら発火する用のリスナ
document.addEventListener('DOMContentLoaded', function() {
// #readerの変更で発火する用のリスナ
  document.getElementById('reader').addEventListener('change', function(e) { 

    // ファイルの内容を読み込む宣言
    var file = e.target.files
    var reader = new FileReader()
    reader.readAsText(file[0])

    // 読み込まれたら起動
    reader.onload = function(ev) {
        // 読み込んだファイルの中身を処理するjsへsend
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, reader.result)
      })
    }
  })
})

```

開いているページに行う処理を書きます

``` javascript
// messageがsendされてきたら発火する用のリスナ
chrome.runtime.onMessage.addListener(function(msg) {
    // msgは読み込んだファイルの生データ

    // 改行で分割し、さらに'='で分割
    // '='の前がkey, 後がvalueとなる、'='が複数あった場合は考慮しない
    const insertObj = {}
    msg.split('\n').forEach(v => (insertObj[v.split('=')[0]] = v.split('=')[1]))

    Object.keys(insertObj).forEach(v => {
        // keyの名前と同じ'name'属性を持つフォームを探し、ある場合は書き込む
        const element = document.getElementsByName(v)
        element.length && (element[0].value = insertObj[v])
    })
    return true // いらないかも
})

```

manifest.jsonに使うファイルなどの情報を記載します

```json
{
  "name": "Insert",
  "manifest_version": 2,
  "version": "0.0.1",
  "permissions": [
    "tabs" 　　　　　　　　　　　　　　//tabへの干渉を許可している
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],  // 全てのURLで動作
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_popup": "foreground/popup.html" // ポップアップ用ファイルの指定
  }
}

```

ディレクトリ構成はこんな感じ

```

/
├ manifest.json
├ content.js          -- 開いているページを操作するjs
└ foreground/
  ├ popup.html
  └ js/
     └ main.js        -- popupを操作するjs

 
```

んで、できあがったらchrome://extensions/を開いて、右上のDeveloper modeをONに、左隅のLoad unpackedからディレクトリを指定して読み込めば拡張機能がインストールされます！簡単！！

うごいているところ

![gif12s.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426991/4708e8d9-980e-748e-65b3-3dc19b9667ad.gif)

## やってみて

結構ハードルは低めでした
foreground以下は開いたときに読み込まれるので、コードを変えても開き直せば再インストール不要で結構トライ＆エラーしやすかったです。
manifestとbackground周りは再インストールが必要っぽいです。
スーパーリロードでもダメでした

以上