コードを更新する

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

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

tabing.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']
});

tabing.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 で Promise の詳細をご確認ください。このページでは、Chrome 拡張機能でこれらの API を使用する際に知っておくべきことについて説明します。

下位互換性を確保するため、Promise のサポートが追加された後も、多くのメソッドは引き続きコールバックをサポートします。同じ関数呼び出しで両方を使用することはできません。コールバックを渡すと、関数は Promise を返しません。Promise を返す場合は、コールバックを渡さないでください。イベント リスナーなど、一部の API 機能では引き続きコールバックが必要になります。メソッドがプロミスをサポートしているかどうかを確認するには、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()

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

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

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