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

logoblog

Share this:

CONVERSATION

19 comments:

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

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

    BalasHapus
  3. 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

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

    BalasHapus
  5. ga bisa n blom minat
    baru mampu sbg pengguna

    BalasHapus
  6. @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

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

    BalasHapus
  8. kok file nya ngga bisa di unduh bro?

    jadi FF extension isinya java script doang ya?

    BalasHapus
  9. @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

    BalasHapus
  10. bisa ngga extension nya akses file *.mdb ?

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

    BalasHapus
  12. 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...!!!

    BalasHapus
  13. 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

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

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

    BalasHapus
  16. you are what you say.

    Filenya udah ilang, gak bisa di upload lagi

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

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

    BalasHapus