他の問題とは無関係な更新
これは、拡張機能 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.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 |