popup.htmlの作成

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

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

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

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

Bootstrapの設定

CSSのファイルを公式からダウンロード。

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

popup.htmlHTML内に

popup.html

<link rel="stylesheet" href="bootstrap.min.css">

上記を記載するとbootstrapが使用可能になる。

モーダルの作成

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

ここで画面遷移すると何だか野暮ったい感じがしたので、モーダル画面として表示した。
モーダルもbootstrapで反映できるのでこれを参考にしながら作成した。

どうやらこのmodal-bodyに本文を入れたら良さそう。

<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>に記入しているが、保存先はないのでローカルストレージを使って中身の保持を行っていく。
▶︎ローカルストレージとは？

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

ローカルストレージの使い方

公式はこちら

■ストレージへの保存・更新

//使い方
//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});

■ストレージの削除

//ストレージの全削除
chrome.storage.local.clear();

■ストレージの取得・運用

//getで保存した内容を取得する
//resultのところは自分で決めれる。
chrome.storage.local.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

拡張機能の記事リンク

参考記事

【Chrome拡張機能開発入門】設定画面などでBootstrapを使って見栄えを良くする