Chrome拡張機能のv3をマニフェストする方法

最近、私のクライアントの1人が「時代遅れ」だったため、私の拡張機能を拒否しました。マニフェストV3オンラインに関する情報が不足しており、理解することは困難です。

いくつかの努力の後、私はついにタスクを完了しましたが、研究結果を無駄にしたくなかったので、学習経験を共有することにしました。

マニフェストv3移行の重要性

Manifest v3は、Chrome拡張機能がブラウザと対話する方法を管理する現在のAPI Manifest V2の後継者であるChromeのGoogleのAPIです。 Manifest V3は、拡張機能のルールに大きな変更を加えました。その一部は、使用に慣れているV2の新しい柱になります。

マニフェストv3の移行は次のように要約できます。

2018年以来、移行が進行中です。
マニフェストv3は、2023年1月に正式に発売を開始します。
2023年6月までに、Manifest V2を実行している拡張機能は、Chrome Webストアでは利用できなくなります。
3. マニフェストv3で導入された新しいルールに準拠していない
拡張機能は、最終的にChrome Webストアから削除されます。

Manifest V3の主な目標の1つは、ユーザーセキュリティを改善し、全体的なブラウザエクスペリエンスを改善することです。以前は、多くのブラウザー拡張機能がクラウドベースのコードに依存していたため、拡張機能が危険であるかどうかを評価することは困難でした。 Manifest V3は、拡張機能が実行されるすべてのコードを含めるように要求し、Googleがそれらをスキャンして潜在的なリスクを検出できるようにすることにより、この問題を解決するように設計されています。また、ブラウザに実装できる変更について、Googleから許可を要求することを強制します。

Googleの移行に追いつくことが重要です。これは、ユーザーセキュリティと全体的なブラウザエクスペリエンスを向上させるために設計された拡張機能の新しいルールを導入し、これらのルールに準拠していない拡張機能が最終的にChrome Webストアから削除されるためです。

要するに、可能な限り迅速に移行しないと、Manifest V2を使用する拡張機能を作成するためのすべての努力が無駄になります。

マニフェストv2とv3

の間の重要な違い

2つの間には多くの違いがありますが、Chromeの「Manifest V3」ガイドを読むことを強くお勧めしますが、ここにキーポイントの簡単な要約があります。

1. マニフェストv3では、サービスワーカーがバックエンドページを置き換えます。
2. ネットリクエストの変更は、新しいdeclarativenetRequest APIを使用して、マニフェストv3で処理されます。
マニフェストv3では、拡張機能はパッケージに含まれるJavaScriptコードのみを実行でき、リモートマネージドコードを使用できません。
マニフェストv3は、多くの方法の約束のサポートを導入しますが、コールバックは代替として依然としてサポートされています。
4. マニフェストV3のホスト権限は別の要素であり、「host_permissions」フィールドで指定する必要があります。
5. マニフェストv3のコンテンツセキュリティポリシーは、マニフェストv2の文字列ではなく、メンバーが代替コンテンツセキュリティポリシー（CSP）コンテキストを表すオブジェクトです。
Webページの背景を単に変更するChrome拡張機能のリストでは、次のようになる可能性があります。

上記のタグのいくつかが奇妙に見える場合は、読み続けて知っておくべきことを学びます。

<code>// Manifest V2
{
  "manifest_version": 2,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "optional_permissions": ["<all_urls>"]
}</all_urls></code>

<code>// Manifest V3
{
  "manifest_version": 3,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "host_permissions": [ "<all_urls>" ]
}</all_urls></code>

移行する方法v3

をマニフェストする方法

V3を4つの重要な領域にマニフェストする移行を要約しました。もちろん、古いマニフェストV2から実装する必要がある新しいマニフェストV3には多くの新機能がありますが、これらの4つの領域を変更すると、最終的な移行のためにクロム拡張機能が準備されます。

4つの重要な領域は次のとおりです

リストの基本構造を更新します。

ホスト権限を変更します。

1. コンテンツセキュリティポリシーを更新します。
2. ネットワーク要求処理を変更します。
これらの4つの側面を通じて、リストの基本的な要素は、v3をマニフェストするために移行する準備ができています。各重要な側面を詳細に見て、この移行からクロムの拡張を保護するために作業する方法を学びましょう。
更新リストの基本構造

マニフェストを更新する基本構造は、マニフェストv3に移動するための最初のステップです。必要な最も重要な変更は、「manifest_version」要素の値を3に変更することです。つまり、マニフェストV3機能セットを使用しています。

