Cara Transisi ke Manifest V3 untuk Ekstensi Chrome

Meskipun saya bukan pemrogram ekstensi Chrome biasa, saya pasti telah membuat kode ekstensi yang cukup dan memiliki portofolio pengembangan web yang cukup luas untuk mengetahui cara saya menyelesaikan tugas. Namun, baru-baru ini, klien saya menolak salah satu ekstensi saya karena saya menerima umpan balik bahwa ekstensi saya "usang".

Saat saya berusaha mencari tahu apa yang salah, saya menyembunyikan rasa malu saya di bawah karpet dan segera mulai terjun kembali ke dunia Ekstensi Chrome. Sayangnya, informasi tentang Manifest V3 sangat sedikit dan sulit bagi saya untuk memahami dengan cepat tentang transisi ini.

Tak perlu dikatakan, dengan pekerjaan yang tertunda, saya harus dengan susah payah menavigasi jalan saya Dokumentasi Pengembang Chrome Google dan mencari tahu sendiri. Sementara saya menyelesaikan pekerjaan, saya tidak ingin pengetahuan dan penelitian saya di bidang ini sia-sia dan memutuskan untuk membagikan apa yang saya harap dapat saya akses dengan mudah dalam perjalanan belajar saya.

Mengapa transisi ke Manifest 3 penting

Manifest V3 adalah API yang akan digunakan Google di browser Chrome-nya. Ini adalah penerus API saat ini, Manifest V2, dan mengatur bagaimana ekstensi Chrome berinteraksi dengan browser. Manifest V3 memperkenalkan perubahan signifikan pada aturan untuk ekstensi, beberapa di antaranya akan menjadi andalan baru dari V2 yang biasa kami gunakan.

Transisi ke Manifest V3 dapat diringkas seperti:

1. Transisi tersebut telah berlangsung sejak 2018.
2. Manifest V3 secara resmi akan mulai diluncurkan pada Januari 2023.
3. Pada bulan Juni 2023, ekstensi yang menjalankan Manifest V2 tidak akan tersedia lagi di Toko Web Chrome.
4. Ekstensi yang tidak mematuhi aturan baru yang diperkenalkan di Manifest V3 pada akhirnya akan dihapus dari Toko Web Chrome.

Salah satu tujuan utama Manifest V3 adalah membuat pengguna lebih aman dan meningkatkan pengalaman browser secara keseluruhan. Sebelumnya, banyak ekstensi browser mengandalkan kode di cloud, yang berarti sulit untuk melakukannya menilai apakah perpanjangan itu berisiko. Manifest V3 bertujuan untuk mengatasi hal ini dengan meminta ekstensi untuk memuat semua kode yang akan mereka jalankan, memungkinkan Google memindai mereka dan mendeteksi potensi risiko. Itu juga memaksa ekstensi untuk meminta izin dari Google untuk perubahan yang dapat mereka terapkan di browser.

Tetap mengikuti perkembangan transisi Google ke Manifest V3 penting karena memperkenalkan aturan baru untuk ekstensi yang bertujuan untuk meningkatkan keamanan pengguna dan pengalaman browser secara keseluruhan, dan ekstensi yang tidak mematuhi aturan ini pada akhirnya akan dihapus dari Web Chrome Toko.

Singkatnya, semua kerja keras Anda dalam membuat ekstensi yang menggunakan Manifest V2 bisa jadi sia-sia jika Anda tidak melakukan transisi ini dalam beberapa bulan mendatang.

Perbedaan utama antara Manifest V2 dan V3

Ada banyak perbedaan di antara keduanya, dan meskipun saya sangat menyarankan Anda untuk terus membaca Panduan "Migrasi ke Manifest V3" Chrome, inilah ringkasan singkat dan manis dari poin-poin penting:

