Ringkasan arsitektur

Ekstensi adalah paket zip HTML, CSS, JavaScript, gambar, dan file lainnya yang digunakan di platform web, yang menyesuaikan pengalaman penjelajahan Google Chrome. Ekstensi dibuat menggunakan teknologi web dan dapat menggunakan API yang sama seperti yang diberikan browser untuk web terbuka.

Ekstensi memiliki berbagai kemungkinan fungsional. Mereka dapat memodifikasi konten web yang dilihat dan berinteraksi dengan pengguna atau memperluas dan mengubah perilaku browser itu sendiri.

Pertimbangkan ekstensi sebagai gerbang untuk menjadikan browser Chrome sebagai browser yang paling dipersonalisasi.

File ekstensi

Ekstensi bervariasi dalam jenis file dan jumlah direktori, tetapi semuanya harus memiliki [manifes][docs-manifest]. Beberapa ekstensi dasar, tetapi bermanfaat, dapat hanya terdiri dari manifes dan ikon toolbar-nya.

File manifes, yang berjudul manifest.json, memberikan informasi kepada browser tentang ekstensi, seperti file paling penting dan kemampuan yang mungkin digunakan ekstensi.

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

Ekstensi harus memiliki ikon yang diletakkan di toolbar browser. Ikon toolbar memungkinkan akses yang mudah dan membuat pengguna mengetahui ekstensi mana yang diinstal. Sebagian besar pengguna akan berinteraksi dengan ekstensi yang menggunakan popup dengan mengklik ikon.

Ekstensi Google Mail Checker ini menggunakan tindakan browser:

Screenshot ekstensi Google Mail Checker

Ekstensi Mappy ini menggunakan tindakan halaman dan skrip konten:

Screenshot ekstensi Mappy

Merujuk ke file

File ekstensi dapat dirujuk dengan menggunakan URL relatif, sama seperti file pada halaman HTML biasa.

<img src="images/my_image.png">

Selain itu, setiap file juga dapat diakses menggunakan URL absolut.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

Di URL absolut, EXTENSION_ID adalah ID unik yang dibuat sistem ekstensi untuk setiap ekstensi. ID untuk semua ekstensi yang dimuat dapat dilihat dengan membuka URL chrome://extensions. PATH_TO_FILE adalah lokasi file pada folder teratas ekstensi; lokasi ini cocok dengan URL relatif.

Saat mengerjakan ekstensi yang belum dibuka, ID ekstensi dapat berubah. Secara khusus, ID ekstensi yang belum dibuka akan berubah jika ekstensi dimuat dari direktori yang berbeda; ID akan berubah lagi saat ekstensi dikemas. Jika kode ekstensi bergantung pada URL mutlak, kode ekstensi dapat menggunakan metode chrome.runtime.getURL() untuk menghindari hardcode ID selama pengembangan.

Arsitektur

Arsitektur ekstensi akan bergantung pada fungsinya, tetapi banyak ekstensi yang andal akan menyertakan beberapa komponen:

Skrip latar belakang

Skrip latar belakang adalah pengendali peristiwa ekstensi yang berisi pemroses untuk peristiwa browser yang penting bagi ekstensi. Fungsi ini tidak aktif hingga sebuah peristiwa diaktifkan, lalu menjalankan logika yang diinstruksikan. Skrip latar belakang yang efektif hanya dimuat saat diperlukan dan dibongkar saat tidak ada aktivitas.

Elemen UI

Antarmuka pengguna ekstensi harus terarah dan minimal. UI harus menyesuaikan atau meningkatkan pengalaman penjelajahan tanpa mengganggunya. Sebagian besar ekstensi memiliki tindakan browser atau tindakan halaman, tetapi dapat berisi bentuk UI lainnya, seperti menu konteks, penggunaan omnibox, atau pembuatan pintasan keyboard.

Halaman UI ekstensi, seperti popup, dapat berisi halaman HTML biasa dengan logika JavaScript. Ekstensi juga dapat memanggil tabs.create atau window.open() untuk menampilkan file HTML tambahan yang ada dalam ekstensi.

Ekstensi yang menggunakan tindakan halaman dan pop-up dapat menggunakan API konten deklaratif untuk menetapkan aturan dalam skrip latar belakang saat pop-up tersedia bagi pengguna. Saat kondisi terpenuhi, skrip latar belakang akan berkomunikasi dengan pop-up agar ikonnya dapat diklik oleh pengguna.

Jendela browser yang berisi tindakan halaman yang menampilkan pop-up

Skrip konten

Ekstensi yang membaca atau menulis ke halaman web menggunakan skrip konten. Skrip konten berisi JavaScript yang dieksekusi dalam konteks halaman yang telah dimuat ke dalam browser. Skrip konten membaca dan mengubah DOM halaman web yang dikunjungi browser.

