Chrome 拡張機能のマニフェスト V3 への移行方法

私は通常の Chrome 拡張機能プログラマーではありませんが、確かに十分な数の拡張機能をコーディングしており、タスクを回避するのに十分な幅の Web 開発ポートフォリオを持っています。 しかし、つい最近、拡張機能が「時代遅れ」であるというフィードバックを受け取ったため、クライアントに拡張機能の XNUMX つを拒否してもらいました。

何が問題なのかを突き止めようとしていたとき、恥ずかしさをカーペットの下に一掃し、すぐに Chrome 拡張機能の世界に深く飛び込み始めました。 残念ながら、マニフェスト V3 に関する情報は少なく、この移行が何であるかをすぐに理解することは困難でした。

言うまでもなく、保留中の仕事で、私は苦労して自分の道をナビゲートしなければなりませんでした Google の Chrome 開発者向けドキュメント そして自分で物事を理解します。 私は仕事を成し遂げましたが、この分野での知識と研究を無駄にしたくないので、学習の旅で簡単にアクセスできればよかったと思うものを共有することにしました.

マニフェスト 3 への移行が重要な理由

マニフェスト V3 は、Google が Chrome ブラウザで使用する API です。 これは現在の API であるマニフェスト V2 の後継であり、Chrome 拡張機能がブラウザーと対話する方法を管理します。 マニフェスト V3 では、拡張機能のルールに大幅な変更が加えられています。そのうちのいくつかは、慣れ親しんだ V2 からの新しい主力になります。

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

1. 移行は 2018 年から継続しています。
2. マニフェスト V3 は、2023 年 XNUMX 月に正式に展開を開始します。
3. 2023 年 2 月までに、マニフェスト VXNUMX を実行する拡張機能は Chrome ウェブストアで利用できなくなります。
4. マニフェスト V3 で導入された新しいルールに準拠していない拡張機能は、最終的に Chrome ウェブストアから削除されます。

マニフェスト V3 の主な目標の XNUMX つは、ユーザーをより安全にし、全体的なブラウザー エクスペリエンスを向上させることです。 以前は、多くのブラウザー拡張機能がクラウド内のコードに依存していたため、 拡張が危険かどうかを評価する. マニフェスト V3 は、実行するすべてのコードを拡張機能に含めることを要求することで、これに対処することを目的としています。これにより、Google が拡張機能をスキャンして潜在的なリスクを検出できるようになります。 また、拡張機能がブラウザに実装できる変更について、Google に許可を要求するように強制します。

Google のマニフェスト V3 への移行を常に把握しておくことは重要です。これは、ユーザーの安全性と全体的なブラウザ エクスペリエンスの向上を目的とした拡張機能の新しいルールを導入するためです。これらのルールに準拠していない拡張機能は最終的に Chrome Web から削除されます。店。

つまり、今後数か月以内にこの移行を行わなければ、Manifest V2 を使用した拡張機能を作成するためのすべての労力が無駄になる可能性があります。

マニフェスト V2 と V3 の主な違い

この XNUMX つには多くの違いがあります。 Chrome の「マニフェスト V3 への移行」ガイド、ここに重要なポイントの短くて甘い要約があります：

1. サービスワーカー マニフェスト V3 の背景ページを置き換えます。
2. ネットワーク リクエストの変更は、新しい declarativeNetRequest マニフェスト V3 の API。
3. マニフェスト V3 では、拡張機能はパッケージに含まれている JavaScript のみを実行でき、リモートでホストされたコードは使用できません。
4. マニフェスト V3 の導入 promise 多くのメソッドをサポートしていますが、代わりにコールバックも引き続きサポートされています。
5. マニフェスト V3 のホスト権限は別の要素であり、 "host_permissions" フィールド。
6. マニフェスト V3 のコンテンツ セキュリティ ポリシーは、マニフェスト V2 のような文字列ではなく、代替コンテンツ セキュリティ ポリシー (CSP) コンテキストを表すメンバーを持つオブジェクトです。

Web ページの背景を変更する単純な Chrome 拡張機能のマニフェストでは、次のようになります。

// 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>"]
}

// 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>" ]
}

上記のタグのいくつかがあなたにとってなじみのないものであると思われる場合は、読み続けて、知っておくべきことを正確に見つけてください.

マニフェスト V3 へのスムーズな移行方法

マニフェスト V3 への移行を 3 つの重要な領域にまとめました。 もちろん、古いマニフェスト V2 から実装する必要がある新しいマニフェスト VXNUMX には多くの付加機能がありますが、これら XNUMX つの領域に変更を実装することで、最終的な移行に向けて Chrome 拡張機能を適切な軌道に乗せることができます。

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

