Ekstensi adalah paket zip yang berisi HTML, CSS, JavaScript, gambar, dan file lain yang digunakan di platform web, yang menyesuaikan pengalaman penjelajahan Google Chrome. Ekstensi dibuat menggunakan teknologi web dan dapat menggunakan API yang sama yang disediakan browser untuk web terbuka.
Ekstensi memiliki berbagai kemungkinan fungsi. Ekstensi dapat mengubah konten web yang dilihat dan digunakan pengguna atau memperluas dan mengubah perilaku browser itu sendiri.
Pertimbangkan ekstensi sebagai gateway 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 berguna, mungkin hanya terdiri dari manifes dan ikon toolbar-nya.
File manifes, yang berjudul manifest.json, memberikan informasi browser tentang ekstensi, seperti file terpenting 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 berada di toolbar browser. Ikon toolbar memungkinkan akses mudah dan membuat pengguna mengetahui ekstensi mana yang diinstal. Sebagian besar pengguna akan berinteraksi dengan ekstensi yang menggunakan pop-up dengan mengklik ikon.
Ekstensi Google Mail Checker ini menggunakan tindakan browser:
Ekstensi Mappy ini menggunakan tindakan halaman dan skrip konten:
Mereferensikan file
File ekstensi dapat direferensikan menggunakan URL relatif, seperti file di 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
Dalam URL absolut, EXTENSION_ID adalah ID unik yang dihasilkan sistem ekstensi untuk setiap ekstensi. ID untuk semua ekstensi yang dimuat dapat dilihat dengan membuka URL chrome://extensions. PATH_TO_FILE adalah lokasi file di folder teratas ekstensi; cocok dengan URL relatif.
Saat menggunakan ekstensi yang tidak dikemas, ID ekstensi dapat berubah. Secara khusus, ID ekstensi yang tidak dikemas akan berubah jika ekstensi dimuat dari direktori yang berbeda; ID akan berubah lagi saat ekstensi dikemas. Jika kode ekstensi bergantung pada URL absolut, kode tersebut
dapat menggunakan metode chrome.runtime.getURL() untuk menghindari hardcode ID selama
pengembangan.
Arsitektur
Arsitektur ekstensi akan bergantung pada fungsinya, tetapi banyak ekstensi yang kuat akan menyertakan beberapa komponen:
Skrip latar belakang
Skrip latar belakang adalah pemroses peristiwa ekstensi; skrip ini berisi pemroses untuk peristiwa browser yang penting bagi ekstensi. Skrip ini tidak aktif hingga peristiwa diaktifkan, lalu menjalankan logika yang diinstruksikan. Skrip latar belakang yang efektif hanya dimuat saat diperlukan dan tidak dimuat saat tidak aktif.
Elemen UI
Antarmuka pengguna ekstensi harus memiliki tujuan dan minimal. UI harus menyesuaikan atau meningkatkan pengalaman penjelajahan tanpa mengganggu. Sebagian besar ekstensi memiliki tindakan browser atau tindakan halaman, tetapi dapat berisi bentuk UI lainnya, seperti menu konteks, penggunaan kotak serbaguna, atau pembuatan pintasan keyboard.
Halaman UI ekstensi, seperti pop-up, dapat berisi halaman HTML biasa dengan logika JavaScript. Ekstensi juga dapat memanggil tabs.create atau window.open() untuk menampilkan
file HTML tambahan yang ada di ekstensi.
Ekstensi yang menggunakan tindakan halaman dan pop-up dapat menggunakan declarative content API untuk menetapkan aturan dalam skrip latar belakang saat pop-up tersedia untuk pengguna. Saat kondisi terpenuhi, skrip latar belakang berkomunikasi dengan pop-up untuk membuat ikonnya dapat diklik oleh pengguna.
Skrip konten
Ekstensi yang membaca atau menulis ke halaman web menggunakan skrip konten. Skrip konten berisi JavaScript yang dijalankan dalam konteks halaman yang telah dimuat ke browser. Skrip konten membaca dan mengubah DOM halaman web yang dikunjungi browser.
Skrip konten dapat berkomunikasi dengan ekstensi induknya dengan bertukar pesan dan menyimpan nilai menggunakan storage API.
Halaman opsi
Sama seperti ekstensi yang memungkinkan pengguna menyesuaikan browser Chrome, halaman opsi memungkinkan penyesuaian ekstensi. Opsi dapat digunakan untuk mengaktifkan fitur dan memungkinkan pengguna memilih fungsi yang relevan dengan kebutuhan mereka.
Menggunakan Chrome API
Selain memiliki akses ke API yang sama dengan halaman web, ekstensi juga dapat menggunakan
API khusus ekstensi yang membuat integrasi yang ketat dengan browser. Ekstensi dan
halaman web dapat mengakses metode window.open() standar untuk membuka URL, tetapi ekstensi dapat
menentukan jendela tempat URL tersebut harus ditampilkan dengan menggunakan metode tabs.create Chrome API
sebagai gantinya.
Metode asinkron vs. sinkron
Sebagian besar metode Chrome API bersifat asinkron: metode ini langsung ditampilkan tanpa menunggu operasi selesai. Jika ekstensi perlu mengetahui hasil operasi asinkron, ekstensi dapat meneruskan fungsi callback ke dalam metode. Callback akan dieksekusi nanti, mungkin jauh lebih lambat, setelah metode ditampilkan.
Jika ekstensi perlu mengarahkan tab yang saat ini dipilih pengguna ke URL baru, ekstensi harus mendapatkan ID tab saat ini, lalu memperbarui alamat tab tersebut ke URL baru.
Jika metode tabs.query bersifat sinkron, metode tersebut mungkin terlihat seperti di bawah.
//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 ditampilkan 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 ditentukan ke query() dipanggil, lalu menjalankan 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 dengan hasil update.
// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()
Metode ini menampilkan URL secara sinkron sebagai string dan tidak melakukan pekerjaan asinkron lainnya.
Detail selengkapnya
Untuk mengetahui informasi selengkapnya, pelajari dokumen referensi Chrome API dan tonton video berikut.
Komunikasi antar-halaman
Komponen yang berbeda dalam ekstensi sering kali perlu berkomunikasi satu sama lain. Halaman HTML yang berbeda
dapat menemukan satu sama lain menggunakan metode chrome.extension, seperti getViews()
dan getBackgroundPage(). Setelah halaman memiliki referensi ke halaman ekstensi lainnya, 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
penerusan pesan.
Menyimpan data dan mode samaran
Ekstensi dapat menyimpan data menggunakan storage API, HTML5 web storage API , atau dengan membuat permintaan server yang menghasilkan penyimpanan data. Saat ekstensi perlu menyimpan sesuatu, pertimbangkan terlebih dahulu apakah ekstensi tersebut berasal dari jendela samaran. Secara default, ekstensi tidak berjalan di jendela samaran.
Mode samaran menjanjikan bahwa jendela tidak akan meninggalkan jejak. Saat menangani data dari jendela samaran, ekstensi harus memenuhi janji ini. Jika ekstensi biasanya menyimpan histori penjelajahan, jangan simpan histori dari jendela samaran. Namun, ekstensi dapat menyimpan preferensi setelan dari jendela mana pun, samaran atau 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 akan siap mulai menulis ekstensi mereka sendiri. Pelajari lebih dalam dunia Chrome kustom dengan referensi berikut.
- Pelajari opsi yang tersedia untuk men-debug Ekstensi dalam tutorial proses debug.
- Ekstensi Chrome memiliki akses ke API yang canggih di atas dan di luar yang tersedia di web terbuka. Dokumentasi chrome.* Dokumentasi API akan membahas setiap API.
- Ringkasan pengembangan ekstensi memiliki puluhan link tambahan ke bagian dokumentasi yang relevan dengan pembuatan ekstensi lanjutan.