6
4

More than 1 year has passed since last update.

Chrome拡張機能のアップデート直後にだけ特定の処理を走らせたい

Last updated at Posted at 2023-04-15

はじめに

Chrome拡張機能にかかわらず、自身が開発している製品について何らかの仕様変更をリリースする際、
今回のバージョンから仕様変更したから、バージョンアップ直後にだけこの処理を走らせたいな~ということってありますよね。

Chrome拡張機能の開発時に上記をやろうとして、意外と調べるのに時間がかかったのでまとめておきます。

なお、Manifest V3ベースでのChrome拡張機能の作り方は、以下にまとめているので参考にしてください。

実装方法

chrome.runtime.onInstalledを利用します。
https://developer.chrome.com/docs/extensions/reference/runtime/#event-onInstalled

onInstalledという名前ですが、イベント実行時に渡されるオブジェクトの中にあるreasonで更新があったことを判定できます。

reasonがupdateのときのみ処理を実行するようにService Worker(=background.js)に記載します。

具体的な実装はこちら。

manifest.json
{
  ...
  "background" : {
    "service_worker" : "./js/background.js"
  }
}
background.js
chrome.runtime.onInstalled.addListener((details) => {
    if (!(details.reason === "update" && details.previousVersion === "1.0.0")) {
        console.log("対象外バージョンのため終了します");
        return;
    }
    console.log("対象バージョンのため更新処理をかけます");
    ...
});

Chrome拡張機能は、個人利用であれば基本的に自動更新されるはずです。
ただし、Chrome Enterprise/EducationではChrome拡張機能の更新を制御する方法があるので、previousVersionの判定を1つ前だけに固定していいのかは、よく検討した方がよさそうです。

chrome.runtime.onInstalled実行時に渡されるオブジェクトの中身

reason

chrome.runtime.onInstalledの実行理由です。以下のいずれかが入ります。

  • update: この拡張機能が更新された
  • install: この拡張機能がインストールされた
  • chrome_update: Chromeが更新された
  • shared_module_update: この拡張機能が利用している別の拡張機能が更新された

今回利用したのはupdateでしたが、installも初期設定などをしてもらいたいときに使えそうです。

previousVersion

reasonがupdateの場合のみ、更新前のバージョン番号が入ります。manifest.jsonのversion部分です。string型です。

id

reasonがshared_module_updateのときのみ、更新のあったこの拡張機能が利用している別の拡張機能のIDが入ります。

デバッグ方法

1. 拡張機能の管理ページからService Workerビューを検証

拡張機能の管理ページ1 > ビューを検証 > Service Worker をクリックします。

すべての拡張機能の管理ページの場合:
image.png

詳細ページの場合:
image.png

2. manifest.jsonで指定したjsファイルを探し、ブレークポイントを貼る

Service WorkerをクリックするとDev Toolsが起動するので、
ソースタブ > ページタブ > 拡張機能のidディレクトリ > 指定したjsファイル(今回の例だとjs/background.js)
と辿り、ブレークポイントを貼ります。
image.png

3. 拡張機能を更新

拡張機能の管理ページ > 更新ボタンをクリックします。

2で貼ったブレークポイントがchrome.runtime.onInstalled実行直後の行であれば、このタイミングで止まるはずです。

注意点:previousVersionは拡張機能の更新ボタンを押す直前に読み込まれていたバージョンが入る

previousVersionはその名の通り、拡張機能を更新する直前のバージョンを取ってきます。
開発中であれば、それは更新ボタンを押す直前のバージョンとなります。

開発中の場合、同じバージョン内で何度も修正→デバッグを繰り返すために拡張機能の更新を繰り返しますよね?

たとえば

現在のバージョン 1.0.0 に機能追加をすることになった

manifest.jsonのversionを 1.1.0 に書き換えて機能追加

拡張機能を更新ボタンクリック!  <--- previousVersionは 1.0.0

仕様変更

拡張機能を更新ボタンクリック!  <--- previousVersionは 1.1.0

不具合を見つけたので修正・・・

拡張機能を更新ボタンクリック!  <--- previousVersionは 1.1.0

となります。

もしロジックの中でpreviousVersionを 1.1.0 直指定して何らかの判定していると途中で動かなくなりハマる可能性があるので注意しましょう。

余談:アンインストール時に処理を実行させる方法はあるのか?

アンインストール時に遷移させるURLの指定ができました。
アンインストールに伴うサーバーサイドのデータ削除やユーザーフィードバックを得るのに活用できそうです。

おわりに

以上がChrome拡張機能の更新時に処理を実行させるための実装サンプルとデバッグ方法+αでした。
どなたかのお役に立てると幸いです。
記載内容に齟齬があればご指摘ください。

参考資料

  1. chrome://extensions/の一覧、または開発中の拡張機能のアイコン右クリック > 拡張機能を管理をクリックで管理画面へ遷移できます

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4