Bisakomputer Firefox Extension

Bisakomputer Firefox Extension

Tutorial Information

ProgramBisakomputer demo extension
Version0.1
DifficultyStandar
Estimated Time30 menit
DownloadClick this link

Extension atau biasa yang kita kenal dengan istilah add-ons, jarang sekali yang berkeinginan mempelajarinya. Entah karena bingung dan selalu menanyakan “kenapa harus membuatnya” atau…

Extension atau biasa yang kita kenal dengan istilah add-ons, jarang sekali yang berkeinginan mempelajarinya. Entah karena bingung dan selalu menanyakan “kenapa harus membuatnya” atau kah minimnya referensi yang ada dalam bentuk bahasa indonesia. Tapi dalam artikel ini, saya ingin share bagaimana membangun sebuah add-ons atau extension dari sebuah browser open source yaitu Firefox.

Firefox adalah web browser open source. Hal ini umum kita ketahui, tapi yang harus diketahui juga adalah semua add-ons atau extension Firefox juga bersifat terbuka. Kita bisa melihat source code-nya bahkan mengambilnya. Paket instalasi extension Firefox adalah .xpi, ini bukanlah file binari tapi merupakan format kompresi data seperti halnya .zip. Jika kita extract file ini, maka akan kita dapatkan source code extension tersebut. Pertama kali saya mempelajari extension Firefox karena penasaran cara kerja sebuah extension hacking Firesheep. Saya belajar dari melihat source code yang membangun Firesheep, baru kemudian membaca dokumentasinya.

Teknologi yang membangun

Ada beberapa teknologi yang harus kita ketahui untuk membangun extension Firefox. Diantaranya adalah:

XUL

XUL kepanjangan dari XML User Interface Language. XUL dikembangkan oleh Mozilla yang tujuannya hampir sama dengan HTML untuk membangun user interface. Bedanya HTML untuk membangun halaman web, tapi kalau XUL untuk me-render user interface semua platform (cross platform) yang memakai layout engine Gecko, seperti browser Firefox ini. Teknologi web standar seperti CSS, Javascript dan DOM juga masih tetap digunakan oleh user interface language ini. Referensi lengkap mengenai XUL dapat dilihat disini

XPCOM

Sama seperti XUL, XPCOM juga dikembangkan oleh Mozilla. Singkatan dari Cross Platform Component Object Model. Teknologi ini dibuat agar sebuah komponen “reusable” pada platform manapun yang mendukung XPCOM. Untuk mengakses komponen-komponen yang dibuat dengan XPCOM, biasanya melalui sebuah layer spesial. Sebagai contoh, extension Firefox yang ingin mengakses Mozilla XPCOM librari (networking, security, DOM, filesystem, dll), bisa melalui layer spesial yang sudah disediakan yaitu XPConnect. XPConnect ini mengijinkan objek Javascript, dapat mengakses Mozilla librari. Referensi lengkap mengenai komponen Mozilla yang dapat kita akses bisa dilihat disini.

Javascript

Javascript mungkin sudah menjadi teknologi web standar. Kita sudah sangat sering memakainya dan tidak akan kesulitan dalam memakainya pada kasus ini. Dalam pembuatan extension kita memakainya untuk mengakses XPCOM komponen, mengakses dan manipulasi DOM, event handling, dsb.

Setting mode development browser

Sebelum masuk ke tahap development, sangat disarankan kita mengatur beberapa setting-an pada browser Firefox yang kita miliki. Caranya ketik “about:config” pada URL bar Firefox. Kemudian search beberapa option yang ada dibawah ini dan ubah nilainya:

Firefox config

Firefox config

Rekomendasi setting

1. javascript.options.showInConsole = true
2. nglayout.debug.disable_xul_cache = true
3. browser.dom.window.dump.enabled = true

Optional setting

1. javascript.options.strict = true
2. extensions.logging.enabled = true

Membuat pointer file pada folder profile firefox