Jendela browser dengan tindakan halaman dan skrip konten

Skrip konten dapat berkomunikasi dengan ekstensi induknya dengan bertukar pesan dan menyimpan nilai menggunakan storage API.

Menampilkan jalur komunikasi antara skrip konten dan ekstensi induk

Halaman opsi

Sama seperti ekstensi yang memungkinkan pengguna menyesuaikan browser Chrome, halaman opsi juga mengaktifkan penyesuaian ekstensi. Opsi dapat digunakan untuk mengaktifkan fitur dan memungkinkan pengguna memilih fungsionalitas apa yang relevan dengan kebutuhan mereka.

Menggunakan Chrome API

Selain memiliki akses ke API yang sama seperti halaman web, ekstensi juga dapat menggunakan API khusus ekstensi yang membuat integrasi erat dengan browser. Ekstensi dan halaman dapat mengakses metode window.open() standar untuk membuka URL, tetapi ekstensi dapat menentukan jendela mana URL harus ditampilkan dengan menggunakan metode tabs.create Chrome API.

Metode asinkron vs. sinkron

Sebagian besar metode Chrome API bersifat asinkron: metode tersebut segera kembali tanpa menunggu operasi selesai. Jika ekstensi perlu mengetahui hasil operasi asinkron, ekstensi dapat meneruskan fungsi callback ke dalam metode. Callback akan dijalankan nanti, kemungkinan jauh kemudian, setelah metode ditampilkan.

Jika ekstensi perlu membuka URL baru di tab yang saat ini dipilih pengguna, ekstensi harus mendapatkan ID tab saat ini, lalu memperbarui alamat tab tersebut menjadi URL baru.

Jika metode tabs.query bersifat sinkron, mungkin akan terlihat seperti di bawah ini.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

Pendekatan ini akan gagal karena query() bersifat asinkron. Metode ini kembali tanpa menunggu pekerjaan selesai, dan tidak menampilkan nilai. Metode bersifat asinkron jika parameter callback tersedia dalam tanda tangannya.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

Untuk mengkueri tab dengan benar dan memperbarui URL-nya, ekstensi harus menggunakan parameter callback.

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

Dalam kode di atas, baris dieksekusi dalam urutan berikut: 1, 4, 2. Fungsi callback yang ditetapkan untuk query() dipanggil, lalu mengeksekusi baris 2, tetapi hanya setelah informasi tentang tab yang saat ini dipilih tersedia. Hal ini terjadi beberapa saat setelah query() ditampilkan. Meskipun update() bersifat asinkron, kode tidak menggunakan parameter callback karena ekstensi tidak melakukan apa pun terhadap hasil update.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

Metode ini secara sinkron menampilkan URL sebagai string dan tidak melakukan pekerjaan asinkron lainnya.

Detail selengkapnya

Untuk informasi selengkapnya, baca dokumen referensi Chrome API dan tonton video berikut.

Komunikasi antar halaman

Komponen yang berbeda dalam sebuah ekstensi sering kali perlu berkomunikasi satu sama lain. Halaman HTML yang berbeda dapat saling menemukan menggunakan metode chrome.extension, seperti getViews() dan getBackgroundPage(). Setelah halaman memiliki referensi ke halaman ekstensi lain, halaman pertama dapat memanggil fungsi di halaman lain dan memanipulasi DOM-nya. Selain itu, semua komponen ekstensi dapat mengakses nilai yang disimpan menggunakan storage API dan berkomunikasi melalui pengiriman pesan.

Menyimpan data dan mode samaran

Ekstensi dapat menyimpan data menggunakan storage API, web storage API HTML5 , atau dengan membuat permintaan server yang menghasilkan penyimpanan data. Jika ekstensi perlu menyimpan sesuatu, pertama-tama pertimbangkan apakah file tersebut berasal dari jendela samaran. Secara default, ekstensi tidak berjalan di jendela samaran.

Mode Samaran menjanjikan bahwa jendela tidak akan meninggalkan jalur. Saat menangani data dari jendela samaran, ekstensi harus mematuhi promise ini. Jika ekstensi biasanya menyimpan histori penjelajahan, jangan simpan histori dari jendela samaran. Namun, ekstensi dapat menyimpan preferensi pengaturan dari jendela mana pun, baik dalam mode samaran maupun tidak.

Untuk mendeteksi apakah jendela berada dalam mode samaran, periksa properti incognito dari objek tabs.Tab atau windows.Window yang relevan.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

Langkah selanjutnya

Setelah membaca ringkasan dan menyelesaikan tutorial Memulai, developer seharusnya siap untuk mulai menulis ekstensi mereka sendiri. Pelajari lebih dalam dunia Chrome khusus dengan berbagai referensi berikut.