1. Pekerja layanan ganti halaman latar belakang di Manifest V3.
2. Modifikasi permintaan jaringan ditangani dengan yang baru declarativeNetRequest API di Manifest V3.
3. Di Manifest V3, ekstensi hanya dapat menjalankan JavaScript yang disertakan dalam paketnya dan tidak dapat menggunakan kode yang dihosting dari jarak jauh.
4. Manifest V3 memperkenalkan promise mendukung banyak metode, meskipun panggilan balik masih didukung sebagai alternatif.
5. Izin host di Manifest V3 adalah elemen terpisah dan harus ditentukan di "host_permissions" lapangan.
6. Kebijakan keamanan konten di Manifest V3 adalah objek dengan anggota yang mewakili konteks kebijakan keamanan konten alternatif (CSP), bukan string seperti di Manifest V2.

Dalam Manifes Ekstensi Chrome sederhana yang mengubah latar belakang laman web, tampilannya mungkin seperti ini:

// Manifest V2
{ "manifest_version": 2, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "scripts": ["background.js"], "persistent": true }, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "optional_permissions": ["<all_urls>"]
}

// Manifest V3
{ "manifest_version": 3, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "host_permissions": [ "<all_urls>" ]
}

Jika Anda menemukan beberapa tag di atas tampak asing bagi Anda, teruslah membaca untuk mencari tahu apa yang perlu Anda ketahui.

Cara transisi lancar ke Manifest V3

Saya telah meringkas transisi ke Manifest V3 dalam empat bidang utama. Tentu saja, meskipun ada banyak lonceng dan peluit di Manifest V3 baru yang perlu diimplementasikan dari Manifest V2 lama, menerapkan perubahan di keempat area ini akan membuat Ekstensi Chrome Anda berada di jalur yang benar untuk transisi akhirnya.

Empat bidang utama tersebut adalah:

1. Memperbarui struktur dasar Manifest Anda.
2. Ubah izin host Anda.
3. Perbarui kebijakan keamanan konten.
4. Ubah penanganan permintaan jaringan Anda.

Dengan keempat area ini, fundamental Manifest Anda akan siap untuk transisi ke Manifest V3. Mari kita lihat masing-masing aspek utama ini secara mendetail dan lihat bagaimana kami dapat bekerja untuk memastikan Ekstensi Chrome Anda dari transisi ini di masa mendatang.

Memperbarui struktur dasar Manifest Anda

Memperbarui struktur dasar manifes Anda adalah langkah pertama dalam transisi ke Manifest V3. Perubahan terpenting yang perlu Anda lakukan adalah mengubah nilai "manifest_version" elemen ke 3, yang menentukan bahwa Anda menggunakan kumpulan fitur Manifest V3.

Salah satu perbedaan utama antara Manifest V2 dan V3 adalah penggantian halaman latar belakang dengan pekerja layanan ekstensi tunggal di Manifest V3. Anda harus mendaftarkan pekerja layanan di bawah "background" lapangan, dengan menggunakan "service_worker" kunci dan tentukan satu file JavaScript. Meskipun Manifest V3 tidak mendukung banyak skrip latar belakang, Anda dapat secara opsional mendeklarasikan service worker sebagai ES Module dengan menentukan "type": "module", yang memungkinkan Anda mengimpor kode lebih lanjut.

Dalam Manifest V3, file "browser_action" dan "page_action" properti disatukan menjadi satu "action" Properti. Anda harus mengganti properti ini dengan "action" dalam manifes Anda. Demikian pula, "chrome.browserAction" dan "chrome.pageAction" API disatukan menjadi satu API “Tindakan” di Manifest V3, dan Anda harus bermigrasi ke API ini.

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},

// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

Secara keseluruhan, memperbarui struktur dasar manifes Anda merupakan langkah penting dalam proses transisi ke Manifest V3, karena memungkinkan Anda memanfaatkan fitur dan perubahan baru yang diperkenalkan dalam versi API ini.

Ubah izin host Anda

Langkah kedua dalam transisi ke Manifest V3 adalah memodifikasi izin host Anda. Di Manifest V2, Anda menentukan izin host di "permissions" bidang dalam file manifes. Di Manifest V3, izin host adalah elemen terpisah, dan Anda harus menentukannya di "host_permissions" bidang dalam file manifes.

