Jetpack untuk Firefox memungkinkan kita membuat plug-in Firefox dengan mudah hanya dengan menggunakan keterampilan front-end (HTML/CSS/JS) yang telah kita kuasai. Yang mungkin lebih menarik lagi - Jetpack juga mengintegrasikan kerangka kerja jQuery.
Baik itu Adobe Air, Web OS, atau Jetpack, setidaknya mari kita yakin bahwa nilai front-end akan semakin terlihat dalam peluang yang ada.
Mari kita lihat cara membuat ekstensi Firefox Jetpack pertama Anda langkah demi langkah:
Langkah 1: Instal plugin Jetpack
Alamat plugin Jetpack: https://jetpack.mozillalabs.com/install.html
Setelah menginstal plug-in Jetpack, Anda dapat mengakses antarmuka lokal Jetpack dengan mengetik about : jetpack di bilah alamat.
Langkah 2: Buat file planabc.js.
Kode detail planabc.js adalah:
jetpack .statusBar .tambahkan ( {
html : '' ,
lebar : 16 ,
siap : fungsi ( widget ){
$ ( widget ) .klik ( fungsi (){
jetpack .tab .contentWindow = "http://www.planabc.net/" ;
});
}
}); jetpack .statusBar .append akan mengeksekusi objek JavaScript (objek JavaScript memiliki empat properti : html, url , width dan onReady).
- Atribut html: Mendefinisikan HTML awal yang akan ditampilkan di bilah status. Dalam contoh ini, elemen IMG sederhana ditampilkan.
- atribut url: Mendefinisikan URL konten HTML eksternal yang akan ditampilkan pada bilah status. Dalam contoh ini, properti ini tidak digunakan.
- atribut lebar: Mendefinisikan lebar konten pada bilah status (satuan: piksel). Dalam contoh ini, didefinisikan sebagai 16 piksel, yang merupakan lebar elemen IMG itu sendiri.
- Atribut onReady: mendefinisikan fungsi yang akan dipanggil (fungsi ini akan dipanggil setelah bilah status dibuat). Karena Jetpack mengintegrasikan kerangka jQuery, Anda dapat langsung menggunakan properti dan metode jQuery. Dalam contoh ini, sebuah fungsi didefinisikan . Saat ekstensi Jetpack diklik , kita akan mengubah properti jetpack tabs . jetpack tabs .contentWindow .objek lokasi setara dengan objek jendela , yang dapat Anda akses melalui JavaScript untuk mengakses halaman web.