Cara Membuat Add-Ons Extensions Browser Mozila Firefox


Pendahuluan

Add-Ons adalah software plugin, ekstensi, atau tema yang menambah cantik dan mengkustom aplikasi berbasis Mozilla. dalam artikel ini saya akan membahas secara singkat cara membuat Add-Ons untuk browser mozila. adapun kegunaan dari Add-Ons ini adalah:

  1. Untuk memberikan shortcut link menuju relation web blog ri32 (wordpress, labhouse, 4shared)
  2. Untuk memasukan katakunci pencarian informasi di google (web, image)
  3. Untuk menampilkan icon jejaring sosial blog ri32 (facebook, twitter)

Struktur File dan Folder

+- mytoolbar/
   +- install.rdf
   +- chrome.manifest
   +- chrome/
      +- content/
         +- mytoolbar.xul
         +- mytoolbar.js
      +- skin/
         +- facebook.png
         +- gripper.png
         +- images.png
         +- wp.png
         +- web.png
         +- mytoolbar.css

file-file yang dibutuhkan dalam membuat Add-Ons ini adalah sebagai berikut :

  1. install.rdf  digunakan untuk memberikan rincian informasi dari Add-ons yang kita buat
  2. chrome.manifest digunakan untuk mendefinisikan alamat dari paket file yang digunakan
  3. mytoolbar.xul digunakan untuk mengatur tampilan keseluruhan dari add-ons yang dibuat
  4. mytoolbar.js digunakan untuk menangani event atau proses yang dilakukan
  5. mytoolbar.css digunakan untuk mengatur tampilan, dan gambar Add-Ons

Potongan Script (install.rdf)

<?xml version=”1.0″?>
<RDF xmlns=”http://www.w3.org/1999/02/22-rdf-syntax-ns#&#8221;
xmlns:em=”http://www.mozilla.org/2004/em-rdf#”&gt;
<Description about=”urn:mozilla:install-manifest”>
<!– Item yang dibutuhkan –>
<em:id>mytoolbar@ri32.wordpress.com</em:id>
<em:name>Toolbar Blog Ri32</em:name>
<em:version>1.00</em:version>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>6.*</em:maxVersion>
</Description>
</em:targetApplication>
<!– Item pilihan –>
<em:creator>Agus Sumarna</em:creator>
<em:description>Add-Ons untuk menampilkan link Relation Web blog Ri32</em:description>
<em:homepageURL>http://ri32.wordpress.com</em:homepageURL&gt;
</Description>
</RDF>

Potongan Script (chrome.manifest)

content mytoolbar chrome/content/
overlay chrome://browser/content/browser.xul chrome://mytoolbar/content/mytoolbar.xul
skin mytoolbar classic/1.0 chrome/skin/

Download

Cara Menginstall Add-Ons

Adapun cara untuk menginstall sebuah add-ons yaitu :

  1. Cara pertama Download Application untuk mendapatkan file mytoolbar.xpi
  2. Setelah itu Open File (Ctrl+o) dari browser mozila dan cari file mytoolbar.xpi
  3. Klik tombol Open dan ikuti langkah penginstalan
  4. Setelah selesai biasanya ada perintah untuk restart browser mozila

Cara Uninstall Add-Ons

Jika ingin menonaktifkan sebuah add-ons atau bahkan ingin menghapus add-ons dari browser mozila langkahnya adalah sebagai berikut :

  1. Buka browser mozila
  2. Pilih menu Tools>Add-Ons (Ctrl+Shift+A)
  3. Pilih bagian Exstensions
  4. Cari Add-ons yang ingin di disable atau remove
  5. Restart browser mozila
  6. Selesai

Tempat Menyimpan Add-Ons

Add-ons yang anda install biasanya terdapat pada direktori :

C:\Documents and Settings\[Nama Anda]\Application Data\Mozilla\Firefox

Referensi

http://www.borngeek.com

Add-Ons toolbar ini bisa dijadikan template untuk mengembangkan Add-Ons sesuai kebutuhan anda. sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Depok, 26-7-2011

noname

7 Responses

  1. maksih… ijin sedot source nya

  2. Kalo mau ngebuat thema gimana caranya gan ???

  3. mas..kalo kita mau buat enkrpsi rsa, tapi kita membangun add-ons mozilla thunderbird. gmana caranya mas, ada gk source codenya?

  4. buatnya dimana ?

  5. cukup rumit juga ternyata untuk membuat sebuah add ons mozilla firefox
    terima kasih atas ilmunya, sangat bermanfaat bagi saya

  6. mantep mas, nyoba buat belajar, ijin sedoot ya :)
    salam kenal dari nubie

  7. terimakasih gan infonya, sangat membantu…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 522 other followers

%d bloggers like this: