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.


INFO : File Download Sudah ilang, jadi sudah tidak bisa mengambil contoh file xpi nya, Maaf

Share this:

CONVERSATION

19 comments:

Anonim mengatakan...

Hwaaa.. puput hebad bgt.. keren euy bisa bikin ext firefox! ridu mah cm bisa sebatas download! hehehe..

Nur Rachmawati mengatakan...

Cool! Kapan-kapan gw cobain Put. Tapi ngomong-ngomong, Firefox extension tuh gunanya buat apa lagi selain itu? *ketauan gaptek secara masi pake ie*

Tebak siapa put mengatakan...

heheheh masih puput yang dulu

Tapiiiiiii 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

Zee mengatakan...

Sy ni gaptek banged, ga pernah utak atik firefox. Itu untuk apa ya...

edy mengatakan...

ga bisa n blom minat
baru mampu sbg pengguna

Puput mengatakan...

@anonim
buatan 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

Benazio R.P mengatakan...

cie mantep dah bisa bikin add-ons sendiri .. mau coba ah kapan2 hehehe ..

zhai mengatakan...

kok file nya ngga bisa di unduh bro?

jadi FF extension isinya java script doang ya?

Puput mengatakan...

@ben
coba 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

zhai mengatakan...

bisa ngga extension nya akses file *.mdb ?

Anonim mengatakan...

kalo kompatibilitas dengan versi firefox gmn mas, file yg ada ga bisa sy install di firefox 303

The pirates mengatakan...

Thank's ya bro...!!!! eh... ada ga tutorial lainnya untuk membuat game atau aplikasi... ya kalo bisa sekalian dengan source kodenya.... klo ada bagi2 dunk...!!!

Antox news mengatakan...

Hebat.. Hebat..

Devid mengatakan...

umm.. 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:
"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

Anonim mengatakan...

Mas, please filenya udah bener2 ga bisa di download, bisa upload lagi ga? Saya pingin banget bisa bikin addon firefox sendiri. Thanks

Anonim mengatakan...

Anjing nih blog ga guna, bales dikit aja ga mau apus aja ni blog

Puput mengatakan...

you are what you say.

Filenya udah ilang, gak bisa di upload lagi

Anonim mengatakan...

klo gini digituin aja jawab. pake ngeledek lagi, bilang dong klo dah raib

Puput mengatakan...

siapa yang ngeledek.. emang udah jelas you are what you say. PAHAM