コードを更新する

他の問題とは無関係のアップデート

これは、拡張機能の Service Worker の一部ではないコードに必要な変更について説明する 3 つのセクションの最初のセクションです。このセクションでは、他の問題とは関係のない必要なコード変更について説明します。次の 2 つのセクションでは、ブロックするウェブ リクエストの置き換えとセキュリティの強化について説明します。

tabs.executeScript() を scripting.executeScript() に置き換える

Manifest V3 では、executeScript() は tabs API から scripting API に移動します。この場合、実際のコードの変更に加えて、マニフェスト ファイルの権限も変更する必要があります。

executeScript() メソッドには次のものが必要です。

• "scripting" 権限。
• ホスト権限または "activeTab" 権限。

scripting.executeScript() メソッドは、tabs.executeScript() での動作と似ています。いくつか違いがあります。

• 以前の方法では 1 つのファイルしか取得できませんでしたが、新しい方法ではファイルの配列を取得できます。
• また、InjectDetails ではなく ScriptInjection オブジェクトを渡します。この 2 つにはいくつかの違いがあります。たとえば、tabId はメソッド引数ではなく ScriptInjection.target のメンバーとして渡されるようになりました。

この例では、その方法を示します。

async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();

browser.tabs.executeScript(
  tab.id,
  {
    file: 'content-script.js'
  }
);

async function getCurrentTab()
let tab = await getCurrentTab();

browser.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['content-script.js']
});

tabs.insertCSS() と tabs.removeCSS() を scripting.insertCSS() と scripting.removeCSS() に置き換え

Manifest V3 では、insertCSS() と removeCSS() は tabs API から scripting API に移動します。これには、コードの変更に加えて、マニフェスト ファイルの権限の変更が必要です。

• "scripting" 権限。
• ホスト権限または "activeTab" 権限。

scripting API の関数は tabs の関数と似ています。いくつか違いがあります。

• これらのメソッドを呼び出すときは、InjectDetails ではなく CSSInjection オブジェクトを渡します。
• tabId は、メソッド引数としてではなく、CSSInjection.target のメンバーとして渡されるようになりました。

この例では、insertCSS() でこれを行う方法を示します。removeCSS() の手順も同じです。

browser.tabs.insertCSS(tabId, injectDetails, () => {
  // callback code
});

const insertPromise = await browser.scripting.insertCSS({
  files: ["style.css"],
  target: { tabId: tab.id }
});
// Remaining code. 

ブラウザ アクションとページ アクションをアクションに置き換える

マニフェスト V2 では、ブラウザ アクションとページ アクションは別々のコンセプトでした。当初は役割が異なっていましたが、時間の経過とともにその差は縮まりました。マニフェスト V3 では、これらのコンセプトは Action API に統合されています。これには、Manifest V2 のバックグラウンド スクリプトに記述する内容とは異なる manifest.json と拡張機能のコードの変更が必要です。

Manifest V3 のアクションはブラウザ アクションに最もよく似ていますが、action API では pageAction のように hide() と show() は提供されません。ページ アクションがまだ必要な場合は、宣言型コンテンツを使用してエミュレートするか、タブ ID を使用して enable() または disable() を呼び出すことができます。

「browser_action」と「page_action」を「action」に置き換えます

manifest.json で、"browser_action" フィールドと "page_action" フィールドを "action" フィールドに置き換えます。"action" フィールドの情報については、リファレンスをご覧ください。

{
  ...
  "page_action": { ... },
  "browser_action": {
    "default_popup": "popup.html"
   }
  ...
}

{
  ...
  "action": {
    "default_popup": "popup.html"
  }

  ...
}

browserAction API と pageAction API を action API に置き換える

マニフェスト V2 で browserAction API と pageAction API を使用していた場合は、action API を使用する必要があります。

browser.browserAction.onClicked.addListener(tab => { ... });
browser.pageAction.onClicked.addListener(tab => { ... });

browser.action.onClicked.addListener(tab => { ... });

コールバックを Promise に置き換える

Manifest V3 では、多くの拡張機能 API メソッドが Promise を返します。Promise は、非同期メソッドによって返される値のプロキシまたはプレースホルダです。Promise を使用したことがない場合は、MDN で Promise についてお読みください。このページでは、Chrome 拡張機能でこれらを使用するために知っておくべきことについて説明します。

下位互換性のため、多くのメソッドは Promise のサポートが追加された後もコールバックをサポートし続けます。同じ関数呼び出しで両方を使用することはできません。コールバックを渡すと、関数は Promise を返しません。Promise を返してほしい場合は、コールバックを渡さないでください。イベント リスナーなどの一部の API 機能では、引き続きコールバックが必要です。メソッドが Promise をサポートしているかどうかを確認するには、API リファレンスで「Promise」ラベルを探します。

コールバックから Promise に変換するには、コールバックを削除して、返された Promise を処理します。次の例は、オプションの権限のサンプル（特に newtab.js）から抜粋したものです。コールバック バージョンは、コールバックを使用したサンプルでの request() の呼び出しがどのようなものになるかを示しています。Promise バージョンは async と await を使用して書き換えることができます。

browser.permissions.request(newPerms, (granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

const newPerms = { permissions: ['topSites'] };
browser.permissions.request(newPerms)
.then((granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

Manifest V2 のバックグラウンド コンテキストを想定する関数を置き換える

他の拡張機能コンテキストは、メッセージ パッシングを使用してのみ拡張機能サービス ワーカーとやり取りできます。そのため、バックグラウンド コンテキストを想定する呼び出し（具体的には次の呼び出し）を置き換える必要があります。

• browser.runtime.getBackgroundPage()
• browser.extension.getBackgroundPage()
• browser.extension.getExtensionTabs()

拡張機能スクリプトでは、メッセージ パッシングを使用して、Service Worker と拡張機能の他の部分との間で通信する必要があります。現在、これは sendMessage() を使用し、拡張機能 Service Worker で browser.runtime.onMessage を実装することで実現できます。長期的には、これらの呼び出しを postMessage() とサービス ワーカーのメッセージ イベント ハンドラに置き換えることを計画する必要があります。

サポートされていない API を置き換える

Manifest V3 では、以下のメソッドとプロパティを変更する必要があります。