Google がマニフェスト V2 のサポートを段階的に終了したため、Chrome 拡張機能をマニフェスト V2 からマニフェスト V3 に更新することは開発者にとって重要なステップです。この記事では、元々 Manifest V2 で構築された Pomodoro Timer 拡張機能を、新しい Manifest V3 標準にアップグレードするプロセスについて説明します。

私の話

4 年前に作ったポモドーロ タイマー拡張機能を無料で持っていたのですが、マニフェストを更新する必要があるという通知を Google から受け取りました。

私のポモドーロ タイマーのオリジナル バージョンは私が自分でデザインしたもので、サイクルの終了通知としてティラノサウルスの咆哮が鳴っていました。風変わりで楽しかったです。24 人が使用しているのを見てさらに驚きました。

これは次のようなものです:

妻は最近デザインを学び始めましたが、マニフェストを更新する必要があるため、デザインを更新するように頼みました。結果は記事の最後にあります。ネタバレ: 素晴らしい結果になったと思います。

マニフェスト V3 にアップグレードする理由

Manifest V3 では、Chrome 拡張機能のプライバシー、セキュリティ、パフォーマンスの強化を目的としたいくつかの重要な変更が導入されています。これらの変更には次のものが含まれます:

• サービス ワーカー: バックグラウンド ページはサービス ワーカーに置き換えられます。サービス ワーカーは継続的に実行されないため、より効率的です。
• セキュリティの強化: アクセス許可の範囲が縮小され、ネットワーク リクエストを管理するための declarativeNetRequest API が導入されました。
• パフォーマンスの向上: 拡張機能がブラウザ リソースと対話する方法を最適化することで、V3 はリソース管理の向上を保証します。

ステップ 1: 主要な違いを理解する

アップデートに入る前に、マニフェスト V2 と V3 の間の主な変更点を理解することが重要です。

1. バックグラウンド スクリプト: V2 では、バックグラウンド スクリプトは継続的に実行されました。 V3 では、これらは必要な場合にのみ実行される Service Worker に置き換えられます。
2. 権限: マニフェスト V3 では、すべての権限を明示的に宣言する必要があり、特定の権限は非推奨になるか置き換えられました。
3. API の変更: 一部の API が削除または置き換えられ、拡張機能のさまざまなコンポーネント間のメッセージング システムが更新されました。

ステップ 2: マニフェスト ファイルの更新

ポモドーロ タイマー拡張機能用に、manifest.json ファイルを V2 から V3 に更新する方法は次のとおりです:

オリジナルのマニフェスト V2 例:

{
  "name": "Pomodoro Clock",
  "version": "1.1.0",
  "description": "Simple background timer for productivity",
  "manifest_version": 2,
  "permissions": ["storage"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "options_page": "options.html"
}

更新されたマニフェスト V3 の例:

{
  "name": "Pomodoro Timer & Focus Clock",
  "version": "2.0.1",
  "description": "Boost productivity with this simple Pomodoro timer. Focus on tasks, minimize distractions, and manage your time effectively.",
  "manifest_version": 3,
  "permissions": ["storage","notifications","alarms"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

マニフェストの主な変更点:

バックグラウンド スクリプト:

• V2: "背景": {"スクリプト": ["background.js"]}
• V3: "背景": {"service_worker": "background.js"}

V3 では、バックグラウンド スクリプトは Service Worker に置き換えられます。 Service Worker は必要な場合にのみ実行されるため、リソース効率が向上します。

アクションとブラウザ アクション:

• V2: "browser_action": { ... }
• V3: "アクション": { ... }

browser_action は action に置き換えられ、機能が統合され、マニフェストが簡素化されました。

ステップ 3: Service Worker を使用するようにバックグラウンド スクリプトを更新する

私の拡張機能はバックグラウンドで単純な setInterval() を使用していましたが、Service Worker ではこの動作は機能しません。ブラウザのリソースを節約するために、必要な場合にのみ実行されるためです。

私の場合、タイマーを変更してタイムスタンプをストレージに保存し、アラームを使用して通知呼び出し元のトリガー コードの実行をスケジュールする必要がありました。

そしてもちろん、クロームの組み込み通知を使用して通知を送信し、迷惑なティラノサウルスの後部を取り除きました。私の拡張機能を初期のユーザーが読んでいたら、本当に申し訳ありません。

具体的すぎるため、ここにはコード例はありません。

結論

結果は次のとおりです。かなりかっこいいと思います。ミニマルで使いやすい

アップデートはそれほど難しくありませんでした。主なことは古いバックグラウンド スクリプトとサービス ワーカーの違いを理解することですが、アラームには注意してください。テスト中に Chrome を数回クラッシュさせることさえできました。

更新されたポモドーロ タイマー & フォーカス クロック拡張機能をぜひお試しください。更新がうまくいくよう頑張ってください!