Add-ons Mozilla:
Resep Masakan
Romi Hardiyanto
Indonesian Mozilla Localization Coordinator
http://mozilla.web.id
http://ewesewes.web.id

Apa sih Add-ons?
• Mozilla Add-ons memperkaya perangkat
lunak perangkat lunak berbasis Mozilla:
Firefox, Thunderbird, Sunbird, Songbird,
Flock, dll
• Add-ons = Pengaya

Bahan-Bahan
• XML: eXtensible Markup Language
• CSS: Cascading Style Sheet
• JavaScript: JavaScript 1.7 atau 1.8
• DOM
Document Object Model
• XUL
http://developer.mozilla.org/XUL
• Sebuah Ide
(dan Niat, dan Waktu, dan Komputer, dkk)

Apaan sih XUL?
• dibaca: zul
• kependekan dari XML User interface
Language
• window, button, menu, popup, textbox,
radio, dll

Overview XUL
<?xml version=\"1.0\" encoding=\"UTF‐8\"?>
<?xml‐stylesheet href=\"chrome://global/skin/\"?>
<window xmlns=\"http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul\">
<!‐‐ Contents go here. ‐‐>
</window>

Perangkat
Meramu XUL
• XULExplorer
• Komodo Edit
• Teks Editor/XML Editor:
Notepad, gedit, kate, Notepad++, EditPlus,
dkk

Contoh

JavaScript
function alert(str) {
window.alert(str);
}

DOM
• Document Object Model
• Merupakan cara mengakses “isi” XUL/
HTML dari program
• Document adalah sekumpulan node
(parent-child), getAttribute, setAttribute

Contoh
var labeltextlink = document.getElementById('results-link');
while (labeltextlink.firstChild) {
labeltextlink.removeChild(labeltextlink.firstChild);
}
var textEl = document.createElement('label');
labeltextlink.appendChild(textEl);
textEl.setAttribute('value',text);

Meramu:
Memaketkan Extension
• File pendukung:
• chrome.manifest
daftar isi sebuah extension
• install.rdf
“petunjuk penginstalan” untuk program

Layout
Direktori Extension
• chrome.manifest
• install.rdf
• chrome/
• content/
XUL dan JavaScript file
• locale/
Berkas DTD untuk dukungan multibahasa (opsional)
• skin/
File CSS (opsional)

Testing, Testing, Testing
• Buat file teks berisi:
Path lengkap ke direktori extension
• Letakkan pada
%DirektoriProfilFirefox%/extension
contoh:
C:\\Document and Settings\\USER\\Application Data\\Mozilla Firefox\\Profiles
\\xxxxxxxxxx.default\\extensions\\
• Namai file dengan nama id extension,
contoh: myextension@mydomain.web.id
• Restart Firefox
• Pastikan extension pada daftar Add-ons

Tolong! Stuck nih!
• http://developer.mozilla.org
• irc://irc.mozilla.org/#developer
• Milis: groups.google.com/groups/id-moz

Sudah Jadi?
Mari Berbagi!
• addons.mozilla.org (buat akun jika belum
punya)
• submit → sandbox → review → public
• kabar-kabari teman: blog, milis, sms

Beberapa Ide
• Notifikasi Penggunaan Speedy
• Firefox Warnet Customization Kit

Suwun Rek! Wis Teko!
• romihardiyanto at gmail dot com
• romihardiyanto at yahoo dot com
• YM!:romihardiyanto
• Jabber: romihardiyanto@gmail.com