Ekstensi dapat memanfaatkan manfaat proses debug yang sama seperti yang disediakan Chrome DevTools untuk web pages, tetapi ekstensi memiliki properti perilaku yang unik. Untuk menjadi debugger ekstensi yang andal, Anda harus memahami perilaku ini, cara komponen ekstensi bekerja sama, dan tempat untuk menemukan bug. Tutorial ini memberikan pemahaman dasar kepada developer tentang ekstensi proses debug.
Menemukan log
Ekstensi terdiri dari banyak komponen yang berbeda, dan komponen ini memiliki tanggung jawab masing-masing. Download ekstensi yang rusak di sini untuk mulai menemukan log error untuk berbagai komponen ekstensi.
Skrip latar belakang
Buka halaman pengelolaan ekstensi Chrome di chrome://extensions dan pastikan mode developer aktif. Klik tombol Load Unpacked dan pilih direktori ekstensi yang rusak. Setelah dimuat, ekstensi akan memiliki tiga tombol: Details, Remove, dan Errors dengan huruf merah.
Klik tombol Errors untuk melihat log error. Sistem ekstensi telah menemukan masalah dalam skrip latar belakang.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Selain itu, panel Chrome DevTools dapat dibuka untuk skrip latar belakang dengan memilih link biru di samping Inspect views.
Kembali ke kode.
chrome.runtime.oninstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Skrip latar belakang mencoba memproses peristiwa onInstalled, tetapi nama properti
memerlukan huruf "I" besar. Perbarui kode untuk mencerminkan panggilan yang benar, klik tombol Clear all di sudut kanan atas, lalu muat ulang ekstensi.
Pop-up
Setelah ekstensi diinisialisasi dengan benar, komponen lain dapat diuji. Muat ulang halaman ini, atau buka tab baru dan buka halaman mana pun di developer.chrome.com, buka pop-up, lalu klik kotak hijau. Dan... tidak ada yang terjadi.
Kembali ke Halaman Pengelolaan Ekstensi, tombol Errors akan muncul kembali. Klik tombol tersebut untuk melihat log baru.
Uncaught ReferenceError: tabs is not defined
Error pop-up juga dapat dilihat dengan memeriksa pop-up.
Error, tabs is undefined, menunjukkan bahwa ekstensi tidak mengetahui tempat untuk menyisipkan skrip konten.
Hal ini dapat diperbaiki dengan memanggil metode tabs.query(), lalu memilih tab aktif.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = color;'});
});
};
Perbarui kode, klik tombol Clear all di sudut kanan atas, lalu muat ulang ekstensi.
Skrip konten
Muat ulang halaman, buka pop-up, lalu klik kotak hijau. Dan... tidak, latar belakangnya masih belum berubah warna. Kembali ke Halaman Pengelolaan Ekstensi dan... tidak ada tombol Errors. Kemungkinan penyebabnya adalah skrip konten, yang berjalan di dalam halaman web.
Buka panel DevTools halaman web yang coba diubah oleh ekstensi.
Hanya error runtime, console.warning, dan console.error yang akan dicatat di Halaman Pengelolaan Ekstensi.
Untuk menggunakan DevTools dari dalam skrip konten, klik panah dropdown di samping top dan pilih ekstensi.
Error tersebut menunjukkan bahwa color tidak ditentukan. Ekstensi tidak boleh meneruskan variabel dengan benar.
Koreksi skrip yang disisipkan untuk meneruskan variabel warna ke dalam kode.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Tab ekstensi
Log untuk halaman ekstensi yang ditampilkan sebagai tab, seperti halaman penggantian dan opsi halaman penuh, dapat ditemukan di konsol halaman web dan di halaman pengelolaan ekstensi.
Memantau permintaan jaringan
Pop-up sering kali membuat semua permintaan jaringan yang diperlukan bahkan sebelum developer tercepat dapat membuka DevTools. Untuk melihat permintaan ini, muat ulang dari dalam panel jaringan. Tindakan ini akan memuat ulang pop-up tanpa menutup panel DevTools.
Mendeklarasikan izin
Meskipun ekstensi memiliki kemampuan yang sama dengan halaman web, ekstensi sering kali memerlukan izin untuk menggunakan fitur tertentu , seperti cookie, penyimpanan, dan Cross-Origin XMLHttpRequest. Lihat artikel izin dan Chrome API yang tersedia untuk memastikan ekstensi meminta izin yang benar dalam manifesnya.
{
"name": "Broken Background Color",
"version": "1.0",
"description": "Fix an Extension!",
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
Langkah berikutnya
Untuk mengetahui informasi lebih lanjut tentang ekstensi proses debug, tonton Pengembangan dan Proses Debug. Pelajari lebih lanjut tentang Chrome DevTools dengan membaca dokumentasinya.