マニフェストv 3は、今年始めにクロム88のリリース以来利用できました.あなたがクロム拡張子を造ることを計画しているならば、あるいは、あなたが現在構築しているならば、あなたは新しい特徴と視力から利益を得るためにChrome Extensionsマニフェストのこの新しいバージョンについて学ぶべきです.
この記事では、マニフェストv 3の簡単な概要を参照してください.次に、サンプルの拡張子を移行するために変更する必要があるすべてを学ぶために、移行チェックリストを見ていきます.最後に、変更手順を段階的に適用するので、最後に、サンプル拡張子がマニフェストv 3に移行されます.

マニフェストV 3概要

Chrome拡張は10年前に立ち上げました、そして、ドキュメントによると、マニフェストV 3はそれから拡張プラットホームの最大のシフトのうちの1つを表します.これは、クロムの拡張子をもたらす近代的なWebに近い(約束やサービスの労働者のような)多くの変更が含まれます!

1.1 .三柱

ドキュメントに記載されているように、マニフェストv 3はChrome Extensionの戦略的な方向性において一歩前進している.このビジョンの主な焦点は次の3つの柱です

プライバシー:ここでのアイデアは、ユーザーが拡張機能の活動と情報をどのように使用しているかを知るようにすることです.また、永続的にユーザーデータへのアクセスを持つ拡張機能の必要性を軽減します.

セキュリティ:拡張モジュールは厳密なプロトコルに従う必要があります.例えば、拡張コンテキストの外部からスクリプトにアクセスすることは許されません.

パフォーマンス:すべてのデバイスで良いパフォーマンスを維持し、拡張機能がインストールされているときにパフォーマンスの問題を回避します.

また、彼らは開発者のための障壁を低くして、ウェブの進歩から利益を得るためにChrome Extensionsの「ウェブBless」を保存すると述べます.
最終的に、彼らは、開発者がプラットホームを可能にして、強力で、機能が豊富であるようにすると言います.

1.2 .メインチェンジ

バックグラウンドページ/スクリプトは、サービス労働者によって置き換えられます。

バックグラウンドページと同様に、サービスワーカーは、バックグラウンドで実行され、Webページから独立しているスクリプトです.彼らはウェブサイトやユーザーとの対話を必要としません.

ℹ️ Fun fact! Service workers were inspired by the background pages in Chrome Extensions.

新しい宣言サービスリクエストAPIはネットワークリクエスト修正を処理します。

この新しいAPIはプライバシーに焦点を当てている.要求はまだ変更され、ブロックすることができるが、プライバシー保護の方法で.
このAPIは古いwebRequest APIは、プライバシー、パフォーマンス、および互換性の問題を修正します.

リモートホストコードはもはや許可されません

この変更はセキュリティを向上させた.すべてのコードが拡張パッケージで利用可能になるので、拡張モジュールはユーザーが利用できるようになる前に、より確実かつ効率的に評価されます.
リモートで処理されるいくつかの機能を必要とする拡張モジュールの推奨は、リモート構成ファイルを使用しています.

多くのAPIのための追加約束サポート

我々は最終的にいくつかのchrome アピス!🎈 これは本当に楽しみにしていたものだった.
コールバックはまだサポートされているので、すぐにすべてのコードをリファクタリングする必要はありません.

その他のマイナーチェンジ

The browserAction APIとpageAction APIは現在、単一のAPIで統一されaction .

Webにアクセス可能なリソースはもはやすべてのウェブサイトには利用できません.

方法executeScript() から移動されましたtabs 新しいAPIscripting APIはもはや文字列スクリプトを許可しません.スクリプトファイルのパスまたは関数を指定する必要があります.

ホスト許可はpermissions プロパティmanifest.json .

The content_security_policy 文字列として使用され、現在はオブジェクトであり、ポリシーによってカバーされる拡張ページ(HTMLファイルとサービスワーカー)を指定する必要があります.

