定期的に処理を実行する拡張機能_Edge

ブラウザ拡張機能をつくっていて、定期的に処理を実行したい時の方法に苦労したのでまとめておきます。
content_scriptsだけではなくて、background/service_workerも必要なので、この通信のやり取りをするのに悩みました。

拡張機能

マニフェスト

ブラウザはEdgeを使用。
マニフェストはv3。
検索するとv2の情報が多いけど、現在はv3じゃないとダメ。
permissionsに、今回使うAPIのalarmsとtabsを追加。

v3への移行について
https://developer.chrome.com/docs/extensions/develop/migrate?hl=ja

manifest.json

{
    "name": "ExtentionEdge",
    "description": "定期実行する拡張機能",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": [
        "alarms",
        "tabs"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "js": [
                "content_scripts.js"
            ]
        }
    ]
}

バックグランド

ブラウザを起動したらずっと動いているので、ここで定期的に処理するきっかけをつくる。

background.js

// 拡張機能をインストールした時にアラームを設定
chrome.runtime.onInstalled.addListener(function () {
  chrome.alarms.clear("Reminder");
  // 5分周期
  chrome.alarms.create("Reminder", { periodInMinutes: 5 });
});

// 設定した周期でアラームが呼ばれる
chrome.alarms.onAlarm.addListener(function (alarm) {
  // 指定タイトルがある時にcontent_scriptsを呼ぶ
  // 対象にするタブを開いていなかったら何もしない
  chrome.tabs.query({ title: "対象タブの名前" }, function (tabs) {
    if (tabs[0] !== undefined) {
      chrome.tabs.sendMessage(tabs[0].id, "").catch((error) => {
      });
    }
  });
});

コンテンツ

実行したい事はここに書く。

content_scripts.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  // ここでそのタブに対しての処理
  // console.log("よびだしました！" + new Date());
});

つまずきポイント

• アラームの設定
  なぜかエラーがでるなと思ったら、色んなアラームを設定してしまっていた。
  下記で解決できた。

  全てのアラームを消す.js

  chrome.alarms.clearAll()
  

  設定されているアラームを確認する.js

  chrome.alarms.getAll((alarms) => {
  for (var alarm of alarms) {
    console.log(alarm.name);
  }
  });
  

• Mozillaのサイトの方が説明豊富
  ChromeのAPIリファレンスとか見ていたのですが、Mozillaの方がそれぞれのメソッドに対しての具体例が多かったのでMozillaのサイトが参考になりました！
  alarmsのAPIはほとんど同じようになっているはずです。
  chrome.alarmsとbrowser.alarmsという所は違う

参考

• https://qiita.com/doran/items/2620b2c8f2ac2c5548b6
• https://developer.chrome.com/docs/extensions/reference/api/alarms?hl=ja
• https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/alarms
• https://developer.chrome.com/docs/extensions/develop/migrate?hl=ja