Mengubah permintaan jaringan di Manifes V3
Manifes V3 mengubah cara ekstensi menangani perubahan permintaan jaringan. Bukannya mencegat permintaan jaringan dan mengubahnya saat runtime dengan chrome.webRequest
, ekstensi Anda menentukan aturan yang menjelaskan tindakan yang akan dilakukan saat sekumpulan kondisi tertentu terpenuhi. Lakukan ini menggunakan Declarative Net Request API.
Web Request API dan Declarative Net Request API sangat berbeda. Daripada mengganti satu panggilan fungsi dengan panggilan lainnya, Anda perlu menulis ulang kode dalam hal kasus penggunaan. Bagian ini akan memandu Anda melalui proses tersebut.
Di Manifes V2, memblokir permintaan web dapat menurunkan performa ekstensi dan performa halaman yang digunakannya secara signifikan. Namespace webRequest
mendukung sembilan peristiwa yang berpotensi memblokir, yang masing-masing memerlukan pengendali peristiwa dalam jumlah tak terbatas. Lebih buruk lagi, setiap halaman web berpotensi diblokir oleh beberapa ekstensi, dan izin yang diperlukan untuk hal ini bersifat invasif. Manifest V3 melindungi dari masalah ini dengan mengganti callback dengan aturan deklaratif.
Ini adalah bagian kedua dari tiga bagian yang menjelaskan perubahan yang diperlukan untuk kode yang bukan bagian dari pekerja layanan ekstensi. Panduan ini menjelaskan cara mengonversi permintaan web pemblokiran, yang digunakan oleh Manifes V2, menjadi permintaan net deklaratif, yang digunakan oleh Manifes V3. Dua bagian lainnya membahas memperbarui kode yang diperlukan untuk bermigrasi ke Manifes V3 dan meningkatkan keamanan.
Update izin
Buat perubahan berikut pada kolom "permissions"
di manifest.json
Anda.
- Hapus izin
"webRequest"
jika Anda tidak perlu lagi mengamati permintaan jaringan. - Pindahkan Pola Pencocokan dari
"permissions"
ke"host_permissions"
.
Anda harus menambahkan izin lain, bergantung pada kasus penggunaan Anda. Izin tersebut dijelaskan dengan kasus penggunaan yang didukungnya.
Membuat aturan permintaan jaringan deklaratif
Membuat aturan permintaan net deklaratif memerlukan penambahan objek "declarative_net_request"
ke manifest.json
. Blok "declarative_net_request"
berisi array objek "rule_resource"
yang mengarah ke file aturan. File aturan berisi array objek yang menentukan tindakan dan kondisi tempat tindakan tersebut dipanggil.
Kasus penggunaan umum
Bagian berikut menjelaskan kasus penggunaan umum untuk permintaan net deklaratif. Petunjuk di bawah hanya memberikan ringkasan singkat. Informasi selengkapnya tentang semua informasi di sini dijelaskan dalam referensi API di bagian chrome.declarativeNetRequest
Memblokir satu URL
Kasus penggunaan umum di Manifes V2 adalah memblokir permintaan web menggunakan peristiwa onBeforeRequest
di skrip latar belakang.
chrome.webRequest.onBeforeRequest.addListener((e) => { return { cancel: true }; }, { urls: ["https://www.example.com/*"] }, ["blocking"]);
Untuk Manifes V3, buat aturan declarativeNetRequest
baru menggunakan jenis tindakan "block"
. Perhatikan objek "condition"
dalam contoh aturan. "urlFilter"
-nya menggantikan opsi urls
yang diteruskan ke pemroses webRequest
. Array "resourceTypes"
menentukan kategori resource yang akan diblokir. Contoh ini hanya memblokir halaman HTML utama, tetapi Anda dapat, misalnya, hanya memblokir font.
[ { "id" : 1, "priority": 1, "action" : { "type" : "block" }, "condition" : { "urlFilter" : "||example.com", "resourceTypes" : ["main_frame"] } } ]
Agar ini berfungsi, Anda harus memperbarui izin ekstensi. Di manifest.json
, ganti izin "webRequestBlocking"
dengan izin "declarativeNetRequest"
. Perhatikan bahwa URL dihapus dari kolom "permissions"
karena konten pemblokiran tidak memerlukan izin host. Seperti yang ditunjukkan di atas, file aturan menentukan host atau host tempat permintaan net deklaratif berlaku.
Jika Anda ingin mencobanya, kode di bawah tersedia di repo contoh kami.
"permissions": [ "webRequestBlocking", "https://*.example.com/*" ]
"permissions": [ "declarativeNetRequest", ]
Mengalihkan beberapa URL
Kasus penggunaan umum lainnya di Manifes V2 adalah menggunakan peristiwa BeforeRequest
untuk mengalihkan permintaan web.
chrome.webRequest.onBeforeRequest.addListener((e) => { console.log(e); return { redirectUrl: "https://developer.chrome.com/docs/extensions/mv3/intro/" }; }, { urls: [ "https://developer.chrome.com/docs/extensions/mv2/" ] }, ["blocking"] );
Untuk Manifes V3, gunakan jenis tindakan "redirect"
. Seperti sebelumnya, "urlFilter"
menggantikan opsi url
yang diteruskan ke pemroses webRequest
. Perhatikan bahwa untuk contoh ini, objek "action"
file aturan berisi kolom "redirect"
yang berisi URL yang akan ditampilkan, bukan URL yang difilter.
[ { "id" : 1, "priority": 1, "action": { "type": "redirect", "redirect": { "url": "https://developer.chrome.com/docs/extensions/mv3/intro/" } }, "condition": { "urlFilter": "https://developer.chrome.com/docs/extensions/mv2/", "resourceTypes": ["main_frame"] } }
Skenario ini juga memerlukan perubahan pada izin ekstensi. Seperti sebelumnya, ganti izin "webRequestBlocking"
dengan izin "declarativeNetRequest"
. URL akan dipindahkan lagi dari manifest.json
ke file aturan. Perhatikan bahwa pengalihan juga memerlukan izin "declarativeNetRequestWithHostAccess"
selain izin host.
Jika Anda ingin mencobanya, kode di bawah tersedia di repo contoh kami.
"permissions": [ "webRequestBlocking", "https://developer.chrome.com/docs/extensions/*", "https://developer.chrome.com/docs/extensions/reference" ]
"permissions": [ "declarativeNetRequestWithHostAccess" ], "host_permissions": [ "https://developer.chrome.com/*" ]
Memblokir cookie
Di Manifest V2, pemblokiran cookie memerlukan intersepsi header permintaan web sebelum dikirim dan menghapus header tertentu.
chrome.webRequest.onBeforeSendHeaders.addListener( function(details) { removeHeader(details.requestHeaders, 'cookie'); return {requestHeaders: details.requestHeaders}; }, // filters {urls: ['https://*/*', 'http://*/*']}, // extraInfoSpec ['blocking', 'requestHeaders', 'extraHeaders']);
Manifes V3 juga melakukannya dengan aturan dalam file aturan. Kali ini jenis tindakannya adalah "modifyHeaders"
. File ini menggunakan array objek "requestHeaders"
yang menentukan header yang akan diubah dan cara mengubahnya. Perhatikan bahwa objek "condition"
hanya berisi array "resourceTypes"
. Kode ini mendukung nilai yang sama dengan contoh sebelumnya.
Jika Anda ingin mencobanya, kode di bawah tersedia dalam contoh repo kami.
[ { "id": 1, "priority": 1, "action": { "type": "modifyHeaders", "requestHeaders": [ { "header": "cookie", "operation": "remove" } ] }, "condition": { "urlFilter": "|*?no-cookies=1", "resourceTypes": ["main_frame"] } } ]
Skenario ini juga memerlukan perubahan pada izin ekstensi. Seperti sebelumnya, ganti izin "webRequestBlocking"
dengan izin "declarativeNetRequest"
.
"permissions": [ "webRequest", "webRequestBlocking", "https://*/*", "http://*/*" ],
"permissions": [ "declarativeNetRequest", ], "host_permissions": [ "" ]