コードを更新する

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

これは、拡張機能 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 のメンバーとして渡されるようになりました。

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

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

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

バックグラウンドのスクリプト ファイル。

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

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

拡張機能 Service Worker。

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

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

バックグラウンドのスクリプト ファイル。

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

拡張機能 Service Worker。

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

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" フィールドに関する情報については、リファレンスをご覧ください。

Manifest V2
{
  ...
  "page_action": { ... },
  "browser_action": {
    "default_popup": "popup.html"
   }
  ...
}
Manifest V3
{
  ...
  "action": {
    "default_popup": "popup.html"
  }

  ...
}

browserAction API と pageAction API をアクション API に置き換える

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

Manifest V2
chrome.browserAction.onClicked.addListener(tab => { ... });
chrome.pageAction.onClicked.addListener(tab => { ... });
Manifest V3
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');
  }
});
Promise
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 で変更する必要があります。

Manifest V2 のメソッドまたはプロパティ 次に変更
chrome.extension.connect() chrome.runtime.connect()
chrome.extension.connectNative() chrome.runtime.connectNative()
chrome.extension.getExtensionTabs() chrome.extension.getViews()
chrome.extension.getURL() chrome.runtime.getURL()
chrome.extension.lastError メソッドが Promise を返す場合は、promise.catch() を使用します。
chrome.extension.onConnect chrome.runtime.onConnect
chrome.extension.onConnectExternal chrome.runtime.onConnectExternal
chrome.extension.onMessage chrome.runtime.onMessage
chrome.extension.onRequest chrome.runtime.onRequest
chrome.extension.onRequestExternal chrome.runtime.onMessageExternal
chrome.extension.sendMessage() chrome.runtime.sendMessage()
chrome.extension.sendNativeMessage() chrome.runtime.sendNativeMessage()
chrome.extension.sendRequest() chrome.runtime.sendMessage()
chrome.runtime.onSuspend（バックグラウンド スクリプト） 拡張機能 Service Worker ではサポートされていません。代わりに、beforeunload ドキュメント イベントを使用してください。
chrome.tabs.getAllInWindow() chrome.tabs.query()
chrome.tabs.getSelected() chrome.tabs.query()
chrome.tabs.onActiveChanged chrome.tabs.onActivated
chrome.tabs.onHighlightChanged chrome.tabs.onHighlighted
chrome.tabs.onSelectionChanged chrome.tabs.onActivated
chrome.tabs.sendRequest() chrome.runtime.sendMessage()
chrome.tabs.Tab.selected chrome.tabs.Tab.highlighted