2022-12-20

Cara Membuat Ekstensi Chrome

Pengantar

Dalam artikel ini, saya akan menunjukkan cara membuat Ekstensi Chrome.

Menginstal Google Chrome

Karena kita sedang mengembangkan ekstensi Chrome, penting untuk menginstal Google Chrome. Pastikan Anda memiliki versi terbaru Chrome karena versi terbaru akan memiliki fitur yang paling mutakhir dan lebih sedikit bug. Jika Anda belum menginstalnya, Anda dapat mengunduhnya dari situs resmi Google.

https://www.google.com/chrome/

Membuat Ekstensi Anda

Pembuatan ekstensi Chrome Anda dimulai dengan pengaturan beberapa file penting.

Berikut adalah struktur umum yang mungkin Anda ikuti:

my-extension/
├── manifest.json
├── background.js
├── content.js
├── popup.js
├── popup.html
├── images/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── css/
    └── popup.css

manifest.json: Ini adalah file manifest yang berisi semua detail penting tentang ekstensi Anda.
background.js: Ini adalah skrip pekerja layanan Anda, tempat Anda menempatkan logika utama ekstensi Anda.
content.js: Skrip ini dapat membaca dan mengubah DOM dari halaman web yang dikunjungi browser Anda.
popup.js: Jika ekstensi Anda menggunakan popup, skrip ini akan menentukan perilakunya.
popup.html: File ini mengatur struktur HTML dari popup Anda jika ekstensi Anda menggunakannya.
images/: Direktori ini berisi semua gambar yang digunakan dalam ekstensi Anda, termasuk ikon.
css/: Direktori ini berisi semua file CSS. Dalam kasus ini, popup.css akan mengatur gaya popup Anda.

Pembuatan File Manifest

File manifest, manifest.json, adalah file berformat JSON yang memberi tahu Chrome semua yang perlu diketahui tentang ekstensi Anda. Manifest mencakup informasi seperti nama ekstensi, versi, izin yang diperlukan, file terkait, dan data penting lainnya.

Berikut adalah contoh sederhana dari file manifest.json:

manifest.json

{
  "manifest_version": 3,
  "name": "My First Chrome Extension",
  "version": "1.0",
  "description": "A simple Chrome extension.",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

manifest_version: Ini menentukan versi format file manifest. Untuk Manifest V3, ini harus menjadi 3.
name: Nama ekstensi Anda seperti yang ditampilkan kepada pengguna.
version: Versi ekstensi Anda. Ini adalah string, dan terserah Anda bagaimana Anda ingin mengatur strukturnya, tetapi disarankan untuk mengikuti semantik versi (major.minor.patch).
description: Deskripsi singkat tentang apa yang dilakukan ekstensi Anda.
permissions: Izin yang dibutuhkan oleh ekstensi Anda. Dalam kasus ini, activeTab memberi ekstensi Anda akses sementara ke tab yang sedang aktif saat pengguna memanggil ekstensi - misalnya, dengan mengklik tindakan perambanannya.
action: Ini adalah properti baru dalam Manifest V3 yang menggantikan browser_action dari Manifest V2. Ini berisi objek yang menjelaskan bagaimana ikon ekstensi akan muncul di toolbar.
default_popup: File HTML yang akan ditampilkan ketika pengguna mengklik ikon ekstensi di toolbar.
default_icon: Objek yang menentukan berbagai ukuran ikon yang akan digunakan dalam konteks yang berbeda.
background: Objek yang mencakup bidang service_worker. Bidang ini menunjuk ke file JavaScript yang akan mengendalikan tindakan latar belakang ekstensi Anda.
content_scripts: Array dari satu atau lebih objek, masing-masing mewakili skrip konten atau blok kode JavaScript yang akan disuntikkan oleh Chrome ke halaman yang cocok. Setiap objek dalam daftar content_scripts harus berisi:
- matches: Array pola pencocokan. Pola pencocokan adalah URL yang dimulai dengan skema yang diizinkan (http, https, file, atau ftp, dan dapat berisi karakter *).
- js: Array file JavaScript yang akan disuntikkan ke halaman yang cocok dengan pola yang didefinisikan dalam bidang matches.

Pekerja Layanan (Skrip Latar Belakang)

Pekerja layanan sebenarnya berperan sebagai server proxy yang berada di antara aplikasi web, peramban, dan jaringan (jika tersedia). Mereka dimaksudkan untuk (antara lain) memungkinkan pembuatan pengalaman offline yang efektif, dan mengintersep permintaan jaringan dan mengambil tindakan yang tepat berdasarkan ketersediaan jaringan dan aset yang diperbarui berada di server. Mereka juga memungkinkan akses ke notifikasi dorong dan API sinkronisasi latar belakang.

File background.js Anda bisa sederhana seperti ini:

background.js

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: setPageBackgroundColor,
  });
});