Berikut adalah contoh cara memodifikasi izin host Anda:

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]

// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

Perbarui kebijakan keamanan konten

Untuk memperbarui CSP ekstensi Manifest V2 Anda agar sesuai dengan Manifest V3, Anda perlu membuat beberapa perubahan pada file manifes Anda. Di Manifest V2, CSP ditentukan sebagai string di "content_security_policy" bidang manifes.

Di Manifest V3, CSP kini menjadi objek dengan anggota berbeda yang mewakili konteks CSP alternatif. Alih-alih satu "content_security_policy" bidang, Anda sekarang harus menentukan bidang terpisah untuk "content_security_policy.extension_pages" dan "content_security_policy.sandbox", bergantung pada jenis laman ekstensi yang Anda gunakan.

Anda juga harus menghapus semua referensi ke domain eksternal di "script-src", "worker-src", "object-src", dan "style-src" arahan jika mereka hadir. Penting untuk membuat pembaruan ini ke CSP Anda untuk memastikan keamanan dan stabilitas ekstensi Anda di Manifest V3.

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

Ubah penanganan permintaan jaringan Anda

Langkah terakhir dalam transisi ke Manifest V3 adalah memodifikasi penanganan permintaan jaringan Anda. Di Manifest V2, Anda akan menggunakan chrome.webRequest API untuk mengubah permintaan jaringan. Namun, API ini diganti di Manifest V3 oleh declarativeNetRequest API.

Untuk menggunakan API baru ini, Anda harus menentukan declarativeNetRequest izin dalam manifes Anda dan perbarui kode Anda untuk menggunakan API baru. Satu perbedaan utama antara kedua API adalah bahwa declarativeNetRequest API mengharuskan Anda menentukan daftar alamat yang telah ditentukan sebelumnya untuk diblokir, daripada dapat memblokir seluruh kategori permintaan HTTP seperti yang Anda bisa dengan chrome.webRequest API.

Penting untuk membuat perubahan ini dalam kode Anda untuk memastikan bahwa ekstensi Anda terus berfungsi dengan baik di bawah Manifest V3. Berikut adalah contoh bagaimana Anda akan memodifikasi manifes Anda untuk menggunakan declarativeNetRequest API dalam Manifest V3:

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

Anda juga perlu memperbarui kode ekstensi untuk menggunakan declarativeNetRequest API bukannya chrome.webRequest API.

Aspek lain yang perlu Anda periksa

Apa yang saya bahas hanyalah puncak gunung es. Tentu saja, jika saya ingin membahas semuanya, saya bisa berada di sini selama berhari-hari dan tidak ada gunanya memiliki panduan Pengembang Chrome Google. Sementara apa yang saya bahas akan membuat Anda cukup siap di masa depan untuk mempersenjatai ekstensi Chrome Anda dalam transisi ini, berikut adalah beberapa hal lain yang mungkin ingin Anda lihat untuk memastikan ekstensi Anda berfungsi dengan baik.

