Chromeの拡張機能でタイマーを作ってみました。

地味にずっと欲しかった、タイマー機能。

いくつか公開されている拡張機能で探していたけど、
使いやすそうなものがなかったので、自分で作ることにしました。

1. 何分測るか決めて

2. スタート！

3. 時間になると、お知らせがきます！

思いつきで作ったにしては、いい感じ！

Chrome拡張機能の開発って、
なにか特別な言語を学ばないといけないのかな、、と思っていましたが、

なんと！

設定ファイルである「manifest.json」の書き方がわかれば、
あとは、HTML・CSS・JavaScriptで作れます。

参考サイト
・Chrome拡張の作り方 (超概要)
・Chrome拡張機能の作り方をわかりやすく解説
・Chrome拡張機能 manifest.json Ver.3の書き方

ちなみに、「manifest.json」は、こんな感じに書きます。

{
  "manifest_version": 3,
  "name": "チクタクタスク",
  "version": "1.0",
  "description": "やることと時間を宣言して、タイマーをスタート。時間が来たら通知でお知らせします。",
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon.png"
    }

  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "notifications",
    "storage"
    ]
}

作った拡張機能は、自分で使う分であれば、
デベロッパーモードで、簡単にローカルから読み込めて即実行できます。（よき！）

＜ 実行手順 ＞

1. 拡張機能の管理ページを開き、デベロッパーモードにする。
2. 「パッケージ化されていない拡張機能を読み込む」をクリック。

3. manifest.jsonや、HTML・JavaScriptの含まれたフォルダを選択する。

4. 読み込みが成功したら、拡張機能一覧に追加されているはずです。

簡単！

今回の拡張機能は、Copilotに雛形を作ってもらっています。

こんなふうに頼んだら、いい感じのものを作ってくれたので、
それを参考に機能を追加したり、デザインを調整したりしています。

Chromeの拡張機能をつくりたい。

カウントダウンをしてくれる機能。
5分/10分/15分/20分/30分で設定できる。
カウントが０になったら、画面に終了のメッセージを表示する。

どんなふうに実装したらいい？

まだまだ調整中なので、
実際に使いながら、使いやすいように調整していきます。

本日もありがとうございました！