function setPageBackgroundColor() {
  document.body.style.backgroundColor = 'orange';
}

Dalam skrip ini, ketika ikon ekstensi diklik (chrome.action.onClicked.addListener), baris JavaScript dieksekusi di tab saat ini yang mengubah warna latar belakang halaman web menjadi oranye. Hal ini dilakukan melalui fungsi chrome.scripting.executeScript, yang merupakan bagian dari perubahan dalam Manifest V3.

Skrip Konten

Skrip konten adalah file yang berjalan dalam konteks halaman web. Dengan menggunakan standar Document Object Model (DOM), mereka dapat membaca detail halaman web yang dikunjungi oleh peramban atau membuat perubahan pada halaman tersebut.

Berikut adalah contoh sederhana dari skrip content.js:

content.js

document.body.style.border = '5px solid red';

Skrip ini akan menambahkan batas merah solid sebesar 5px ke setiap halaman web yang Anda kunjungi.

Jika ekstensi Anda menggunakan popup (jendela kecil yang muncul ketika pengguna mengklik ikon ekstensi Anda), Anda akan menentukan perilakunya dalam file JavaScript terpisah, sering disebut popup.js.

Dalam skrip popup, Anda dapat mendengarkan peristiwa seperti klik tombol dan berinteraksi dengan halaman web aktif. Berikut adalah contoh skrip popup.js:

popup.js

document.getElementById('myButton').addEventListener('click', async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor
  });

  function setPageBackgroundColor() {
    document.body.style.backgroundColor = 'green';
  }
});

Dalam skrip ini, kita menambahkan pendengar acara ke elemen HTML dengan id myButton. Ketika tombol diklik, skrip tersebut akan mendapatkan tab yang sedang aktif dan mengubah warna latar belakang halaman web menjadi hijau.

Di popup.js, Anda dapat memanipulasi DOM dari halaman HTML popup, atau menggunakan API chrome.scripting untuk menjalankan skrip dalam konteks tab saat ini.

Popup ekstensi Anda adalah antarmuka pengguna yang ditampilkan ketika pengguna mengklik ikon ekstensi di toolbar Chrome. Antarmuka popup didefinisikan oleh file HTML dan CSS.

Mari mulai dengan membuat file popup.html:

popup.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/popup.css">
  </head>
  <body>
    <h1>Welcome to My Extension!</h1>
    <button id="myButton">Change background color</button>
    <script src="popup.js"></script>
  </body>
</html>

File HTML ini dimulai dengan menghubungkan file CSS kita dengan tag <link>. Lalu, terdapat sebuah body sederhana dengan judul dan sebuah tombol. Tombol memiliki id myButton, yang akan kita gunakan dalam file popup.js untuk menambahkan pendengar acara. File popup.js juga dihubungkan dalam file HTML ini menggunakan tag <script>.

Selanjutnya, Anda dapat mendefinisikan gaya-gaya untuk popup Anda dalam file CSS. Berikut adalah contoh file popup.css:

css/popup.css

body {
  font-family: "Arial", sans-serif;
  width: 200px;
  height: 200px;
  margin: 0;
  padding: 10px;
  background-color: #F0F0F0;
}

h1 {
  font-size: 1.5em;
  color: #333;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  font-size: 1em;
  color: #fff;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Dalam file CSS ini, kita telah menentukan beberapa gaya dasar untuk body, judul, dan tombol popup. Tombol juga memiliki gaya hover untuk memberikan umpan balik saat pengguna mengarahkan kursor ke tombol tersebut.

Pengujian Ekstensi Chrome

Untuk menguji Ekstensi Chrome, Anda dapat mengikuti langkah-langkah berikut:

Aktifkan Mode Pengembang
1. Buka peramban Google Chrome.
2. Akses halaman ekstensi dengan memasukkan chrome://extensions di bilah alamat.
3. Di halaman Ekstensi, aktifkan saklar Developer mode di sudut kanan atas untuk mengaktifkannya.
Muat Ekstensi
1. Klik tombol Load unpacked.
2. Dalam dialog pemilihan file, arahkan ke direktori di mana kode ekstensi Anda berada.
3. Pilih folder yang berisi file manifest ekstensi Anda (biasanya bernama manifest.json) dan klik Select.
Uji Ekstensi
1. Berinteraksilah dengan antarmuka pengguna ekstensi dan fitur-fiturnya untuk memastikan bahwa mereka berfungsi seperti yang diharapkan.