Arsitektur Chrome Extension V3

Chrome extension (selanjutnya disebut ekstensi) merupakan zip bundles dari HTML, CSS, JavaScript, gambar dan file lainnya tergantung dari fungsi ekstensi tersebut.

Ekstensi memiliki banyak fungsional, seperti memodifikasi konten web dan berinteraksi dengan pengguna atau bahkan dapat memperluas dan mengubah perilaku browser itu sendiri.

Extension file

Setiap ekstensi yang dibuat wajib memiliki file manifest.json yang didalamnya berisi tentang informasi terkait ekstensi itu sendiri. Seperti nama, deskripsi, versi dan lainnya.

// manifest.json{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "16": "icon_16.png",
    "32": "icon_32.png",
    "48": "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"
  }
}

Ektensi juga wajib memiliki icon yang akan tampil pada menu ekstensi web browser. Pada umumnya ketika icon tersebut diklik akan muncul dashboard kecil yang disebut dengan popup.

Referring to files

File ekstensi dapat dirujuk dengan menggunakan relative URL, sama seperti file di halaman HTML biasa.

<img src="images/my_image.png">

Selain itu, setiap file juga dapat diakses menggunakan absolute URL.

chrome-extension:///

Arsitektur

Arsitektur dari ekstensi akan bergantung pada fungsinya, semakin kompleks ekstensi tersebut akan semakin banyak menyertakan komponen di dalamnya.

Manifest
Background script
UI Elements
Content script
Options page

Background scripts

Background scripts ini merupakan event handler ekstensi, yang berisi listeners untuk events browser yang akan dieksekusi. Script ini akan dihentikan sampai ia selesai memproses sesuai dengan logika yang diinstruksikan.

Background scripts yang efektif hanya akan dimuat ketika dibutuhkan dan dihentikan ketika sudah selesai melakukan prosesnya.

UI Element

User Interface ekstensi harus memiliki fungsi dan minimalis. UI harus menyesuaikan atau meningkatkan pengalaman menjelajah user.

Sebagian besar ekstensi memiliki browser action atau page action, tetapi juga dapat berisi bentuk UI lain, seperti context menus, omnibox, atau pembuatan keyboard shortcut.

Halaman UI ekstensi, seperti popup, 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.

Ektensi yang menggunakan page action dan popup dapat menggunakan declarative content API untuk mengatur fungsi di background script saat popup tersedia untuk pengguna.

Ketika kondisi terpenuhi, background script berkomunikas dengan popup untuk membuat iconnya dapat diklik oleh pengguna.

Arsitektur Chrome Extension V3-1

Content scripts

Content scripts berguna jika ekstensi memiliki fungsi untuk membaca dan menulis ke halaman web. Content scripts berisi JavaScript yang dijalankan dalam konteks halaman yang telah dimuat ke browser.

Content scripts mempunyai fungsi untuk membaca dan memodifikasi DOM halaman web yang dikunjungi browser.

Arsitektur Chrome Extension V3-2

Content scripts dapat berkomunikasi dengan API ekstensi induknya dengan bertukar pesan dan menyimpan nilai menggunakan storage API.

Arsitektur Chrome Extension V3-3.png

Options page

Pada umumnya options page digunakan utuk menampilkan pengaturan ekstensi dan pengguna dapat memilih fungsionalitas apa 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 sehingga memiliki integrasi erat dengan browser.

Ekstensi dan halaman web dapat mengakses window.open() yaitu metode standard untuk membuka URL, selain itu ekstensi juga dapat menentukan pada jendela mana URL harus ditampilkan dengan menggunakan chrome API dengan metode tabs.create .

Metode asynchronous vs synchronous

Sebagian besar metode Chrome API menggunakan asynchronous, yaitu metode yang langsung dieksekusi tanpa menunggu operasi selesai.

Jika ekstensi perlu hasil dari operasi asynchronous, ekstensi tersebut dapat meneruskan fungsi callback ke dalam method. Callback akan dijalankan setelah method selesai dieksekusi.

Jika ekstensi mempunyai fungsi untuk menavigasi tab yang saat ini dipilih pengguna ke URL baru, ekstensi tersebut harus mendapatkan ID tab saat ini dan kemudian memperbarui alamat tab tersebut ke URL baru.

Jika method tabs.query synchronous, akan terlihat seperti 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() bersifat asynchronous. Ia akan kembali tanpa menunggu pekerjaan selesai, dan tidak mengembalikan nilai. Metode asynchronous ketika parameter callback tersedia di signature-ya.

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

Untuk membuat tab query 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 diatas, setiap baris akan dieksekusi dengan urutan: 1, 4, 2.

Fungsi callback yang ditentukan untuk query() dipanggil, kemudian mengeksekusi baris 2, tetapi hal tersebut hanya akan dilakukan setelah informasi tentang tab yang dipilih saat ini tersedia.

Hal ini terjadi beberapa saat setelah query() mengembalikan return. Meskipun update() asynchronous, kode tidak menggunakan parameter callback, karena ekstensi tidak melakukan apa pun dengan hasil dari operasi tersebut.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

Komunikasi antar halaman

Komponen yang berbeda dalam sebuah ekstensi sering kali perlu saling berkomunikasi. Halaman HTML yang berbeda dapat menemukan satu sama lain dengan menggunakan method chrome.extension , seperti getViews() dan getBackgroundPage() .

Setelah halaman memiliki referensi ke halaman ekstensi lain, halaman pertama dapat menjalankan fungsi di halaman lain dan memanipulasi DOM-nya.

Selain itu, semua komponen ekstensi dapat mengakses nilai yang disimpan menggunakan storage API dan berkomunikasi melalui message passing.

Penyimpanan data dan mode penyamaran

Ekstensi dapat menyimpan data dengan menggunakan penyimpanan API, web storage API HTML5, atau dengan membuat server requests yang menghasilkan penyimpanan data.

Saat ekstensi perlu menyimpan sesuatu, yang perlu diperhatikan adalah apakah ekstensi tersebut berada di jenedela penyamaran. Secara default, ekstensi tidak berjalan di jendela penyamaran.

Mode penyamaran menjanjikan bahwa jendela tidak akan meninggalkan jejak. Saat menangani data dari jendela penyamaran, ekstensi harus memenuhi hal tersebut.

Jika ekstensi biasanya menyimpan riwayat penjelajahan, jangan simpan riwayat jika berada di jendela penyamaran. Namun, ekstensi dapat menyimpan preferensi pengaturan dari jendela mana pun, penyamaran atau tidak.

Untuk mendeteksi apakah jendela dalam mode penyamaran, dapat memeriksa properti incognito yang relevan dengan tabs.Tab atau objek windows.Window .

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

https://developer.chrome.com/docs/extensions/develop