• Memigrasikan skrip latar belakang ke konteks eksekusi service worker: Seperti yang disebutkan sebelumnya, Manifest V3 mengganti halaman latar belakang dengan satu pekerja layanan ekstensi, sehingga mungkin perlu memperbarui skrip latar belakang untuk beradaptasi dengan konteks eksekusi pekerja layanan.
• Menyatukan **chrome.browserAction** dan **chrome.pageAction** Lebah: Kedua API yang setara ini disatukan menjadi satu API di Manifest V3, sehingga mungkin diperlukan untuk bermigrasi ke Action API.
• Fungsi migrasi yang mengharapkan konteks latar belakang Manifest V2: Adopsi pekerja layanan di Manifest V3 tidak kompatibel dengan metode seperti chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs(), dan chrome.extension.getViews(). Bermigrasi ke desain yang meneruskan pesan antara konteks lain dan pekerja layanan latar belakang mungkin diperlukan.
• Memindahkan permintaan CORS dalam skrip konten ke pekerja layanan latar belakang: Mungkin perlu memindahkan permintaan CORS dalam skrip konten ke pekerja layanan latar belakang untuk mematuhi Manifest V3.
• Bermigrasi dari mengeksekusi kode eksternal atau string arbitrer: Manifest V3 tidak lagi mengizinkan eksekusi penggunaan logika eksternal chrome.scripting.executeScript({code: '...'}), eval(), dan new Function(). Mungkin perlu memindahkan semua kode eksternal (JavaScript, WebAssembly, CSS) ke bundel ekstensi, memperbarui skrip dan referensi gaya untuk memuat sumber daya dari bundel ekstensi, dan menggunakan chrome.runtime.getURL() untuk membangun URL sumber daya saat runtime.
• Memperbarui skrip dan metode CSS tertentu di Tabs API: Seperti disebutkan sebelumnya, beberapa metode berpindah dari Tabs API ke Scripting API di Manifest V3. Mungkin diperlukan untuk memperbarui setiap panggilan ke metode ini untuk menggunakan API Manifest V3 yang benar.

Dan masih banyak lagi!

Jangan ragu untuk meluangkan waktu untuk mendapatkan informasi terbaru tentang semua perubahan. Bagaimanapun, perubahan ini tidak dapat dihindari dan jika Anda tidak ingin ekstensi Manifest V2 Anda hilang karena menghindari transisi ini, luangkan waktu untuk mempersenjatai diri dengan pengetahuan yang diperlukan.

Di sisi lain, jika Anda baru dalam memprogram ekstensi Chrome dan ingin memulai, cara terbaik untuk melakukannya adalah dengan terjun ke dunia alat Pengembang Web Chrome. Saya melakukannya melalui kursus Linkedin Learning, yang membuat saya mempercepat dengan cukup cepat. Setelah Anda memiliki pengetahuan dasar tersebut, kembalilah ke artikel ini dan terjemahkan apa yang Anda ketahui ke Manifest V3!

Jadi, bagaimana saya akan menggunakan fitur-fitur di Manifest V3 yang baru di masa mendatang?

Bagi saya, transisi ke Manifest V3 dan penghapusan chrome.webRequest API tampaknya mengalihkan ekstensi dari kasus penggunaan yang berpusat pada data (seperti pemblokir iklan) ke penggunaan yang lebih fungsional dan berbasis aplikasi. Saya telah menjauh dari pengembangan aplikasi akhir-akhir ini karena bisa menjadi cukup intensif sumber daya kadang. Namun, perubahan ini mungkin yang membawa saya kembali!

Munculnya alat AI belakangan ini, banyak dengan API yang tersedia untuk digunakan, telah memicu banyak aplikasi SaaS baru dan segar. Secara pribadi, menurut saya ini datang pada waktu yang tepat dengan peralihan ke lebih banyak ekstensi Chrome berbasis aplikasi! Sementara banyak ekstensi lama mungkin terhapus dari transisi ini, banyak ekstensi baru yang dibangun berdasarkan ide SaaS baru akan menggantikannya.

Karenanya, ini adalah pembaruan yang menarik untuk naik dan mengubah ekstensi lama atau membuat yang baru! Secara pribadi, saya melihat banyak kemungkinan dalam menggunakan API yang melibatkan AI yang digunakan dalam ekstensi untuk meningkatkan pengalaman menjelajah pengguna. Tapi itu benar-benar hanya puncak gunung es. Jika Anda benar-benar ingin mempelajari ekstensi profesional Anda sendiri atau menghubungi perusahaan untuk membuat/memperbarui ekstensi untuk mereka, saya akan merekomendasikan mengupgrade akun Gmail Anda untuk manfaat yang diberikannya dalam berkolaborasi, mengembangkan, dan memublikasikan ekstensi ke Toko Web Chrome.

Namun, ingatlah bahwa setiap persyaratan pengembang berbeda, jadi pelajari apa yang Anda butuhkan untuk mempertahankan ekstensi Anda saat ini, atau yang baru!

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/