Achoの移行V 3マニフェスト

我々がマニフェストv 3とそのビジョンのハイライトを知っている今、我々は我々のサンプル拡張を移行するために動くことができます.

2.1 .移行チェックリスト

拡張子をv 3のマニフェストに移行するとき、最初に行うべきことはManifest V3 migration checklist . 各々の弾丸をマークします✅ 変更が適用された場合は❌ そうしないとき:
❌ マニフェストにホストパーミッションがありますか?
✅ あなたの背景ページを使用していますか?

背景を置換します.ページまたは背景.背景とスクリプト.マニフェストでのサービスワーカー.JSONServiceRound Warkerフィールドは文字列を受け取り、文字列の配列ではないことに注意してください.

取り外しbackground.persistent からmanifest.json .

サービスワーカーの実行コンテキストに適応するバックグラウンドスクリプトを更新します.

✅ マニフェストでBrowserRankアクションまたはPageHandアクションプロパティを使用します.JSON ?

これらの2つのAPIは単一のアクションAPIに統一されていたので、これらのプロパティをアクションで置き換える必要があります.

✅ あなたはクロムを使用しています.ブラウザーアクションまたはクロム.PageAction JavaScript API?

クロムに移行します.アクションAPI .

❌ 現在、Chromeのブロック版を使用しています.WebRequest ?
❌ Chromeでこれらのスクリプト/cssメソッドを使用しています.タブAPI ?
❌ リモートコードまたは任意の文字列を実行しますか?
❌ Mv 2バックグラウンドコンテキストを期待する関数を実行しますか?
❌ コンテンツスクリプトでCorsのリクエストを作っていますか?
❌ マニフェストでカスタムContentNameセキュリティーポリシーを使用しています.JSON ?

2.2 .チェックリストで説明された変更を適用する

前のセクションから各ポイントを確認し、適切な変更を適用しましょう.

2.2.1 .マニフェストバージョンを3に設定します

にmanifest.json ファイルの値manifest_version を「3」にする.

2.2.2 .バックグラウンドページとサービスワーカーの交換

我々の背景ページをサービスワーカーと取り替えるとき、我々は2つのものを覚えなければなりません:

サービスワーカーは、彼らが再び必要であるとき、不活発で、再開されるとき、終わります.

サービス労働者はDOMへのアクセスを持っていない.

これは私たちのための問題ではない私たちのバックグラウンドスクリプトを作成したので、私はすでにこの変更が来ていた知っているので、私は私の背景スクリプトのオリジナルのデザインで念頭に置いて2つのことを念頭に置いていた.
我々がする必要がある最初の変更はbackground.js スクリプトservice-worker.js .
今、我々は新しいサービスワーカーをmanifest.json ファイル.それをするには、我々は古いbackground プロパティーを以下に示します:

"background": {
    "service_worker": "service-worker.js"
},

さて、service_worker プロパティは文字列です.それで、私たちは、1つ以上のファイルを宣言することができません(私が知っている限り、私は医者でこの問題についてあまり見つけませんでした).この変更のため、必要な他の2つのスクリプトを追加できませんでした.acho.js and page.service.js . それで、私は彼らを含む新しい方法を見つけて、彼らから電話しますservice-worker.js : 単にimportScripts() 方法の上部にあるメソッドservice-worker.js スクリプト

// service-worker.js
importScripts('acho.js', 'page.service.js');

/* More code */

私のバックグラウンドスクリプトをサービスワーカーに置き換えるのに適用されたすべての変更を見ることができますthis commit .

2.2.3 .マニフェストにおける「アクション」による「BrowserRank Action」の置換

これらの2つのAPIは、単一のaction APIは、プロパティを変更する必要がありますbrowser_action to action 我々の中でmanifest.json ファイル

{
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/icon16.png",
            "24": "images/icon24.png",
            "32": "images/icon32.png"
        }
    }
}

参照commit .

