コードを更新する

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

これは、拡張機能 Service Worker に含まれないコードに必要な変更について説明する 3 つのセクションの最初のセクションです。このセクションでは、他の問題とは無関係に必要なコード変更について説明します。次の 2 つのセクションでは、ウェブ リクエストをブロックする代替方法とセキュリティの向上について説明します。

tab.executeScript() を scripting.executeScript() に置き換え

Manifest V3 では、executeScript() が tabs API から scripting API に移行されます。そのためには、実際のコードの変更に加えて、マニフェスト ファイル内の権限を変更する必要があります。

executeScript() メソッドでは、以下が必要です。

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

scripting.executeScript() メソッドは、tabs.executeScript() の場合と同様です。ただし、いくつか違いがあります。

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

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

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

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

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

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

tab.insertCSS() と tab.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() の手順は同じです。

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

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

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

Manifest V2 では、ブラウザ操作とページ操作は別々の概念でした。当初はそれぞれ異なる役割を担っていましたが、時間の経過とともにその違いは薄れていきました。Manifest 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 をアクション API に置き換える

Manifest V2 で browserAction API と pageAction API を使用していた場合、action API を使用する必要があります。

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

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

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

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

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

コールバックから Promise に変換するには、コールバックを削除し、返された Promise を処理します。以下の例は、オプションの権限のサンプル（具体的には newtab.js）に基づいています。コールバックのバージョンは、request() に対するサンプルの呼び出しがコールバック付きでどのように表示されるかを示しています。Promise のバージョンは、async と await で書き換えることができます。

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

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

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

他の拡張機能のコンテキストでは、メッセージの受け渡しを使用してのみ拡張機能 Service Worker とやり取りできます。そのため、バックグラウンド コンテキストを必要とする呼び出しを置き換える必要があります。具体的には以下のとおりです。

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

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

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

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