Semua extension yang Anda install akan diletakkan satu folder pada HOME direktorinya Firefox. Nama folder itu adalah “extension/“. Jangan terjebak dengan kata “install” extension, karena extension hanya di-download dan diletakkan pada folder profile tersebut. Kita pun dapat mengaktifkan extension itu secara manual. Pada Windows folder profile extension firefox biasanya terletak pada “C:\Users\<Windows login/user name>\AppData\Roaming\Mozilla\Firefox\Profiles\extension“, sedangkan pada linux mint yang saya pakai, folder itu terletak pada alamat “/home/mustofa/.mozilla/firefox/q0la25d8.default/extension/“. Untuk tahap development, daripada kita meletakkan semua code yang kita buat pada folder itu, kita cukup membuat sebuah pointer file yang di link ke folder project. untuk membuat itu, pikirkan satu nama file unik yang nantinya menjadi identitas extension yang kita buat (nama ini sama dengan em:id yang nantinya kita isi pada install.rdf).

Simple extension “Hello Bisakomputer”

Pada contoh extension ini, kita akan dapat mempelajari beberapa poin penting dari building extension, mulai dari bagaimana membuat struktur file project, memakai beberapa file resource XUL, Javascript, DTD, Html, dan CSS.

Struktur project

Semua extension memiliki struktur file yang sama satu sama lain, berikut adalah struktur file dari extension yang akan kita buat:

Struktur file extension

Struktur file extension

install.rdf

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">

    <em:id>bisakomputer@bisakomputer.com</em:id>
    <em:name>Bisakomputer extension</em:name>
    <em:version>0.0.1</em:version>
    <em:description>Demo extension.</em:description>
    <em:creator>Achmad Mustofa</em:creator>
    <!-- optional items -->
    <em:contributor>Author @bisakomputer</em:contributor>
    <em:homepageURL>http://bisakomputer.com</em:homepageURL>

    <!-- Firefox -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>3.6</em:minVersion>
        <em:maxVersion>4.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>

  </Description>

</RDF>

File ini berisi beberapa informasi penting berkenaan extension yang kita buat. Browser Firefox juga akan mengkonfigurasi extension berdasarkan meta informasi yang kita berikan pada file ini. Meta informasi ini seperti author extension, versi extension, versi firefox apa saja yang support, skin atau style apa yang dipakai, dan bahasa atau l11n yang digunakan oleh extension.

chrome.manifest

content bisakomputer content/
overlay chrome://browser/content/browser.xul chrome://bisakomputer/content/overlay.xul

locale bisakomputer en-US locale/en-US/

skin bisakomputer classic/1.0 skin/
style chrome://global/content/customizeToolbar.xul chrome://bisakomputer/skin/overlay.css

Plain teks ini mendeskripsikan resource-resource file extension ke dalam chrome URL, dengan kata lain file ini yang memapping resource extension dari package name ke alamat resource aslinya.

chrome folder

Pada folder ini berisi beberapa file XUL dan script Javascript. Beberapa file XUL berasosiasi dengan file script untuk melakukan beberapa aksi atau event. Berikut adalah file sample dari extension yang kita bangun:

1. overlay.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://bisakomputer/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://bisakomputer/locale/overlay.dtd">
<overlay id="bisakomputer-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script src="overlay.js"/>

<panelBar id="nav-bar" class="panelBar" persist="">
<hbox>
	<toolbarbutton tooltiptext="&button.tooltip;" role="button" oncommand="BisaKomputer.onClickIcon(event);">
		<image src="chrome://bisakomputer/skin/biskom-icon.ico"/>
	</toolbarbutton>
</hbox>
</panelBar>
</overlay>

Setiap extension memiliki file XUL ini. Karena file ini lah yang men-override tampilan default browser Firefox dan menambahkan beberapa menu, button, atau elemen lain pada tampilan browser.
Pada contoh, kita menampilkan biscom-icon.ico dan meletakkannya pada navigation bar browser Firefox. Kita lihat disini, overlay.xul memanggil resource overlay.dtd dan script overlay.js. Sedangkan aksi yang akan dilakukan toolbar button ketika di klik adalah akan mengeksekusi perintah script “BisaKomputer.onClickIcon(event)“.

2. overlay.js