1. マニフェストの基本構造を更新します。
2. ホスト権限を変更します。
3. コンテンツ セキュリティ ポリシーを更新します。
4. ネットワーク リクエストの処理を変更します。

これら 3 つの領域により、マニフェストの基礎はマニフェスト VXNUMX への移行の準備が整います。 これらの重要な側面のそれぞれを詳細に見て、この移行から Chrome 拡張機能を将来的に保証するためにどのように取り組むことができるかを見てみましょう.

マニフェストの基本構造を更新する

マニフェストの基本構造を更新することは、マニフェスト V3 に移行するための最初のステップです。 行う必要がある最も重要な変更は、 "manifest_version" 要素 3これにより、マニフェスト V3 機能セットを使用していることがわかります。

マニフェスト V2 と V3 の主な違いの 3 つは、マニフェスト VXNUMX ではバックグラウンド ページが単一の拡張サービス ワーカーに置き換えられていることです。 Service Worker を以下に登録する必要があります。 "background" フィールド、を使用して "service_worker" キーを入力して、単一の JavaScript ファイルを指定します。 マニフェスト V3 は複数のバックグラウンド スクリプトをサポートしていませんが、必要に応じて、次のように指定してサービス ワーカーを ES モジュールとして宣言できます。 "type": "module"、これにより、さらにコードをインポートできます。

マニフェスト V3 では、 "browser_action" & "page_action" プロパティは XNUMX つに統合されます。 "action" 財産。 これらのプロパティを次のように置き換える必要があります "action" あなたのマニフェストで。 同様に、 "chrome.browserAction" & "chrome.pageAction" API はマニフェスト V3 で単一の「アクション」API に統合されており、この API に移行する必要があります。

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

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

全体として、マニフェストの基本構造を更新することは、マニフェスト V3 に移行するプロセスにおいて重要なステップです。これにより、このバージョンの API で導入された新機能と変更を利用できるようになります。

ホスト権限を変更する

マニフェスト V3 への移行の 2 番目のステップは、ホストのアクセス許可を変更することです。 マニフェスト VXNUMX では、ホストのアクセス許可を "permissions" マニフェスト ファイルのフィールド。 マニフェスト V3 では、ホストのアクセス許可は別の要素であり、 "host_permissions" マニフェスト ファイルのフィールド。

ホスト権限を変更する方法の例を次に示します。

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

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

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

マニフェスト V2 拡張機能の CSP をマニフェスト V3 に準拠するように更新するには、マニフェスト ファイルにいくつかの変更を加える必要があります。 マニフェスト V2 では、CSP は "content_security_policy" マニフェストのフィールド。

マニフェスト V3 では、CSP は代替 CSP コンテキストを表すさまざまなメンバーを持つオブジェクトになりました。 シングルの代わりに "content_security_policy" フィールドに別のフィールドを指定する必要があります "content_security_policy.extension_pages" & "content_security_policy.sandbox"、使用している拡張ページのタイプによって異なります。

また、外部ドメインへの参照をすべて削除する必要があります。 "script-src", "worker-src", "object-src", "style-src" ディレクティブが存在する場合。 マニフェスト V3 の拡張機能のセキュリティと安定性を確保するために、CSP にこれらの更新を行うことが重要です。

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

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

マニフェスト V3 への移行の最後のステップは、ネットワーク リクエスト処理の変更です。 マニフェスト V2 では、 chrome.webRequest ネットワーク要求を変更する API。 ただし、この API はマニフェスト V3 で declarativeNetRequest APIです。

この新しい API を使用するには、 declarativeNetRequest マニフェストで権限を変更し、新しい API を使用するようにコードを更新します。 XNUMX つの API の主な違いの XNUMX つは、 declarativeNetRequest API では、ブロックする事前定義されたアドレスのリストを指定する必要があります。 chrome.webRequest APIです。

拡張機能がマニフェスト V3 で引き続き適切に機能するようにするには、コードにこれらの変更を加えることが重要です。 マニフェストを変更して使用する方法の例を次に示します。 declarativeNetRequest マニフェスト V3 の API:

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

を使用するには、拡張コードを更新する必要もあります。 declarativeNetRequest の代わりにAPI chrome.webRequest APIです。

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

