コードを更新する

他の問題とは無関係の更新

これは、拡張機能の 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. 

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

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

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 に置き換える

Manifest 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() と Service Worker のメッセージ イベント ハンドラに置き換えることを計画する必要があります。

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

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