マニフェストV2とV3の主な違いの1つは、Manifest V3のバックエンドページの単一の拡張サービスワーカーに置き換えることです。 「バックグラウンド」フィールドの下にサービスワーカーを登録し、「service_worker」キーを使用して、1つのJavaScriptファイルを指定する必要があります。 Manifest V3が複数のバックグラウンドスクリプトをサポートしていない場合でも、「タイプ」：「モジュール」を指定することにより、サービスワーカーをESモジュールとして宣言することを選択できます。これにより、より多くのコードをインポートできます。

マニフェストv3では、「browser_action」および「page_action」属性が単一の「アクション」属性にマージされます。これらのプロパティをマニフェストの「アクション」に置き換える必要があります。同様に、Manifest V3のChrome.BrowseractionおよびChrome.Pageaction APIは、移行する必要がある単一の「アクション」APIに統合されます。

一般に、更新マニフェストの基本構造は、このバージョンのAPIで導入された新しい機能と変更を活用できるため、V3をマニフェストするための移行の重要なステップです。

ホスト許可を変更

マニフェストv3に移行する2番目のステップは、ホスト許可を変更することです。マニフェストv2では、マニフェストファイルの「許可」フィールドにホスト権限を指定します。マニフェストv3では、ホスト権限は、マニフェストファイルの「host_permissions」フィールドで指定する必要がある個別の要素です。

以下は、ホスト権限を変更する方法の例です。

<code>// Manifest V2
{
  "manifest_version": 2,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "optional_permissions": ["<all_urls>"]
}</all_urls></code>

<code>// Manifest V3
{
  "manifest_version": 3,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "host_permissions": [ "<all_urls>" ]
}</all_urls></code>

コンテンツセキュリティポリシーを更新

マニフェストV2拡張のCSPをマニフェストV3と一致するように更新するには、マニフェストファイルにいくつかの変更を加える必要があります。マニフェストV2では、CSPはマニフェストの「content_security_policy」フィールドの文字列として指定されています。

マニフェストv3では、CSPは、異なるメンバーが代替CSPコンテキストを表すオブジェクトになりました。単一の「content_security_policy」フィールドを使用する代わりに、「content_security_policy.extension_pages」および「content_security_policy.sandbox」の個別のフィールドを指定する必要があります。

現在のCSPに外部ドメインがある場合は、「Script-SRC」、「Worker-SRC」、「Object-SRC」、および「Style-SRC」ディレクティブからの参照も削除する必要があります。これらのCSPの更新を作成することは、マニフェストV3の拡張機能のセキュリティと安定性を確保するために重要です。

<code>// Manifest V2
"background": {
  "scripts": ["background.js"],
  "persistent": false
},
"browser_action": {
  "default_popup": "popup.html"
},</code>

ネットワークリクエスト処理を変更

<code>// Manifest V3
"background": {
  "service_worker": "background.js"
},
"action": {
  "default_popup": "popup.html"
}</code>

マニフェストv3に移行する最後のステップは、ネットワーク要求処理を変更することです。 Manifest V2では、Chrome.WebRequest APIを使用してネットワークリクエストを変更します。ただし、このAPIは、Manifest V3のDeclarativenetRequest APIに置き換えられます。

この新しいAPIを使用するには、マニフェストでDeclarativenetRequestの許可を指定し、新しいAPIを使用するためにコードを更新する必要があります。 2つのAPIの重要な違いは、chrome.webrequest APIを使用するなど、HTTP要求カテゴリ全体をブロックするのではなく、declarativenetRequest APIをブロックするために事前定義されたアドレスのリストを指定する必要があることです。

これらの変更をコードに変更することは、マニフェストV3の下で拡張機能が適切に機能し続けることを確認するために非常に重要です。マニフェストを変更してマニフェストv3：

でマニフェストを変更する方法の例を示します。

また、chrome.webrequest APIの代わりにextensiveneTrequest APIを使用するには、拡張機能コードを更新する必要があります。

<code>// Manifest V2
"permissions": [ 
  "activeTab", 
  "storage", 
  "http://www.css-tricks.com/", 
  ":///*" 
]</code>

チェックする必要がある他の側面

<code>// Manifest V3
"permissions": [ 
  "activeTab", 
  "scripting", 
  "storage"
],
"host_permissions": [
  "http://www.css-tricks.com/" 
],
"optional_host_permissions": [ 
  ":///*" 
]</code>

