Menambahkan Extension pada Chrome, berarti Anda telah menambahkan fungsi pada browser Anda. Misalnya, dengan menambahkan Extension Google Drive, Anda dapat menyimpan dokumen yang sedang Anda buka di browser langsung ke Google Drive Anda, tanpa harus mengunduh dan mengunggahnya ke Google Drive. Dengan kata lain, penggunaan extension pada browser akan mempermudah aktifitas Anda.
Lalu, apakah membuat Chrome Extension itu sulit? Tidak! Membuat extension itu mudah. Anda dapat melihat tutorialnya di halaman ini : http://developer.chrome.com/extensions/getstarted.html. Dan kali ini saya akan memberikan contoh pembuatan Chrome Extension untuk login ke Facebook page. Sehingga, kita tidak perlu masuk ke halaman Facebook terlebih dahulu untuk login. Yuk ikuti langkah-langkahnya!
1. Download icon facebook untuk menjadi icon extention yang akan dibuat.
2. Buat file manifest.json seperti berikut ini :
default_icon adalah icon yang akan dijadikan icon extensionnya.
default_popup adalah file html yang akan di load ketika user meng-klik icon extensionnya.
3. Buat file popup.html seperti berikut ini :
file html yang dibuat disesuaikan dengan tampilan extension yang akan dibuat. Kita juga bisa menambahkan CSS untuk mempercantik tampilan. Karena extension yang akan kita buat sekarang adalah form login untuk login ke halaman facebook, maka pada popup.html, kita tambahkan form login yang berisi textbox untuk email dan password, serta button login.
Selain itu, pada file html ini, sertakan juga file javascript (.js) yang akan digunakan. Misal, pada kasus ini, saya menggunakan dua file js, yaitu jquery-1.8.2.min.js dan popup.js.
4. Buat file popup.js
Isi dari file popup.js diatas adalah untuk memberikan aksi yaitu ketika button ‘Login’ di klik, maka form akan disubmit. File javascript yang digunakan tidak boleh digabung dengan file .html.
5. Proses pembuatan extention telah selesai. Semua file-file diatas digabung ke dalam satu folder, misal : “facebook_login”.
6. Untuk menggunakan extension yang telah kita buat, buka browser Chrome dan masuk ke halaman chrome://extensions/, pastikan checkbox “Developer Mode” aktif. Lalu, klik “Load unpacked extension” dan pilih folder yang berisi extension (misal : facebook_login). Klik “OK”. Extention baru dengan nama “Facebook Login” akan muncul di list extension browser kita.
Dan extention sudah dapat kita gunakan. Icon Facebook akan ditambahkan di bagian kanan browser kita seperti ini:
Dan ketika klik “Login”, maka Anda akan langsung masuk ke timeline Facebook Anda.
Setelah pembuatan extention ini selesai, Anda dapat mengunggahnya ke Chrome Store ataupun membagikannya secara langsung dengan menggunakan file berektensi “.crx”. Bagaimana cara membuat file .crx? Ini dia caranya :
1. Masuk ke halaman chrome://extensions/ melalui browser Chrome
2. Klik tombol “Pack extention”, lalu akan muncul box untuk mengupdate extention seperti ini :
Masukkan path folder extention yang telah kita buat, kolom “Private key file” tidak perlu diisi jika kita baru pertama kali mem-pack extentionnya. Private key file berfungsi untuk mengupdate file .crx yang sudah ada sebelumnya. Klik “Pack Extention”. Maka action tersebut akan menghasilkan dua file yaitu xxx.crx dan xxx.pem
Masukkan path folder extention yang telah kita buat, kolom “Private key file” tidak perlu diisi jika kita baru pertama kali mem-pack extentionnya. Private key file berfungsi untuk mengupdate file .crx yang sudah ada sebelumnya. Klik “Pack Extention”. Maka action tersebut akan menghasilkan dua file yaitu xxx.crx dan xxx.pem
– file .pem adalah private key file yang berguna untuk mengunggah extention kita ke Chrome Store
–file .crx dapat digunakan untuk menginstall extention. Kita dapat menggunakan file .crx ini untuk menyebarkan extention yang telah kita buat. Untuk menginstallnya, kita hanya perlu drag and drop file tersebut ke browser chrome pada halaman chrome://extensions/
Sekian tutorial pembuatan chrome extention ini. Semoga bermanfaat!
Terima kasih.
Download file extention lengkap : Click Here
Nice info
ReplyDelete