Mengubah permintaan jaringan di Manifes V3
Manifes V3 mengubah cara ekstensi menangani modifikasi permintaan jaringan. Bukannya mencegat permintaan jaringan dan mengubahnya saat runtime dengan chrome.webRequest, ekstensi Anda menentukan aturan yang menjelaskan tindakan yang akan dilakukan saat serangkaian kondisi tertentu terpenuhi. Lakukan hal ini menggunakan Declarative Net Request API.
Web Request API dan Declarative Net Request API sangat berbeda. Daripada mengganti satu panggilan fungsi dengan yang lain, 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 halaman yang digunakan secara signifikan. Namespace webRequest mendukung sembilan peristiwa yang berpotensi memblokir, yang masing-masing memerlukan pengendali peristiwa dalam jumlah yang tidak terbatas. Parahnya lagi, setiap halaman web berpotensi diblokir oleh beberapa ekstensi, dan izin yang diperlukan untuk hal ini bersifat invasif. Manifes 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. Contoh ini menjelaskan konversi pemblokiran permintaan web, yang digunakan oleh Manifes V2, menjadi permintaan bersih deklaratif, yang digunakan oleh Manifes V3. Dua bagian lainnya membahas mengupdate kode yang diperlukan untuk bermigrasi ke Manifes V3 dan meningkatkan keamanan.
Update izin
Buat perubahan berikut pada kolom "permissions" di manifest.json.
- Hapus izin
"webRequest"jika Anda tidak perlu lagi mengamati permintaan jaringan. - Pindahkan Pola Pencocokan dari
"permissions"ke"host_permissions".
Anda harus menambahkan izin lainnya, bergantung pada kasus penggunaan Anda. Izin tersebut dijelaskan bersama kasus penggunaan yang didukungnya.
Membuat aturan permintaan net deklaratif
Pembuatan aturan permintaan net deklaratif memerlukan penambahan objek "declarative_net_request" ke manifest.json Anda. Blok "declarative_net_request" berisi array objek "rule_resource" yang mengarah ke file aturan. File aturan berisi array objek yang menentukan tindakan dan kondisi saat tindakan tersebut dipanggil.
Kasus penggunaan umum
Bagian berikut menjelaskan kasus penggunaan umum untuk permintaan jaringan deklaratif. Petunjuk di bawah hanya memberikan garis besar 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 aturan contoh. "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, memblokir font saja.
[
{
"id" : 1,
"priority": 1,
"action" : { "type" : "block" },
"condition" : {
"urlFilter" : "||example.com",
"resourceTypes" : ["main_frame"]
}
}
]
Agar ini berfungsi, Anda perlu memperbarui izin ekstensi. Di manifest.json, ganti izin "webRequestBlocking" dengan izin "declarativeNetRequest". Perhatikan bahwa URL dihapus dari kolom "permissions" karena memblokir konten tidak memerlukan izin host. Seperti yang ditampilkan di atas, file aturan menetapkan host atau host di mana permintaan bersih deklaratif diterapkan.
Jika Anda ingin mencobanya, kode di bawah ini tersedia di repo contoh kami.
"permissions": [
"webRequestBlocking",
"https://*.example.com/*"
]
"permissions": [
"declarativeNetRequest",
]
Mengalihkan beberapa URL
Kasus penggunaan umum lainnya di Manifest 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. Sama seperti sebelumnya, ganti izin "webRequestBlocking" dengan izin "declarativeNetRequest". URL tersebut 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 ini 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/*"
]
Blokir cookie
Di Manifes V2, pemblokiran cookie mengharuskan 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 melakukan hal ini 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". Contoh ini mendukung nilai yang sama dengan contoh sebelumnya.
Jika Anda ingin mencobanya, kode di bawah ini tersedia di repo contoh 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. Sama seperti sebelumnya, ganti izin "webRequestBlocking" dengan izin "declarativeNetRequest".
"permissions": [
"webRequest",
"webRequestBlocking",
"https://*/*",
"http://*/*"
],
"permissions": [
"declarativeNetRequest",
],
"host_permissions": [
""
]