私が紹介したのは、氷山の一角にすぎません。もちろん、すべてをカバーしたい場合は、数日間ここにいるかもしれません。GoogleのChrome開発者ガイドは意味がありません。私がカバーしたものは、あなたのクロム拡張機能をこの移行に十分に安全にしますが、ここにあなたの拡張機能が適切に機能することを確認するためにチェックアウトしたいことがあります。

• バックグラウンドスクリプトをサービスワーカーの実行コンテキストに移行します：前述のように、マニフェストv3は背景ページを単一の拡張サービスワーカーに置き換えるため、サービスワーカーの実行コンテキストに合わせてバックグラウンドスクリプトを更新する必要がある場合があります。
• unifiedchrome.browserActionchrome.pageActionおよび
• api：これら2つの同等のAPIは、マニフェストV3の単一APIにマージされるため、アクションAPIに移行する必要があります。 chrome.runtime.getBackgroundPage() chrome.extension.getBackgroundPage()chrome.extension.getExtensionTabs()マニフェストV2の背景コンテキストの期待の関数を移行します：chrome.extension.getViews()マニフェストv3のサービス労働者の採用は、
、
• 、、などの方法と互換性がありません。他のコンテキストとバックエンドサービスワーカーの間でメッセージを渡すデザインに移行する必要がある場合があります。
• コンテンツスクリプト内のCORSリクエストをバックグラウンドサービスワーカーに移動する：Manifest V3に準拠するために、コンテンツスクリプトのCORSリクエストをバックグラウンドサービスワーカーに移動する必要がある場合があります。 chrome.scripting.executeScript({code: '...'}) eval()new Function()外部コードまたは任意の文字列の実行から離れて移行します：chrome.runtime.getURL()マニフェストv3は、
、
• 、を使用して外部ロジックを実行することは許可されなくなりました。すべての外部コード（JavaScript、WebAssembly、CSS）を拡張機能パッケージに移動し、拡張機能パッケージからのロードリソースへのスクリプトとスタイルの参照を更新し、を使用して実行時にリソースURLを構築する必要がある場合があります。

タブAPI：

のいくつかのスクリプトとCSSメソッドを更新してください。前述のように、いくつかのメソッドはTAB APIからマニフェストv3のスクリプトAPIに移動します。これらのメソッドへの呼び出しは、正しいマニフェストV3 APIを使用するために更新する必要がある場合があります。

など！

すべての変更を理解するために時間をかけてください。結局のところ、この変更は避けられません。この移行を避けてマニフェストV2拡張を失いたくない場合は、必要な知識を習得するために時間をかけてください。

一方、Chrome Extensionプログラミングを初めて使用して始めたい場合は、ChromeのWeb開発者ツールの世界を掘り下げることが素晴らしい方法です。 LinkedIn Learningのコースでこれを行いました。これにより、スピードをすばやく把握できました。これらの基本を習得したら、この記事に戻って、Manifest V3に基づいて知っていることを翻訳してください！

chrome.webRequestAPIでは、将来、新しいマニフェストV3の機能を使用するにはどうすればよいですか？

私にとって、私にとって、v3を示す移行との除去は、広告ブロッカーなどのデータ中心のユースケースから、より機能的およびアプリケーションベースのユースケースに拡張を移動しているようです。最近、アプリケーションの開発を避けてきました。なぜなら、それは時々非常にリソースを消費する可能性があるからです。しかし、この移行は私をそれに戻すかもしれません！

近年の人工知能ツールの台頭は、利用可能なAPIを提供しており、多数の新しいSaaSアプリケーションに影響を与えています。個人的には、これはアプリケーションに基づいたより多くのChrome拡張機能に向けた時までだと思います！この移行によって多くの古い拡張機能がクリアされる可能性がありますが、新しいSaaSのアイデアを中心に構築された多くの新しい拡張機能が置き換えられます。

これは、古い拡張機能を改善したり、新しい拡張機能を構築するために使用できるエキサイティングなアップデートです！個人的には、ユーザーブラウジングエクスペリエンスを強化するために、拡張機能に人工知能を含むAPIを使用する多くの可能性があると思います。しかし、これは本当に氷山の一角にすぎません。独自のプロフェッショナルな拡張機能を実際に使用するか、会社に連絡して拡張機能を構築/更新する場合は、ChmailアカウントをChrome Webストアに協力、開発、公開するのに利点があるため、Gmailアカウントをアップグレードすることをお勧めします。

ただし、各開発者は違った方法で必要なので、現在の拡張機能を実行し続けるために必要なものを学ぶか、新しい拡張機能を実行してください。

以上がChrome拡張機能のv3をマニフェストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。