bismillah..
extension adalah sebuah tool atau fitur tambahan untuk sebuah browser, yang fungsinya untuk memperindah bowser dan juga membuat browser menjadi serbaguna dan tentunya membuat pengguna lebih mudah mengunkan browser tersebut.
setiap browser sudah pasti memiliki extension baik itu mozzila, opera dll.. nah disini saya mencoba menulis artikel untuk membuat extension untuk browser google chrome yang sederhana dan bahasa yang di gunakan adalah html, javascript dan bisa juga css, disini kita akan membuat sebuah toolbar sederhana yaitu google search berikut adalah langkah-langkahnya:
Buatlah folder disembarang tempat untuk menampung file extension yang akan kita buat, dengan nama sesuai dengan yang kita ingin kan, disini saya membuat follder dengan nama 'extension'.
kemudian ketikan skrip dibawah ini dengan menggunkan notepadatau text editor lainnya dan simpanlah file ini di dalam folder yang 'extension'yang kita buat tadi dan simpan dengan nama manifest.json berikut adalah kode script nya:
{
"name": "google search",
"version": "1.0",
"description": "google search",
"browser_action": {
"default_icon": "icon.png", //harus sama dengan nama file gambar
"popup": "google.html" //harus sama dengan nama file html
}
}
setelah itu masukan juga kedalam folder yang sama dengan ukuran kecil saja yang nantinya akan di gunakan sebagai icon untuk extension yang kita buat disini gambarnya saya beri nama "icon.png" usahakan file gambarnya ber-format "png".
kemudian buatlah file html dengan nama sembarang sesuai dengan keinginan, disini file nya saya beri nama "google.html" berikut adalah kode script untuk file nya:
<html>
<head>
<script language="JavaScript"type="tex
t/javascript">
function search_google(){
window.open("http://www.google.com/search?q="+do
cument.search.query.value);
}
function search_images(){
window.open("http://www.google.com/images?q="+document.search.query.value);
}
</script>
</head>
<body>
<form name="search">
<input name="query" value="" type="text"/>
<input value="Search" onClick="search_go
ogle()" type="submit"/>
<input value="image" onClick="search_images()" type="submit"/>
</form>
</body>
</html>
lalu simpanlah file tersebut kedalam folder yang sama yaitu folder extension maka isi foldernya adalah seperti gambar berikut:
nah kemudian untuk mencoba extension yang kita buat jalan kan browser google chrome lalu klik tombol dengan icon seperti ini
kemudian pilih menu tool lalu pilih menu extension maka halaman browser akan muncul halaman seperti gambar berikut:
pada halaman tersebut terdapat tiga tombol yaitu;
1. load unpaked extension (digunakan untuk mengupload atu menginstal fil extension yang belum dipaketkan)
2. pack extension (digunakan untuk memaketan file extension k
ita dengan format file "crx")
3. update extensin now (digunakan untuk meng-update exte
nsion)
nah.... klik tombol "load unpaked extension" untuk meng-install file extension yang kita buat tadi, maka akan muncul jendela dan cari folder tempat menyimpan extension pilih lalu tekan tombol Ok.
maka secara otomatis akan menginstall secara otomatis, jika berhasil maka extension akan muncul pada toolbar browser, hasilnya seperti gambar berikut:
setelah selesai kita tinggal meng-upload nya tetapi sebelumnya paketkan menjadi file zip dan upload filenya untuk tutorial meng -upload file extensinya silahkan lihat videonya disini.
disana bisa dicoba sendiri cara meng-upload file extension nya
selamat mencoba...
semoga membantu dan mohon koreksinya .. terimakasih.......
4 comments
kerennnnn...!! :D
Replywahhhh.. mkasih mas.... he...:-D
ReplyWuuuaahhh,, keren banget, Mas... :D
ReplyMakasi buat tutorialnya :D
@badcloud: wah sama2 makasih juga udah berkunjung... ;))
ReplyPost a Comment