Info terbaru yang tidak terkait dengan masalah lain
Ini adalah bagian pertama dari tiga bagian yang menjelaskan perubahan yang diperlukan untuk kode yang bukan bagian dari pekerja layanan ekstensi. Bagian ini ditujukan untuk perubahan kode yang diperlukan yang tidak terkait dengan masalah lain. Dua bagian berikutnya membahas cara mengganti permintaan web yang diblokir dan meningkatkan keamanan.
Mengganti tab.executeScript() dengan skriping.executeScript()
Di Manifes V3, executeScript()
berpindah dari tabs
API ke scripting
API. Perubahan ini memerlukan perubahan izin dalam file manifes selain perubahan kode yang sebenarnya.
Untuk metode executeScript()
, Anda memerlukan:
- Izin
"scripting"
. - Izin host atau izin
"activeTab"
.
Metode scripting.executeScript()
mirip dengan cara kerjanya dengan tabs.executeScript()
. Ada beberapa perbedaan.
- Meskipun metode lama hanya dapat mengambil satu file, metode baru dapat mengambil array file.
- Anda juga meneruskan objek
ScriptInjection
, bukanInjectDetails
. Ada beberapa perbedaan di antara keduanya. Misalnya,tabId
kini diteruskan sebagai anggotaScriptInjection.target
, bukan sebagai argumen metode.
Contoh ini menunjukkan cara melakukannya.
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'] });
Mengganti tab.insertCSS() dandans.removeCSS() dengan skrip.insertCSS() dan skrip.removeCSS()
Di Manifes V3, insertCSS()
dan removeCSS()
berpindah dari tabs
API ke scripting
API. Perubahan ini memerlukan perubahan pada izin dalam file manifes selain perubahan kode:
- Izin
"scripting"
. - Izin host atau izin
"activeTab"
.
Fungsi pada scripting
API mirip dengan fungsi pada tabs
. Ada beberapa perbedaan.
- Saat memanggil metode ini, Anda meneruskan objek
CSSInjection
, bukanInjectDetails
. tabId
kini diteruskan sebagai anggotaCSSInjection.target
, bukan sebagai argumen metode.
Contoh ini menunjukkan cara melakukannya untuk insertCSS()
. Prosedur untuk removeCSS()
sama.
chrome.tabs.insertCSS(tabId, injectDetails, () => { // callback code });
const insertPromise = await chrome.scripting.insertCSS({ files: ["style.css"], target: { tabId: tab.id } }); // Remaining code.
Mengganti Tindakan Browser dan Tindakan Halaman dengan Tindakan
Tindakan browser dan tindakan halaman merupakan konsep terpisah dalam Manifes V2. Meskipun mereka memulai dengan peran yang berbeda, perbedaan di antara mereka kian menurun seiring waktu. Di Manifes V3, konsep ini digabungkan ke dalam Action API. Tindakan ini memerlukan perubahan dalam manifest.json
dan kode ekstensi yang berbeda dari yang seharusnya Anda masukkan dalam skrip latar belakang Manifes V2.
Tindakan di Manifes V3 paling mirip dengan tindakan browser; namun, action
API tidak menyediakan hide()
dan show()
seperti pageAction
. Jika masih memerlukan tindakan halaman, Anda dapat mengemulasikan menggunakan konten deklaratif atau memanggil enable()
atau disable()
dengan ID tab.
Ganti "browser_action" dan "page_action" dengan "action"
Di manifest.json
, ganti kolom "browser_action"
dan "page_action"
dengan kolom "action"
. Lihat referensi untuk informasi tentang kolom "action"
.
{ ... "page_action": { ... }, "browser_action": { "default_popup": "popup.html" } ... }
{ ... "action": { "default_popup": "popup.html" } ... }
Mengganti browserAction dan pageAction API dengan API tindakan
Jika Manifes V2 menggunakan API browserAction
dan pageAction
, sekarang Anda harus menggunakan action
API.
chrome.browserAction.onClicked.addListener(tab => { ... }); chrome.pageAction.onClicked.addListener(tab => { ... });
chrome.action.onClicked.addListener(tab => { ... });
Mengganti callback dengan promise
Di Manifes V3, banyak metode API ekstensi menampilkan promise. Promise adalah proxy atau placeholder untuk nilai yang ditampilkan oleh metode asinkron. Jika belum pernah menggunakan Promise, Anda dapat membacanya di MDN. Halaman ini menjelaskan hal yang perlu Anda ketahui untuk menggunakannya dalam ekstensi Chrome.
Untuk kompatibilitas mundur, banyak metode tetap mendukung callback setelah dukungan promise ditambahkan. Perhatikan bahwa Anda tidak dapat menggunakan keduanya pada panggilan fungsi yang sama. Jika Anda meneruskan callback, fungsi tersebut tidak akan menampilkan promise dan jika Anda ingin promise yang ditampilkan, jangan meneruskan callback. Beberapa fitur API, seperti pemroses peristiwa, akan tetap memerlukan callback. Untuk memeriksa apakah metode mendukung promise, cari label "Promise" dalam referensi API-nya.
Untuk mengonversi dari callback ke promise, hapus callback dan tangani promise yang ditampilkan. Contoh di bawah diambil dari contoh izin opsional, khususnya newtab.js
. Versi callback menunjukkan tampilan panggilan contoh ke request()
dengan callback. Perhatikan bahwa versi promise dapat ditulis ulang dengan async dan 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'); } });
Mengganti fungsi yang mengharapkan konteks latar belakang Manifes V2
Konteks ekstensi lainnya hanya dapat berinteraksi dengan pekerja layanan ekstensi menggunakan penyampaian pesan. Oleh karena itu, Anda perlu mengganti panggilan yang mengharapkan konteks latar belakang, khususnya:
chrome.runtime.getBackgroundPage()
chrome.extension.getBackgroundPage()
chrome.extension.getExtensionTabs()
Skrip ekstensi harus menggunakan penerusan pesan untuk melakukan komunikasi antara pekerja layanan dan bagian lain dari ekstensi Anda. Saat ini, langkah tersebut memerlukan penggunaan sendMessage()
dan penerapan chrome.runtime.onMessage
dalam pekerja layanan ekstensi Anda. Dalam jangka panjang, Anda harus mengganti panggilan ini dengan postMessage()
dan pengendali peristiwa pesan pekerja layanan.
Ganti API yang tidak didukung
Metode dan properti yang tercantum di bawah perlu diubah di Manifes V3.
Metode atau properti Manifes V2 | Ganti dengan |
---|---|
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 |
Jika metode menampilkan promise, gunakan 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 (skrip latar belakang) |
Tidak didukung di pekerja layanan ekstensi. Sebagai gantinya, gunakan peristiwa dokumen 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 |