More than 1 year has passed since last update.

[Chrome拡張]　Chrome拡張画面でタイマー(定期実行処理)を使用する方法

Last updated at 2023-07-06Posted at 2023-06-20

ManifestV3になり、setTimeoutが使えなくなったので、
Chrome拡張 V3でタイマーを利用する方法をご紹介します。

V3では、setTimeoutの代わりにAlarmsAPIを使用します。
今回は、Chrome拡張画面(menu.html)からのタイマー実行をご紹介します。

contents scriptでのタイマー使用方法はこちらをご覧ください。
[Chrome拡張]　Content Scriptsでタイマー(定期実行処理)を使用する方法

新しく作成したchrome拡張を公開しました。
そこで使用した技術を備忘録として共有できればと思い、記事を書いています。
こちらがそのChrome拡張の記事です。ご興味があれば

こちらは別のChrome拡張の記事です。合わせてどうぞ

用意するファイル

root/
 　├ manifest.json
 　├ menu.html
 　├ js/
 　│　 ├ background.js
 　│　 ├ menu.js
 　│　 └ jquery-3.5.1.min.js
 　└ img/
 　　  ├ icon32.png
  　　 └ icon48.png

menu.html

まずは、Chrome拡張メニューのアイコンをクリックした際に表示させるHTMLページを用意します。
「manifest.json」と同じ階層に「menu.html」と「js/jquery-3.5.1.min.js」、
「js/menu.js」を用意しました。

button#startを押してタイマーを開始、button#stopを押してタイマー停止させます。
div#timeにタイマーのカウントアップを表示します。

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>タイマーテスト</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/menu.js"></script>
  </head>
  <body>
    <button type="button" id="start">開始</button>
    <div id="time" style="display:inline-block; padding:0px 10px;">停止中</div>
    <button type="button" id="stop">停止</button>
  </body>
</html>

menu.js

次に「menu.html」で行われた操作を処理する「menu.js」を「js」フォルダ以下に作成します。
1.開始ボタンを押す。
　chrome.alarms.createでアラームを登録します。
　アラーム通知の周期は最小で1分単位で設定できます。
　今回は、periodInMinutesに1を指定しています。(1分単位)
2.指定した周期でアラームが通知される。
　chrome.alarms.onAlarm.addListenerでアラーム通知を受け取ります。
　引数のalerm.nameがchrome.alarms.createで設定した名前であるか確認します。
3.タイマーをカウントアップする。
4.タイマーを停止する。
　chrome.alarms.clearに止めたいアラームの名前を指定してアラームを止めます。

const ALERT_NAME = "alert_test";
$(function(){
  //「開始」ボタンを押したときに読み出されます。
  $(document).on("click","#start",function(){
    $("#time").text("0");
    //アラームを開始します。
    chrome.alarms.create(ALERT_NAME,{"periodInMinutes":1});
  });
  //「停止」ボタンを押したときに読み出されます。
  $(document).on("click","#stop",function(){
    $("#time").text("停止中");
    //アラームを停止します。
    chrome.alarms.clear(ALERT_NAME);
  });
});
//アラームの通知を受け取る。
chrome.alarms.onAlarm.addListener(function (alarm) {
  if (alarm.name == ALERT_NAME) {
    $("#time").text(Number($("#time").text())+1);
  }
});

manifest.json

AlarmsAPIを使う場合、permissionsに「alarms」を設定します。

{
  "name": "タイマーテスト",
  "version": "1.00",
  "description": "タイマー送信テスト",
  "permissions": ["alarms"],
  "background": {
    "service_worker": "js/background.js"
  },
  "action": {
    "default_icon": {
      "32": "images/icon32.png"
    }
  },
  "icons": {
    "48": "images/icon48.png"
  },
  "manifest_version": 3
}

background.js

Chromeブラウザのツールバーにあるアイコンがクリック時に「menu.html」を
新しいタブで開くためにbackgroundを用意します。
また、拡張機能をインストールしたときに呼ばれるイベントで登録済みのタイマーを消しておきます。

//ツールバーにあるアイコンをクリックしたときに呼ばれる
chrome.action.onClicked.addListener(function(){
  chrome.tabs.create({"url": "menu.html"});
});
//拡張機能をインストールしたときに呼ばれる
chrome.runtime.onInstalled.addListener(function() {
  //登録済みのアラームを全て削除
  chrome.alarms.clearAll();
});