Ringkasan arsitektur

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

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

Pertimbangkan ekstensi gateway untuk menjadikan browser Chrome browser yang paling dipersonalisasi.

File ekstensi

Ekstensi bervariasi dalam jenis file dan jumlah direktori, tetapi semuanya harus memiliki [manifes][docs-manifes]. Beberapa ekstensi dasar, tetapi berguna, mungkin hanya terdiri dari manifes dan ikon {i>toolbar<i}.

File manifes, berjudul manifest.json, memberikan informasi tentang ekstensi kepada browser, seperti sebagai 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 berada di toolbar browser. Ikon {i>toolbar<i} memungkinkan akses yang mudah dan memastikan 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 konten skrip:

Screenshot ekstensi Mappy

Merujuk ke file

File ekstensi dapat dirujuk dengan menggunakan URL relatif, seperti file dalam HTML biasa kami.

<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 digunakan sistem ekstensi yang dihasilkan untuk setiap ekstensi. ID untuk semua ekstensi yang dimuat dapat dilihat dengan membuka URL chrome://extensions. PATH_TO_FILE adalah lokasi file di bawah folder teratas ekstensi; URL itu cocok dengan URL relatif.

Saat mengerjakan ekstensi yang belum dibuka, ID ekstensi dapat berubah. Secara khusus, ID dari sebuah ekstensi yang tidak dibuka akan berubah jika ekstensi dimuat dari direktori yang berbeda; ID akan ubah 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 produk.

Arsitektur

Arsitektur ekstensi akan bergantung pada fungsinya, tetapi banyak ekstensi yang tangguh akan mencakup beberapa komponen:

Skrip latar belakang

Skrip latar belakang adalah pengendali peristiwa ekstensi; terdapat pemroses untuk peristiwa browser yang penting bagi ekstensi. Ia berbaring dorman sampai suatu peristiwa dipicu, 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 disengaja dan minimal. UI harus menyesuaikan atau meningkatkan pengalaman penjelajahan tanpa mengganggunya. Sebagian besar ekstensi memiliki browser tindakan atau tindakan halaman, tetapi dapat berisi bentuk UI lain, seperti menu konteks, penggunaan omnibox, atau pembuatan pintasan keyboard.

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

Ekstensi yang menggunakan tindakan halaman dan pop-up dapat menggunakan parameter content API untuk menetapkan aturan di skrip latar belakang saat pop-up yang tersedia untuk pengguna. Saat kondisi terpenuhi, skrip latar belakang berkomunikasi dengan pop-up untuk membuatnya menjadi ikon yang dapat diklik oleh pengguna.

Jendela browser berisi tindakan halaman yang menampilkan pop-up

Skrip konten

Ekstensi yang membaca atau menulis ke halaman web menggunakan skrip konten. Tujuan skrip konten berisi JavaScript yang dijalankan 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 memungkinkan penyesuaian ekstensi. Opsi dapat digunakan untuk mengaktifkan fitur dan memungkinkan pengguna untuk memilih fungsi 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 web dapat mengakses metode window.open() standar untuk membuka URL, tetapi ekstensi dapat menentukan jendela mana yang harus menampilkan URL dengan menggunakan Chrome API tabs.create sebagai gantinya.

Metode asinkron vs. sinkron

Sebagian besar metode Chrome API bersifat asinkron: metode tersebut segera ditampilkan tanpa menunggu operasi hingga selesai. Jika ekstensi perlu mengetahui hasil operasi asinkron, ia dapat meneruskan fungsi callback ke dalam metode. Callback dieksekusi nanti, kemungkinan tidak lama, setelah akan ditampilkan.

Jika ekstensi diperlukan untuk menavigasi tab yang saat ini dipilih pengguna ke URL baru, ekstensi harus dapatkan ID tab saat ini, lalu perbarui alamat tab tersebut ke URL baru.

Jika metode tabs.query sinkron, metode 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() asinkron. Layanan tersebut akan dikembalikan tanpa menunggu tugas untuk diselesaikan, dan tidak mengembalikan nilai. Metode asinkron jika parameter callback yang tersedia dalam tanda tangannya.

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

Untuk membuat kueri 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();

Pada kode di atas, baris dieksekusi dalam urutan berikut: 1, 4, 2. Fungsi callback yang ditentukan ke 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() asinkron, kode tidak menggunakan parameter callback, karena ekstensi tidak menggunakannya apa saja dengan hasil pembaruan tersebut.

// 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, pelajari dokumen referensi Chrome API dan tonton video berikut video Anda.

Komunikasi antarhalaman

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

Menyimpan data dan mode samaran

Ekstensi dapat menyimpan data menggunakan storage API, penyimpanan web HTML5 API , atau dengan membuat permintaan server yang menghasilkan penyimpanan data. Kapan ekstensi perlu menyimpan sesuatu, pertimbangkan terlebih dahulu apakah konten tersebut berasal dari jendela samaran. Secara default, ekstensi tidak berjalan di jendela penyamaran.

Mode Samaran menjanjikan bahwa jendela tidak akan memberikan jejak. Ketika berhadapan dengan data dari jendela samaran, ekstensi akan menghormati janji ini. Jika ekstensi biasanya menyimpan penjelajahan histori, jangan simpan histori dari jendela samaran. Namun, ekstensi dapat menyimpan setelan preferensi dari jendela apa pun, baik penyamaran maupun tidak.

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

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 harus siap untuk mulai menulis ekstensi mereka sendiri! Pelajari lebih dalam dunia Chrome kustom dengan resource berikut.