コードを更新する

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

これは、拡張機能 Service Worker の一部ではないコードに必要な変更について説明する 3 つのセクションの第 1 部です。このセクションは、他の問題とは無関係の、必要なコード変更を対象としています。次の 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 のメンバーとして渡されるようになりました。

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

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 で、

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

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」を「アクション」を含む

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

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

コールバックから 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.onMessage
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