簡単なChrome拡張機能を1時間で作る（サンプル有り）

## はじめに
最近Chromeの拡張機能を作成したので、作り方をまとめておきます。

## 作ったもの
1日のググった回数を表示する拡張機能です。

![ezgif-1-7cfee2af9f5e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542224/e3fd4856-28d9-d0aa-be40-bd71e0a35d7c.gif)


エンジニアはググった数だけ強くなっていると思います、なので、その日のググった数を簡単に見れる拡張機能を作りました。一応、Chormeの拡張機能ストアに申請はしてあるので使いたい方がいれば、もう少しお待ちいただくか、GithubからCloneしてお使いください(/・ω・)/

https://github.com/motonuko/Googling-history

## この記事のレベル
細かい話は無視してできるだけ基本的なことを書きます。

## Google拡張機能について
### 必要な知識
基本的にはJavascript（+HTML, CSS）が分かれば十分です。

### Google拡張機能の特殊なところ
- `manifest.json`という設定ファイルが必要
- Chrome API( https://developer.chrome.com/extensions/api_index )が使える

`manifest.json`の書き方さえ分かれば、あとはWEBページを作成するのと大差ないかと思います（言い過ぎかも？）

### Google拡張機能の種類
- Browser actions
- Page actions
- Override Pages

の3種類があります。今回作成するのはBrowser actionsです。Browser actionsは簡単に言うと、Chromeの右上辺りにあるボタンを押して動作する拡張機能です。Chrome拡張機能というとこれを想像する人が多いのではないでしょうか↓

<img width="232" alt="スクリーンショット 2020-05-26 15.59.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542224/30fd2ffe-478d-65f6-fb38-d0d1d0b8fa5f.png">

## 実際に作ってみる
###ディレクトリ構造
```
ProjectDir
├── css
│   └── odometer-theme-default.css
├── images
│   └── icon
├── js
│   └── odometer.js
├── manifest.json
├── popup.css
├── popup.html
├── popup.js
```
odometerは数字をアニメーション表示してくれるライブラリです。https://github.hubspot.com/odometer/docs/welcome/

### `manifest.json`の書き方
`manifest.json`はただの設定がjson形式で羅列されているファイルなのでビビる必要はありません。

```json:manifest.json（コピペ用）
{
    "manifest_version": 2,
    "name": "Googling history",
    "description": "Display how many times did you google in a day.",
    "version": "1.0",
    "icons": {
        "16": "images/icon/icon16.png",
        "48": "images/icon/icon48.png",
        "128": "images/icon/icon128.png"
      },
    "browser_action": {
      "default_icon": "images/icon/icon19.png",
      "default_popup": "popup.html"
    },
    "permissions": [
      "history"
    ]
  }
```


```manifest.json（↑の説明）
"manifest_version": 2                                                 //manifestのバージョン。これは「2]で確定
    "name": "Googling history",                                       //拡張機能の名前
    "description": "Display how many times did you google in a day.", //拡張機能の説明
    "version": "1.0",                                                 //拡張機能のバージョン
    "icons": {                                                        //Chromeウェブストアなどで使われるアイコン
        "16": "images/icon/icon16.png",
        "48": "images/icon/icon48.png",
        "128": "images/icon/icon128.png"
      },
    "browser_action": {                                               //ブラウザアクションを使います
      "default_icon": "images/icon/icon19.png",                       //Chromeの右上に出てくるアイコン
      "default_popup": "popup.html"                                   //アイコンを押した時に表示されるhtml
    },
    "permissions": [                                                  //使用するChromeAPIの設定
      "history"                                                       //検索履歴を取得したいので"history"を使う
    ]
  }
```

`manifest.json`の書き方については https://qiita.com/mdstoy/items/9866544e37987337dc79 が詳しいです。

### HTMLファイルなどを用意
これは普通にいつも通り書けば良いです。僕は普段からHTMLなどを書いているわけではないのでコードに冗長なところがあるかもしれません。

```html:popup.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="popup.js"></script>
    <link rel="stylesheet" href="css/odometer-theme-default.css" />
    <script src="js/odometer.js"></script>
    <!-- <title>Title</title> -->
    <link rel="stylesheet" href="popup.css">
</head>

<body>
    <h3>You googled</h3>
    <div class="numDisplay"><h1 id="numOfGoogled" class="odometer" data-theme="default"></h1><h3 class="times">times</h3></div>
    <div>
        <div id="arrowBack"></div>
        <!-- <button>Tweet!</button> -->
        <h3 id="dateLabel"></h3>
        <div id="arrowNext"></div>
    </div>
</body>

</html>
```

```css:popup.css
* {
    margin: 0;
    padding: 0;
}

body {
    width: 150px;
    text-align: center;
    color: #565656;
    margin: 20px 40px;
}

h1 {
    margin: 10px 0;
    font-size: 30px;
}

#arrowBack {
    display: inline-block;
    width: 7px;
    height: 7px;
    border: 2px solid;
    border-color: transparent transparent #565656 #565656;
    transform: rotate(45deg);
    margin-right: 12px;
}

#arrowNext {
    display: inline-block;
    width: 7px;
    height: 7px;
    border: 2px solid;
    border-color: #565656 #565656 transparent transparent;
    transform: rotate(45deg);
    margin-left: 12px;
}

#dateLabel {
    display: inline-block;
    /* font-size: large; */
    margin-bottom: 10px;
    /* background-color:blue; */
}

#numOfGoogled{
    position: absolute;
    left: 20px;
    bottom: 0;
    width: 55px;
    text-align: right;
}

.times{
    position: absolute;
    bottom: 17px;
    right: 25px;
    /* margin-left: 10px; */
}



.numDisplay{
    margin-top: 8px;
    width: 100%;
    height: 50px;
    position: relative;
}
```

```js:popup.js
startOfDay = new Date((new Date()).setHours(0, 0, 0, 0));
window.onload = function () {
    var arrowBack = document.getElementById('arrowBack');
    var arrowNext = document.getElementById('arrowNext');
    var dateLabel = document.getElementById('dateLabel');
    updateDateLabel();


    this.queryNumOfGoogled(startOfDay)

    arrowBack.addEventListener('click', function () {
        startOfDay = new Date(startOfDay.setDate(startOfDay.getDate() - 1));
        queryNumOfGoogled(startOfDay);
        updateDateLabel()
    }, false);

    arrowNext.addEventListener('click', function () {
        startOfDay = new Date(startOfDay.setDate(startOfDay.getDate() + 1));
        queryNumOfGoogled(startOfDay);
        updateDateLabel()
    }, false);

    function updateDateLabel(){
        const monthList = ['Jan.','Feb.','Mar.','Apr.','May','June','July','Aug.','Sept.','Oct.','Nov.','Dec.']
        var month = startOfDay.getMonth() + 1;
        var day = startOfDay.getDate();
        dateLabel.textContent = String(monthList[month] + ' ' + day);
    }
};



function queryNumOfGoogled(startOfDay) {
    var endOfDay_time = new Date(startOfDay).setHours(23, 59, 59, 999);
    chrome.history.search({
        'text': 'www.google.com/search',
        'startTime': startOfDay.getTime(),
        'endTime': endOfDay_time,
        maxResults: 999, 
    },
        function (data) {
            var h1Element = document.getElementById('numOfGoogled');
            h1Element.innerHTML = data.length;
        })
}
```

以上で完成です

## 動かしてみる
chrome://extensions/ に移動して「パッケージ化されていない拡張機能を読み込む」で先ほどのプロジェクトディレクトリを選択すると自分のChromeで動かすことができます。

## 公開する
公開手順はこちらを参考にしてください。
https://support.google.com/chrome/a/answer/2714278?hl=ja

##コード
コードはGithubにあげています。
https://github.com/motonuko/Googling-history