var BisaKomputer = {
  onLoad: function() {
    // initialization code
    this.initialized = true;
  },

  onClickIcon: function() {
    window.open("chrome://bisakomputer/content/bisakomputer.xul", "", "chrome");
  }
};

window.addEventListener("load", function(e) { BisaKomputer.onLoad(e); }, false);

Dalam overlay.js, kita menciptakan objek yang diberi nama “BisaKomputer”. Ada dua property disini yaitu onLoad dan onClickIcon.

3. bisakomputer.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

<window id=""
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        title="Bisakomputer"
		style="min-width: 500px;min-height: 500px;"
		onload=""
		buttons="cancel"
		buttonlabelcancel=""
		ondialogcancel="">

	<stack align="center" flex="1" equalsize="always">
      <box flex="1">
        <iframe flex="1" name='biskom' id='biskom' src="chrome://bisakomputer/content/bisakomputer.html"></iframe>      
      </box>     
    </stack>

</window>

Pada file XUL, kita juga bisa memanggil file html dengan bantuan tag iframe. Seperti pada contoh diatas, kita memanggil file bisakomputer.html.

4. bisakomputer.html

<html>
  <head>
    <title>Bisakomputer</title>
  <body>
  	<div style="text-align:center">
  		<img src="chrome://bisakomputer/skin/biskom-logo.png">
  		<h1 style="font-weight: normal;font-family: Oswald, sans-serif;">Tempatnya segala tutorial komputer</h1>
  		<div style="text-align:justify;font-family: Oswald, sans-serif;">
  			Bisa Komputer merupakan website yang berisi tutorial, review, tip dan trik, rekomendasi, dan serba-serbi seputar dunia komputer baik dari segi software, hardware, maupun yang lainnya. Tak hanya mengulas soal komputer, Bisa Komputer juga berbagi artikel mengenai teknologi, online media, rekomendasi aplikasi dan website, serta banyak lagi yang lainnya.
  		</div>
  	</div>
  </body>
</html>

5. DTD File

File ini adalah file localization extension yang kita buat. Daripada kita melakukan hard-coding teks string pada file XUL, sangat disarankan kita membuat dan memakai sebuah entities yang dideklarasikan pada file ini. Pada saat run-time, Firefox akan memilih file ini tergantung dari locale provider dari extension.

– overlay.dtd

<!ENTITY button.tooltip "Bisakomputer Tempatnya Segala Tutorial Komputer">
<!ENTITY biskom.title "Bisakomputer.com">

Packaging

Seperti yang sudah saya sebutkan diatas, sentuhan akhir extension yang kita buat adalah berbentuk xpi. File xpi adalah file zip yang diganti nama saja, sehingga untuk membuatnya kita harus memiliki tool kompresi file dalam bentuk zip.
Dalam melakukannya, harus diperhatikan juga: pertama, yang dikompresi bukan folder project tapi file-file yang ada didalamnya dan kedua, ubah nama ekstensi zip menjadi xpi.

Contoh pada Linux yang saya pakai, saya membuka terminal kemudian masuk ke folder project dan baru mengkompresi file-file yang ada didalamnya dengan perintah ini

zip -r bisakomputer.xpi *

Installing & Testing

Setelah semuanya kita lakukan, sekarang saatnya menguji extension kita. Sebelum kita mendistribusikan extension yang kita buat, sebaiknya kita uji dulu pada lokal komputer kita. Hapus file pointer project pada folder profile Firefox dan letakkan file xpi pada folder tersebut. Kemudian buka browser dan lihat hasilnya.

Bisakomputer Extension

Bisakomputer Extension

 

Bisakomputer Navigation Bar

Bisakomputer Navigation Bar

 

Bisakomputer Frame

Bisakomputer Frame

 

Penutup

Demo extension pada artikel ini merupakan hal yang sangat sederhana. Pengaksesan librari Mozilla lewat XPCOM dan pembuatan komponen objek XPCOM atau NPRuntime tidak ada pada demo sederhana ini. Tapi menurut saya, demo ini sangat membantu kita yang ingin develop sebuah add-ons pada browser Firefox.

Tag: , , , , ,

Write Comment

Your email will not be published. The marked label is required.