Ekstensi dapat memanfaatkan manfaat proses debug yang sama dengan yang diberikan Chrome DevTools untuk halaman web, tetapi ekstensi ini memiliki properti perilaku yang unik. Untuk menjadi debugger ekstensi master, diperlukan pemahaman tentang perilaku ini, cara kerja komponen ekstensi, dan tempat untuk menempatkan bug. Tutorial ini memberikan pemahaman dasar tentang ekstensi proses debug kepada developer.
Menemukan log
Ekstensi terdiri dari banyak komponen, dan komponen ini memiliki tanggung jawab masing-masing. Download ekstensi 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, lalu pilih direktori ekstensi yang rusak. Setelah dimuat, ekstensi akan memiliki tiga tombol: Details, Remove, dan Errors dalam huruf merah.
Klik tombol Error untuk melihat log error. Sistem ekstensi menemukan masalah di 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 besar "I". Update 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 Error telah muncul kembali. Klik tombol tersebut untuk melihat log yang baru.
Uncaught ReferenceError: tabs is not defined
Error pop-up juga dapat dilihat dengan memeriksa pop-up.
Error, tabs is undefined, menyatakan bahwa ekstensi tidak tahu tempat untuk memasukkan 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 Hapus semua di sudut kanan atas, lalu muat ulang ekstensi.
Skrip konten
Muat ulang halaman, buka pop-up, dan klik kotak hijau. Dan... tidak, latar belakangnya masih belum berubah warna! Kembali ke Halaman Pengelolaan Ekstensi dan... tidak ada tombol Error. Kemungkinan penyebabnya adalah skrip konten, yang berjalan di dalam halaman web.
Buka panel DevTools di 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 atas dan pilih ekstensi.
Error menyatakan bahwa color tidak ditentukan. Ekstensi tidak boleh meneruskan variabel dengan benar.
Perbaiki skrip yang dimasukkan untuk meneruskan variabel warna ke dalam kode.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Tab ekstensi
Log untuk halaman ekstensi yang ditampilkan sebagai tab, seperti ganti halaman dan opsi halaman penuh, dapat ditemukan di konsol halaman web dan di halaman pengelolaan ekstensi.
Memantau permintaan jaringan
Pop-up sering kali akan membuat semua permintaan jaringan yang diperlukan bahkan sebelum developer yang paling cepat 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 memiliki kemampuan yang serupa dengan halaman web, ekstensi sering kali memerlukan izin untuk menggunakan fitur tertentu, seperti cookie, penyimpanan, dan Cross-Origin XMLHttpRequsts. Lihat artikel izin dan Chrome API yang tersedia untuk memastikan ekstensi meminta izin yang benar dalam manifes.
{
"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 selengkapnya tentang proses debug ekstensi, tonton Developing dan Debugging. Pelajari Chrome Devtools lebih lanjut dengan membaca dokumentasinya.