2.2.4 .「ブラウザーアクション」APIの代わりに「アクション」APIを使う

前のセクションと同様に、我々は新しい統一を使用しなければなりませんaction API.
サンプルの拡張子では、browserAction バッジの色とテキストを設定するAPIです.

// acho.js

class Acho {

    /* More code */

    growl = () => {
        chrome.action.setBadgeBackgroundColor({ color: '#F00' }, () => {
            chrome.action.setBadgeText({ text: 'grr' });
        });
    }

    quiet = () => {
        chrome.action.setBadgeText({ text: '' });
    }

    /* More code */
}

Note: The text property is now required in the setBadge method, so we can no longer use chrome.action.setBadgeText({ }); to clear the badge text.

参照commit .

2.2.5 .Webアクセス可能なリソースのURLパターンを指定する

これはチェックリストにありませんでしたが、私は変更を加える必要があることに気がつきました.拡張子を試したとき、「無効な値」のWebRes AccesssibleCountリソース[ 0 ]を入力します.
そこで、どのページがどのリソースにアクセスするかを明示的に定義しなければなりません.これはmatches プロパティ(コンテンツスクリプトと同様).ここで新しい方法web_accessible_resources プロパティはmanifest.json :

{
    "web_accessible_resources": [
        {
            "matches": ["<all_urls>"],
            "resources": ["images/icon32.png"]
        }
    ]
}

参照commit .

2.2.6 ." Count ExecuteCount BrowserRank Action "と" Count ExecteCountアクション"とを置き換える

これはチェックリストにありませんでした、そして、私もDocsのこの変化に関連する何も見つけることができませんでした、しかし、私は私自身の直観を通して変化を理解します😂.
私たちは以前はcommand 我々の定義manifest.json 呼ばれる_execute_browser_action 自動的に(余分なコードを追加せずに)私たちの拡張機能のポップアップ(ブラウザのアクション)をトリガします.
マニフェストv 3に更新した後、このコマンドは動作しませんでした、そして、私はそれが間のマージのためであったと考えましたbrowserAction and pageAction 新しいものにaction API.だから変更_execute_browser_action to _execute_action , そして🎉.

{
    "commands": {
        "_execute_action": {
            "suggested_key": {
                "default": "Alt+Shift+1"
            }
        }
    }
}

2.2.7 .約束を使う

最終的に、他のすべてが働いていた後、私は彼らをサポートするAPIで約束を使用するために私のコードをリファクタにすることを決めた.
以下に例を示します:

// Using callback:
chrome.action.setBadgeBackgroundColor({ color: '#F00' }, () => {
    chrome.action.setBadgeText({ text: 'grr' });
});

// Using promises:
await chrome.action.setBadgeBackgroundColor({ color: '#F00' });
await chrome.action.setBadgeText({ text: 'grr' });

// Optional callback:
chrome.tabs.create({ url: ev.srcElement.href, active: false });

// Using promises:
await chrome.tabs.create({ url: ev.target.href, active: false });

// Using callback:
    chrome.tabs.query(query, (tabs) => {
        // callback logic
    });
});

// Using promises:
const tabs = await chrome.tabs.query(query);

Remember: You don't need to refactor your code to use promises right away. Callbacks are still supported in Manifest v3.

気づかされるのは、私がその仕事をする約束をすることができなかったことですchrome.storage API.これはまだ約束を支持しないAPIの1つかもしれませんが、ドキュメント内の件名に関する詳細な情報は見つかりませんでした.
こちらですthe commit 興味があれば.

完了！

サンプルの拡張子はマニフェストv 3に移行しました.

レポ

このシリーズの例とすべてを私のレポで見つけることができます.

PAWAP 90 / 私たちはどこ

Acho（かわいい子犬）あなたのブラウザ上の現在のページのタイトルを指示します。サンプルの拡張子。

ホープは、この記事が役に立つ発見!
💬 私はあなたがコメントで何を考えて知ってみよう!