他の問題とは無関係な更新
これは、拡張機能 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 で変更する必要があります。
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 |