Ekstensi proses debug

Ekstensi dapat memanfaatkan manfaat proses debug yang sama yang disediakan Chrome DevTools untuk halaman web, tetapi memiliki properti perilaku yang unik. Untuk menjadi debugger ekstensi master, Anda harus memahami perilaku ini, cara kerja komponen ekstensi satu sama lain, dan tempat menemukan bug. Tutorial ini memberi developer pemahaman dasar tentang ekstensi proses debug.

Menemukan log

Ekstensi terdiri dari berbagai komponen, 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 dalam huruf merah.

Klik tombol Error 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 Periksa tampilan.

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 "I" huruf besar. Perbarui kode untuk mencerminkan panggilan yang benar, klik tombol Hapus semuanya 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 akan muncul kembali. Klik 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 tahu tempat untuk memasukkan skrip konten. Hal ini dapat diperbaiki dengan memanggil metode tabs.query(), lalu memilih tab yang 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, lalu klik kotak hijau. Dan... tidak, latar belakang masih belum mengubah warna. Kembali ke Halaman Pengelolaan Ekstensi dan... tidak ada tombol Errors. Penyebab yang mungkin terjadi 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, lalu pilih ekstensi.

Error ini 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 halaman penggantian 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 sebelum developer yang paling cepat sekalipun 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 manifest-nya.

  {
    "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 informasi lebih lanjut tentang proses debug ekstensi, tonton Mengembangkan dan Men-debug. Pelajari lebih lanjut Chrome Devtools dengan membaca dokumentasi.