マニフェスト Vo VA から Chrome 拡張機能を更新する方法 ポモドーロ タイマーの例を使用したステップバイステップ ガイド

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

私の話

4 年前に作成した Pomodoro Timer 拡張機能を無償で使用していましたが、マニフェストを更新する必要があるという通知を Google から受け取りました。

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

これは次のようになります:

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

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

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

• Service Worker: バックグラウンド ページは Service Worker に置き換えられます。Service Worker は継続的に実行されないため、より効率的です。
• セキュリティの強化: アクセス許可の範囲が縮小され、ネットワーク リクエストを管理するための 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 を数回クラッシュさせることさえできました。

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

以上がマニフェスト Vo VA から Chrome 拡張機能を更新する方法 ポモドーロ タイマーの例を使用したステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。