Cyber Security Forum (X-code) - PT. Teknologi Server Indonesia

Tutorial ini terinspirasi dari addons yang dibuat oleh abah.

Ok langsung ajah,
Yang diperlukan hanyalah :
1. pengetahuan dasar mengenai bahasa xml
2. struktur directory addons
3. Notepad
4. Winzip (untuk melakukan packing file)
5. Kita juga membutuhkan sebuah gambar untuk mempercantik toolbar kita dengan resolusi 16 x 16 file type png
6. Kopi + cemlan buad nemenin  kalo gag ada cewe’na xixixiixi
Ok. Itu ajah sepertina
Langkah awal, kita siapkan tempatnya dulu :
1. Kita buat folder dengan nama plugins yang ingin kita buat. Disini saya memakai nama “penirustyle” boleh diganti kok sesuai keinginan kk2 semuana.
Huruf besar dan kecil dibedakan or casesensitive <= kata orang bule hehehe
2. Didalam folder penirustyle buat lagi folder dengan nama “chrome” tanpa tanda petik
3. Buat lagi 2 folder didalam folder chrome dengan nama “content” dan “skin”.

Kira-kira struktur file & foldernya seperti ini :

+- penirustyle/
+- install.rdf
+- chrome.manifest
+- chrome/
+- content/
+- penirustyle.js
+- penirustyle.xul
+- skin/
+- penirustyle.css
+- web.png


Ok. Kira-kira struktur directory dan file yg akan dibuat seperti diatas...
Pertama-tama kita buat dulu file installernya yaitu :
1. Install.rdf memberikan informasi kepada browser mengenai plugins yang kita buat. (itu yang q pahami.) kalo salah mohon dikoreksi
2. Chrome.manifest  memberikan arah lokasi file plugins dll yang kita buat. (CMIIW)








buka notepad kemudian ketikkan listing ini
============= [start]=====================
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">

<Description about="urn:mozilla:install-manifest">


<!-- informasi yang harus ada start -->

<em:id>[email protected]</em:id>
<em:name> penirustyle </em:name>
<em:version>1.0</em:version>

<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.6.*</em:maxVersion>
</Description>
</em:targetApplication>
<!-- informasi yang harus ada start -->

<!-- opsional atau boleh tidak ditulis start -->
<em:creator>Peniru</em:creator>
<em:description>contoh addons mozilla.</em:description>
<em:homepageURL>http://www.gegemaster.yourfreehost.com/</em:homepageURL>
<!-- opsional atau boleh tidak ditulis end -->

</Description>
</RDF>
=================[end]==============================
Kemudian simpan dengan nama install.rdf
perlu diperhatikan saat menyimpan, pastikan save as typenya adalah all files.






Buka notepad baru kemudian ketikkan listing berikut
====================[start]====================
content penirustyle chrome/content/
overlay chrome://browser/content/browser.xul chrome://penirustyle/content/penirustyle.xul
skin penirustyle classic/1.0 chrome/skin/
====================[end]======================
Ok, Kemudian simpan dengan nama chrome.manifest
perlu diperhatikan saat menyimpan, pastikan save as typenya adalah all files.

Next Step :
1. Buat file “penirustyle.js”
2. Buat file “penirustyle.xul”
3. Buat file “penirustyle.css”
Untuk liat struktur file untuk lokasi penyimpanan ketiga file diatas.
====================[start]=========================
function penirustyle_LoadURL(url)
{
window._content.document.location = url;

window.content.focus();
}
====================[end]===========================
simpan dengan nama penirustyle.js
perlu diperhatikan saat menyimpan, pastikan save as typenya adalah all files.


===================[start]===========================
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://penirustyle/skin/penirustyle.css" type="text/css"?>

<overlay id="penirustyle-Overlay"
xmlns="http://www.mozilla.org/keymaster/gateke ... s.only.xul">

<script type="application/x-javascript"
src="chrome://penirustyle/content/penirustyle.js" />

<toolbox id="navigator-toolbox">

<toolbar id="penirustyle-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T"
class="chromeclass-toolbar" context="toolbar-context-menu"
hidden="false" persist="hidden">

<toolbaritem flex="0">
<toolbarbutton id="penirustyle-MainMenu" type="menu"
label="Situs Penting" tooltiptext="Ni Menu Buatan Ane Heheh">
<menupopup>
<menuitem label="X-Code Home Page" accesskey="X"
tooltiptext="Navigate to X-code site"
oncommand="penirustyle_LoadURL('http://www.xcode.or.id/')" />

<menuseparator />

<menuitem label="Google" accesskey="G"
tooltiptext="Navigate to Google"
oncommand="penirustyle_LoadURL('http://www.google.com/')" />
</menupopup>
</toolbarbutton>
</toolbaritem>
</toolbar>
</toolbox>
</overlay>
=====================[end]=========================
simpan dengan nama penirustyle.xul
perlu diperhatikan saat menyimpan, pastikan save as typenya adalah all files.





===================[start]===========================
#penirustyle-MainMenu {
list-style-image: url("chrome://penirustyle/skin/web.png");
}
=====================[end]=========================
simpan dengan nama penirustyle.css
perlu diperhatikan saat menyimpan, pastikan save as typenya adalah all files.

Ok semua file yg dibutuhkan sudah siap… sekarang waktunya kita packing file2 tersebut menggunakan winzip.. disini saya pake yg versi 7…
Oke.. click kanan pada folder dan pilih add to zip.




Kemudian akan muncul kotak dialog dan ganti extensi file yg tadinya zip menjadi xpi... kemudian pilih add.. seperti pada gambar.



====





Kemudian tinggal di install pada browser.... ikuti petunjuk berikut.
Browse file xpi yg diextract



========



Klik install now




Kemudian restart firefox





Sekian tutorial ini.
*nb : ”penirustyle” dapat diganti dengan kata2 yg diinginkan.

maap kalo masi banyak kekurangan... masi noobie :malumalu: :malumalu:

Reference:
- http://www.borngeek.com
- http://www.xul.fr/en
- https://developer.mozilla.org/en


thanks to :
my GOD.
Xcode family,
Abah ( buat threadnya yg menjadi inspirasi )
‘n kk2 semua penghuni forum xcode :love: :love:

Kreatif pak.dikembangkan lagi.

ok kk,...