Jika Kalian adalah seorang pengguna Google Chrome, Anda pasti tidak asing dengan chrome extention. Dan saya yakin anda pernah menggunakan beberapa ekstensi di browser.
Pernahkah Anda bertanya-tanya bagaimana cara membuatnya sendiri sebuah extention yang bisa kita gunakan di google chrome? Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat ekstensi Chrome dari awal.
Contents
Apa itu Chrome Ekstensi ?
Ekstensi chrome adalah program yang diinstal di browser Chrome yang meningkatkan fungsionalitas browser. Anda dapat membuatnya dengan mudah menggunakan teknologi pemrograman web seperti HTML, CSS, dan JavaScript. Membuat ekstensi chrome mirip dengan membuat aplikasi web, tetapi membutuhkan tambahan file dengan nama manifest.json. Manifest.json ini merupkan file yang harus ada dalam sebuah chrome extention.
Jadi untuk membuat chrome extntion, kita harus mengenal terlebih dahulu CSS, HTML dan juga Javascript
Kali ini kita akan belajar tentang bagaimana membuat Google Chrome Extention mulai dari dasar. Pada Bagian pertama kita akan membikin sebuah chrome sederhana.
1. Bikin Folder bernama latihanExtentionDasar
2. Bikin file bernama manifest.json dan isi dengan text berikut
{
"name": "latihan",
"version": "1.0",
"manifest_version": 3,
"description": "Latihan",
"action": {
"default_icon": "icon.png",
"default_title": "latihan bikin extention",
"default_popup": "popup.html"
}
}
3. Bikin sebuah file bernama popup.html dan isi dengan text html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1 >Belajar Bikin Plugin</h1>
</div>
</body>
</html>
4. Siapkan Icon dengan nama icon.png dengan size 32×32
5. Pemasangan di google chrome
– Silahkan buka google chrome dan kunungi url
chrome://extensions/
– Kemudian aktifkan developer mode pada bagian pojok kanan atas.
– kemudian install extention yang sudah kita bikin dengan menekan button load unpacked pada pojok kiri atas
Jika tidak ada kesalahan, maka extention anda sudah sukses terinstall dan siap untuk di gunakan.
Itu adalah dasar membikin sebuah chrome extention. yang hanya berisi 2 file yaitu manifest.json dan juga popup.html. Untuk popup.html, anda bisa menggantinya dengan nama lain, sedangkan manifest.json merupkan file configurasi dari chrome extention, yang akan dibaca pertama kali oleh chrome.
