Ekstensi terdiri dari komponen yang berbeda, tetapi kohesif. Komponen dapat mencakup skrip latar belakang, skrip konten, halaman opsi, elemen UI, dan berbagai file logika. Komponen ekstensi dibuat dengan teknologi pengembangan web: HTML, CSS, dan JavaScript. Komponen ekstensi akan bergantung pada fungsinya dan mungkin tidak memerlukan setiap opsi.
Tutorial ini akan mem-build ekstensi yang memungkinkan pengguna mengubah warna latar belakang halaman mana pun di developer.chrome.com. Tutorial ini akan menggunakan banyak komponen inti untuk menunjukkan pengantar tentang hubungan mereka.
Untuk memulai, buat direktori baru untuk menyimpan file ekstensi.
Ekstensi yang sudah selesai dapat ditemukan di sini.
Membuat manifes
Ekstensi dimulai dengan manifes. Buat file bernama manifest.json dan sertakan
kode berikut.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
Direktori yang menyimpan file manifes dapat ditambahkan sebagai ekstensi dalam mode developer dalam status saat ini.
- Buka halaman Pengelolaan Ekstensi dengan membuka
chrome://extensions.- Halaman Pengelolaan Ekstensi juga dapat dibuka dengan mengklik menu Chrome, mengarahkan kursor ke Alat Lainnya, lalu memilih Ekstensi.
- Aktifkan Mode Developer dengan mengklik tombol di samping Mode developer.
- Klik tombol LOAD UNPACKED dan pilih direktori ekstensi.
Akhirnya! Ekstensi berhasil diinstal. Karena tidak ada ikon yang disertakan dalam manifes, ikon toolbar generik akan dibuat untuk ekstensi.
Tambahkan petunjuk
Meskipun telah diinstal, ekstensi ini tidak memiliki petunjuk. Buat skrip latar belakang dengan membuat file berjudul background.js, lalu letakkan di dalam direktori ekstensi.
Skrip latar belakang, dan banyak komponen penting lainnya, harus didaftarkan dalam manifes. Mendaftarkan skrip latar belakang dalam manifes akan memberi tahu ekstensi file mana yang akan direferensikan dan bagaimana perilaku file tersebut.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
Ekstensi kini mengetahui bahwa ekstensi menyertakan skrip latar belakang non-persisten dan akan memindai file terdaftar untuk menemukan peristiwa penting yang perlu diproses.
Ekstensi ini akan memerlukan informasi dari variabel persisten segera setelah diinstal. Mulailah dengan
menyertakan peristiwa pemrosesan untuk runtime.onInstalled di skrip latar belakang. Di dalam pemroses onInstalled, ekstensi akan menetapkan nilai menggunakan storage API. Dengan begitu, beberapa komponen ekstensi akan dapat mengakses nilai tersebut dan mengupdatenya.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
Sebagian besar API, termasuk storage API, harus didaftarkan di kolom "permissions" dalam
manifes agar ekstensi dapat menggunakannya.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
Kembali ke halaman pengelolaan ekstensi dan klik link Reload. Kolom baru, Periksa tampilan, tersedia dengan link biru, halaman latar belakang.
Klik link untuk melihat log konsol skrip latar belakang, "The color is green."
Memperkenalkan antarmuka pengguna
Ekstensi dapat memiliki banyak bentuk antarmuka pengguna, tetapi ekstensi ini akan menggunakan popup.
Buat dan tambahkan file berjudul popup.html ke direktori. Ekstensi
ini menggunakan tombol untuk mengubah warna latar belakang.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
Seperti skrip latar belakang, file ini perlu ditetapkan sebagai pop-up dalam manifes di bagian
page_action.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
Penetapan untuk ikon toolbar juga disertakan di bagian page_action di kolom default_icons.
Download folder gambar di sini, ekstrak, dan tempatkan di direktori ekstensi. Update manifes agar ekstensi mengetahui cara menggunakan gambar tersebut.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"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"
}
},
"manifest_version": 2
}
Ekstensi juga menampilkan gambar di halaman pengelolaan ekstensi, peringatan izin, dan favorit. Gambar ini ditetapkan dalam manifes di bagian icons.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"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
}
Jika dimuat ulang pada tahap ini, ekstensi akan menyertakan ikon skala abu-abu, tetapi tidak akan berisi perbedaan fungsi apa pun. Karena page_action dideklarasikan dalam manifes, ekstensi dapat memberi tahu browser kapan pengguna dapat berinteraksi dengan popup.html.
Tambahkan aturan yang dideklarasikan ke skrip latar belakang dengan declarativeContent API dalam
peristiwa pemroses runtime.onInstalled.
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()]
}]);
});
});
Ekstensi akan memerlukan izin untuk mengakses declarativeContent API dalam manifesnya.
{
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
Browser kini akan menampilkan ikon tindakan halaman berwarna lengkap di toolbar browser saat pengguna membuka
URL yang berisi "developer.chrome.com". Jika ikon berwarna, pengguna dapat mengkliknya untuk
melihat popup.html.
Langkah terakhir untuk UI pop-up adalah menambahkan warna pada tombol. Buat dan tambahkan file bernama popup.js dengan kode berikut ke direktori ekstensi.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
Kode ini mengambil tombol dari popup.html dan meminta nilai warna dari penyimpanan. Kemudian, warna akan
diterapkan sebagai latar belakang tombol. Sertakan tag skrip ke popup.js di
popup.html.
<!DOCTYPE html>
<html>
...
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
Muat ulang ekstensi untuk melihat tombol hijau.
Logika lapisan
Ekstensi sekarang mengetahui bahwa pop-up harus tersedia untuk pengguna di developer.chrome.com dan
menampilkan tombol berwarna, tetapi memerlukan logika untuk interaksi pengguna lebih lanjut. Update popup.js untuk
menyertakan kode berikut.
let changeColor = document.getElementById('changeColor');
...
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 + '";'});
});
};
Kode yang diupdate menambahkan peristiwa onclick pada tombol, yang memicu skrip konten
yang dimasukkan secara terprogram. Tindakan ini akan mengubah warna latar belakang laman menjadi warna yang sama dengan tombol. Penggunaan
injeksi terprogram memungkinkan skrip konten yang dipanggil pengguna, bukan menyisipkan kode yang tidak diinginkan
ke dalam halaman web secara otomatis.
Manifes memerlukan izin activeTab untuk mengizinkan akses sementara ekstensi ke
tabs API. Tindakan ini memungkinkan ekstensi memanggil tabs.executeScript.
{
"name": "Getting Started Example",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}
Sekarang ekstensi berfungsi sepenuhnya. Muat ulang ekstensi, muat ulang halaman ini, buka pop-up, dan klik tombol untuk mengubah warna menjadi hijau. Namun, beberapa pengguna mungkin ingin mengubah latar belakang ke warna yang berbeda.
Berikan opsi kepada pengguna
Ekstensi saat ini hanya mengizinkan pengguna mengubah latar belakang menjadi hijau. Dengan menyertakan halaman opsi, pengguna akan memiliki lebih banyak kontrol atas fungsi ekstensi, sehingga dapat menyesuaikan pengalaman penjelajahan mereka lebih lanjut.
Mulailah dengan membuat file bernama options.html dalam direktori dan sertakan kode berikut.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>
Kemudian daftarkan halaman opsi dalam manifes,
{
"name": "Getting Started Example",
...
"options_page": "options.html",
...
"manifest_version": 2
}
Muat ulang ekstensi dan klik DETAIL.
Scroll halaman detail ke bawah, lalu pilih Opsi ekstensi untuk melihat halaman opsi, meskipun saat ini halaman tersebut akan terlihat kosong.
Langkah terakhir adalah menambahkan logika opsi. Buat file bernama options.js di direktori ekstensi dengan kode berikut.
let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
for (let item of kButtonColors) {
let button = document.createElement('button');
button.style.backgroundColor = item;
button.addEventListener('click', function() {
chrome.storage.sync.set({color: item}, function() {
console.log('color is ' + item);
})
});
page.appendChild(button);
}
}
constructOptions(kButtonColors);
Empat opsi warna disediakan kemudian dibuat sebagai tombol pada halaman opsi dengan pemroses peristiwa onclick. Saat pengguna mengklik tombol, nilai warna akan diperbarui di penyimpanan global ekstensi. Karena semua file ekstensi menarik informasi warna dari penyimpanan global, tidak ada nilai lain yang perlu diperbarui.
Langkah selanjutnya
Selamat! Direktori tersebut kini memiliki ekstensi Chrome yang berfungsi penuh, meskipun sederhana.
Apa selanjutnya?
- Ringkasan Ekstensi Chrome melakukan pencadangan sedikit, dan mengisi banyak detail tentang arsitektur Ekstensi secara umum, dan beberapa konsep tertentu yang ingin dipahami developer.
- Pelajari opsi yang tersedia untuk men-debug Ekstensi dalam tutorial proses debug.
- Ekstensi Chrome memiliki akses ke API yang canggih dan tidak hanya tersedia di web terbuka. Tag Chrome.* Dokumentasi API akan menjelaskan setiap API.
- Panduan developer ini berisi puluhan link tambahan ke beberapa dokumentasi yang relevan dengan pembuatan ekstensi lanjutan.