🔰JS初心者が作るGoogle extension V3 ② -popup.htmlの作成-

前回の続き　→ [🔰JS初心者が作るGoogle extension V3 ①](https://qiita.com/mmaumtjgj/items/6538fd8814d93e9d7fa6)

完成した作品は　→　[こちら🐕](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## popup.htmlの作成
マニフェストファイルを設定したので、今回はツールバーの横にあるアイコンクリックした時に出るpopup画面を作る。

マニフェストファイル内に
``"default_popup": "html/popup.html"``
と指定したので、同様に``html/popup.html``を作成する。

今回は簡単に見栄えを綺麗にしたいので、``bootstrap``を導入しました。

通常のウェブサイトであれば
``<link rel="stylesheet" href="〜〜">``とのような形で
CSSやJSを参照するだけで良いのだが
Chrome拡張機能の場合はセキュリティの関係上、簡単に外部サーバーからのファイルを参照することができないので、ローカルでBootstrapのファイルを読み込む必要がある。

### Bootstrapの設定
[CSSのファイル](https://getbootstrap.com/docs/4.4/getting-started/download/)を公式からダウンロード。

CSSフォルダ内にある、``bootstrap.min.css``ファイルを
Chrome機能拡張で開発中のフォルダにコピー

``popup.html``HTML内に
```popup.html
<link rel="stylesheet" href="bootstrap.min.css">
```
上記を記載するとbootstrapが使用可能になる。

## モーダルの作成
bootstrapの設定が完了したので、早速html内にコードを入力していく。
popup画面を開いた時に、タイマー作成をしたいので、タイマー作成ボタンを追加する。

ここで画面遷移すると何だか野暮ったい感じがしたので、モーダル画面として表示した。
モーダルもbootstrapで反映できるので[これ](https://getbootstrap.jp/docs/5.0/components/modal/#static-backdrop)を参考にしながら作成した。

どうやらこの``modal-body``に本文を入れたら良さそう。
```html
<div class="modal-body">ここに本文</div>
```
この本文内に、タイマーを作成するフォームを入れました。

```popup.html
<div class="modal-body">
    <form class="row" name="timerForm">
          <div class="col-6 mb-3">
               <label class="form-label">繰り返し(回)</label>
               <input type="number" class="form-control" name="repeat_time" id="repeat_time_value" required>
           </div>

            <div class="col-6 mb-3"></div>

            <div class="col-6 mb-3">
                 <label class="form-label">集中時間(分)</label>
                 <input type="number" class="form-control" name="work_time" id="work_time_value" required>
             </div>

              <div class="col-6 mb-3">
                   <label class="form-label">休憩時間(分)</label>
                   <input type="number" class="form-control" name="interval" id="interval_value" required>
              </div>

              <div class="col-8 mb-3">
                   <label class="form-label">キャラクター</label>
                   <select class="form-select" id="character" disabled>
                      <option value="pome" selected>ポメラニアン</option>
                    </select>
              </div>

              <div class="modal-footer">
                <input class="make_timer_btn" type="button" id="makeTimerBtn" data-bs-dismiss="modal" value="設定" required></input>
              </div>
      </form>
</div>
```

``<form>``に記入しているが、保存先はないので``ローカルストレージ``を使って中身の保持を行っていく。
▶︎[ローカルストレージとは？](https://call.omnidatabank.jp/blog/localstorage/)

イメージで言うと
・ローカルストレージに、25分/5分 をそれぞれに秒換算にして保存。
・保存した秒数を1秒ずつ減らし再度保存。
・残り◯秒のviewを表示する箇所としても使う。

## ローカルストレージの使い方
公式は[こちら](https://developer.chrome.com/docs/extensions/reference/storage/)

■ストレージへの保存・更新
```js
//使い方
//keyの場所は自由に名づけて良い
chrome.storage.local.set({key: value});

//例:25分　と　5分を保存
chrome.storage.local.set({work_time: 25});
chrome.storage.local.set({interval: 5});　

//更新する際はkeyを指定してvalueを変更すればOK
chrome.storage.local.set({work_time: 20});
```
■ストレージの削除
```js
//ストレージの全削除
chrome.storage.local.clear();
```

■ストレージの取得・運用
```js
//getで保存した内容を取得する
//resultのところは自分で決めれる。
chrome.storage.local.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});
```
## 拡張機能の記事リンク
[🔰JS初心者が作るGoogle extension V3 ①](https://qiita.com/mmaumtjgj/items/6538fd8814d93e9d7fa6)
[🔰JS初心者が作るGoogle extension V3 ② -popup.htmlの作成-](https://qiita.com/mmaumtjgj/items/ef7bf1116988bfeedd84)
[🔰JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理-](https://qiita.com/mmaumtjgj/items/0a9e73058727b101579b)
[🔰JS初心者が作るGoogle extension V3 ④ -タイマーを表示させる-](https://qiita.com/mmaumtjgj/items/6e1a978656580dab59d7)
[🔰JS初心者が作るGoogle extension V3 ⑤ -スタート/ストップ/リセットの各ボタン機能-](https://qiita.com/mmaumtjgj/items/d15df85bcb9dcf31d87d)
[🔰JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-](https://qiita.com/mmaumtjgj/items/d8083ac9576ea9dbe123)
[🔰JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理-](https://qiita.com/mmaumtjgj/items/abd7f4f3f63624dec6f9)
[🔰JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-](https://qiita.com/mmaumtjgj/items/6b638388e7c39b2863f4)
[🔰JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-](https://qiita.com/mmaumtjgj/items/2c2e117d31db69adb825)
[🔰JS初心者が作るGoogle extension V3 ⑩ -popupのポモドーロタイマーの処理-](https://qiita.com/mmaumtjgj/items/5e80fa8fca2fa51b7445)
[🔰JS初心者が作るGoogle extension V3 ⑪ -content.jsの処理-](https://qiita.com/mmaumtjgj/items/cae1ae8e2869e8414567)

## 参考記事
[【Chrome拡張機能開発入門】設定画面などでBootstrapを使って見栄えを良くする](https://note.com/masarusuzuki/n/n68f419e2cc29)