私が取り上げたことは、氷山の一角にすぎません。 もちろん、すべてを網羅しようとすれば、何日もここにいて、Google の Chrome デベロッパー ガイドを持っていても意味がありません。 私が説明したことは、この移行で Chrome 拡張機能を装備するのに十分な将来性を備えていますが、拡張機能がゲームのトップで機能していることを確認するために確認する必要がある他の事項を次に示します.

• バックグラウンド スクリプトを Service Worker 実行コンテキストに移行する: 前述のように、マニフェスト V3 はバックグラウンド ページを単一の拡張サービス ワーカーに置き換えるため、サービス ワーカーの実行コンテキストに適応するようにバックグラウンド スクリプトを更新する必要がある場合があります。
• の統一 **chrome.browserAction** & **chrome.pageAction** API： これら 3 つの同等の API は、マニフェスト VXNUMX で XNUMX つの API に統合されるため、Action API への移行が必要になる場合があります。
• マニフェスト V2 バックグラウンド コンテキストを必要とする関数の移行: マニフェスト V3 でのサービス ワーカーの採用は、次のような方法と互換性がありません。 chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs(), chrome.extension.getViews(). 他のコンテキストとバックグラウンド サービス ワーカーの間でメッセージをやり取りする設計に移行する必要がある場合があります。
• コンテンツ スクリプト内の CORS リクエストをバックグラウンド サービス ワーカーに移動します。 マニフェスト V3 に準拠するために、コンテンツ スクリプト内の CORS 要求をバックグラウンド サービス ワーカーに移動する必要がある場合があります。
• 外部コードまたは任意の文字列の実行からの移行: マニフェスト V3 では、次を使用した外部ロジックの実行が許可されなくなりました chrome.scripting.executeScript({code: '...'}), eval(), new Function(). すべての外部コード (JavaScript、WebAssembly、CSS) を拡張バンドルに移動し、スクリプトとスタイル参照を更新して拡張バンドルからリソースをロードし、 chrome.runtime.getURL() 実行時にリソース URL を構築します。
• Tabs API の特定のスクリプトと CSS メソッドの更新: 前述のように、マニフェスト V3 では、いくつかのメソッドが Tabs API から Scripting API に移行されています。 正しいマニフェスト V3 API を使用するには、これらのメソッドへの呼び出しを更新する必要がある場合があります。

などなど！

すべての変更を最新の状態に保つために、少し時間をかけてください。 結局のところ、この変更は避けられません。この移行を回避したためにマニフェスト V2 拡張機能が失われたくない場合は、必要な知識を身につけるために時間を費やしてください。

一方、Chrome 拡張機能のプログラミングが初めてで、これから始めようとしている場合は、Chrome の Web 開発者ツールの世界に飛び込むのが最適な方法です。 私はコースを通してそうしました Linkedinラーニング、これにより、私はすぐにスピードを上げました。 基本的な知識が得られたら、この記事に戻って、知っていることを Manifest V3 に翻訳してください!

では、新しいマニフェスト V3 の機能を今後どのように使用するのでしょうか?

私にとっては、マニフェスト V3 への移行と chrome.webRequest API は、拡張機能をデータ中心のユース ケース (広告ブロッカーなど) から、より機能的でアプリケーション ベースの用途に移行しているようです。 最近はアプリケーション開発から遠ざかっています。 リソースを大量に消費する 時には。 しかし、この変化が私を元に戻すのかもしれません!

最近の AI ツールの台頭により、その多くは使用可能な API を備えており、数多くの新しい SaaS アプリケーションが生まれています。 個人的には、より多くのアプリケーション ベースの Chrome 拡張機能に移行する絶好のタイミングだと思います。 古い拡張機能の多くはこの移行によって一掃される可能性がありますが、斬新な SaaS のアイデアに基づいて構築された多くの新しい拡張機能が代わりになるでしょう。

したがって、これは古い拡張機能に飛び乗って改良したり、新しい拡張機能を構築したりするためのエキサイティングな更新です! 個人的には、ユーザーのブラウジング エクスペリエンスを向上させるために拡張機能で使用されている AI を含む API を使用することには、多くの可能性があると考えています。 しかし、それは本当に氷山の一角にすぎません。 独自の専門的な拡張機能を実際に使用したい場合や、企業に連絡して拡張機能を構築/更新してもらいたい場合は、お勧めします。 Gmail アカウントのアップグレード Chrome Web Store への拡張機能のコラボレーション、開発、および公開で得られるメリットについて。

ただし、すべての開発者の要件は異なることを忘れないでください。そのため、現在の拡張機能を維持するために何が必要か、または新しい拡張機能を継続するために何が必要かを学びましょう!

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/