Membuat sendiri Add-Ons/Extension Firefox
Sejak pakai Firefox pertama kali dan pakai banyak Extension Firefox, saya sebenarnya kepikiran dan penasaran, bagaimana Extension Firefox di buat, tapi baru kemarin saya mencoba mencari info bagaimana membuat Extension tersebut, seperti biasa pertama saya googling, browsing- browsing dan memilah milah informasi. Merasa sudah cukup informasi saya dapat, proses trial-error pun langsung berjalan dengan sendirinya, danhasilnya cukup memuaskan, akhirnya saya punya gambaran yang lumayan jelas bagaimana Extension Firefox dibuat. (walaupun Extension Firefox yang saya buat gak guna :p )
Extension yang saya buat bisa di download di sini. Apa dan bagaimanakah Extension Firefox dibuat ?
Extension Firefox yang berakhiran .XPI itu sebenarnya adalah file .ZIP yang diganti namanya(rename). Coba lihat Extension Firefox yang saya buat, yang bernama puputs.xpi, coba rename menjadi puputs.zip dan extract file tersebut ke sembarang folder, nantinya kita bisa melihat struktur file dari Extension Firefox tersebut, seperti ilustrasi di bawah.
--puputs/
--puputs/content/puputs.js
--puputs/content/puputs.xul
--puputs/chrome.manifest
--puputs/install.rdf
Install.rdf adalah xml yang berisi tentang informasi mengenai siapa yang membuat, deskripsi, versi dan juga nama dari Extension Firefox tersebut, kita tidak perlu membuat file install.rdf baru untuk setiap Extension Firefox yang kita buat, kita tinggal mengganti isi dari file install.rdf yang sesuai untuk Extension Firefox buatan kita.
Sebelum saya menjelaskan file chrome.manifest saya akan menjelaskan dahulu apa itu file.xul, file.xul adalah sebuah Xml User interface Langguage, yaitu suatu file yang menggambarkan tampilan dari Firefox itu sendiri, coba masukan chrome://browser/content/browser.xul ke dalam address bar Firefox, nantinya kita akan melihat bagaimana tampilan dari Firefox itu sendiri. File browser.xul tersebut dapat di akses di folder instalasi Firefox kita, kalo saya ada di Program Files>Mozilla Firefox>chrome>browser.jar, backup dan rename file browser.jar menjadi browser.zip, didalam browser.zip kita akan melihat content>browser>browser.xul.
Chrome.manifest, yang saya tahu file ini untuk menunjukan bagian dari mana, dari tampilan Firefox yang ingin kita ganti, dan menunjukan file yang kita buat untuk mengganti tampilan Firefox.
Contoh:
Dalam file kita lihat
chrome://browser/content/browser.xul chrome://puputs/content/puputs.xul
berarti kita akan menambahkan file browser.xul dengan file puputs.xul. Untuk mengetahui apa yang ingin kita rubah, kita bisa melihat info ID dari tambilan Firefox di browser.xul.
puputs.xul, adalah file xml yang menggambarkan tampilan dari Extension Firefox yang kita ingin buat.
Contoh:
Saya ingin ada menu baru seperti File>Puputs.com maka saya cari dimana letak ID File menu di browser.xul. Setelah dicari, ID File menu di browser.xul adalah menu_FilePopup maka saya tinggal meniru struktur xml di browser.xml dan menambahkan menu item di dalam menu_FilePopup, seperti yang terlihat di file puputs.xul.
Dalam puputs.xul kita juga menambahkan src="chrome://puputs/content/puputs.js" di tag overlay artinya untuk mendaftarkan file java script yang berisi kode fungsionalitas dari Extension kita, untuk memanggil fungsi yang ada di puput.js di menu item kita tambahkan onCommand="namaFungsi()".
Puputs.js, adalah file Java Script yang berisi fungsionalitas dari Extension kita, di file Java Script saya hanya memberikan fungsi membuka website www.puputs.com di windows yang sedang aktif, apabila tombol menu dii tekan.
Setelah semua file kita buat saatnya kita membentuk file .XPI guna di konsumsi oleh Firefox, caranya kita harus membuat file .ZIP yang terdiri dari install.rdf, chrome.manifest dan foder content, setelah file .ZIP terbentuk rename lah file tersebut menjadi file .XPI. Buka Firefox anda dan coba buka file .XPI buatan anda menggunakan Firefox dan lihat hasilnya.
Hwaaa.. puput hebad bgt.. keren euy bisa bikin ext firefox! ridu mah cm bisa sebatas download! hehehe..
BalasHapusCool! Kapan-kapan gw cobain Put. Tapi ngomong-ngomong, Firefox extension tuh gunanya buat apa lagi selain itu? *ketauan gaptek secara masi pake ie*
BalasHapusheheheh masih puput yang dulu
BalasHapusTapiiiiiii ngapa tulisanlo jadi formal begono, pake saya kamu kalian anda, ahhahahahahaha put ini blog bukan buat bos loe kan, santai aja lagi. kita semua orang bersaudara.
lagi belajar nulis yak, udah put biasa aja, jangan kaku gitu.
tebak tebak tebak
Sy ni gaptek banged, ga pernah utak atik firefox. Itu untuk apa ya...
BalasHapusga bisa n blom minat
BalasHapusbaru mampu sbg pengguna
@anonim
BalasHapusbuatan gw gk banyak guna :D
@nur
ah mbak nur suka gitu deh :p
@tebak
wah ini pasti belis nie atao daemon
@zee
kalo ini cuma buat bookmark secara paksa :D
@edy
coba bikin enak lho
cie mantep dah bisa bikin add-ons sendiri .. mau coba ah kapan2 hehehe ..
BalasHapuskok file nya ngga bisa di unduh bro?
BalasHapusjadi FF extension isinya java script doang ya?
@ben
BalasHapuscoba aja ben
@zhai
bisa di download kok, mungkin di blok di proxy nya kali, tapi dari sini bisa kok
yup untuk fungsionalitas pake js, untuk UI nya pake xul
bisa ngga extension nya akses file *.mdb ?
BalasHapuskalo kompatibilitas dengan versi firefox gmn mas, file yg ada ga bisa sy install di firefox 303
BalasHapusThank's ya bro...!!!! eh... ada ga tutorial lainnya untuk membuat game atau aplikasi... ya kalo bisa sekalian dengan source kodenya.... klo ada bagi2 dunk...!!!
BalasHapusHebat.. Hebat..
BalasHapusumm.. mw tanya mas... saya sudah mempraktikan untuk membuat extension firefox sesuia tutorial di blog nya mas.. tetapi ketika saya buat file zip nya dan saya rename menjadi file 'xpi' lalu saya coba install ke firefox..ternyata ga bisa muncul pesan error seperti ini:
BalasHapus"Firefox could not install the file at
file:///D:/Operator/devid/sample.xpi
because: Install script not found
-204"
apakah masih ada yg kurang ya.. sy sdh cari2 malah bingung..
mohon bantuannya mas... terimakasih
Mas, please filenya udah bener2 ga bisa di download, bisa upload lagi ga? Saya pingin banget bisa bikin addon firefox sendiri. Thanks
BalasHapusAnjing nih blog ga guna, bales dikit aja ga mau apus aja ni blog
BalasHapusyou are what you say.
BalasHapusFilenya udah ilang, gak bisa di upload lagi
klo gini digituin aja jawab. pake ngeledek lagi, bilang dong klo dah raib
BalasHapussiapa yang ngeledek.. emang udah jelas you are what you say. PAHAM
BalasHapus