Mudahnya Membuat Chrome Extension

Mudahnya Membuat Chrome Extension
March 23, 2014 mirzailhami

Setelah beberapa hari yang lalu belajar membuat add-on di Google Docs, tutorial kali ini akan membahas bagaimana membuat extension di Google Chrome.

Tidak jauh berbeda dengan di Google Docs, membuat extension di Google Chrome juga cukup mudah. Tidak perlu harus mahir pemrograman. Cukup mengerti dasar HTML, CSS dan Javascript.

chrome-extension

Google Chrome Extension biasanya memiliki icon di bagian toolbar Chrome, dimana Anda dapat mengkliknya. Kemudian aplikasinya akan berjalan, misalnya untuk menampilkan artikel dari RSS atau cek inbox di Gmail.

Membuat Chrome Extension

Pada tutorial kali ini, Anda akan membuat contoh Chrome Extension sederhana untuk membaca RSS Feed dari website/blog Anda. Bagi yang belum punya RSS, silahkan dibuat terlebih dahulu. Bisa memanfaatkan Feedburner atau tool lainnya.

Mari mulai.

  1. Download chrome-ext.zip ke komputer Anda,  ekstrak file arsip tersebut.
  2. Menggunakan notepad, buka file manifest.json. 
  3. Edit baris #2 & #3 untuk nama dari website/blog & deskripsi singkat (tidak lebih dari 132 karakter), ini mempengaruhi SEO
  4. Edit baris #4, #5, #6 untuk icon, gunakan icon Anda sendiri
  5. Edit baris #7 & #9 untuk alamat website/blog & judul dari extension, simpan manifest.json
  6. Buka file javascript.js, edit link RSS feed dan sesuaikan dengan link RSS feed Anda
{
    "name": "Tutorial & Inspirasi Teknologi",
    "description": "Dapatkan tutorial terbaik seputar dunia teknologi, internet, web & mobile di browser Google Chrome Anda.", 
    "icons": { "16" : "icon-16.png",
                        "48" : "icon-48.png",
                        "128" : "icon-128.png"},
    "homepage_url": "http://mirzailhami.com/",
    "browser_action": {
        "default_icon": "icon-128.png",
        "default_title": "Tutorial dan Inspirasi Teknologi", 
        "default_popup": "index.html"
    }, 
    "manifest_version": 2,
    "update_url": "http://clients2.google.com/service/update2/crx",
    "content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'",
    "version": "1.0"
}

Simpan file manifest.json tersebut. Tahap berikutnya adalah silahkan buat icon Anda, bisa menggunakan Photoshop atau tool lainnya dengan ukuran 128×128 pixel. Atau silahkan gunakan gambar icon pada file zip sebagai sample.

Publikasi Chrome Extension, bayar?

Google mengharuskan pembayaran $5 untuk publikasi extension, pembayaran ini hanya dilakukan sekali dan berikutnya gratis untuk maksimal 20 extension per akun. Pembayaran dilakukan melalui Google Wallet.

Setelah dipublish, maka extension Anda dapat digunakan orang seluruh dunia. Publikasinya dapat dilakukaan di Chrome Developer.

Nah, bagaimana jika tanpa bayar? Bisa saja. Namun hanya bisa digunakan di komputer sendiri saja, karena memang filenya diletakkan di explorer.

Bagaimana caranya?

  1. Buka Google Chrome dan tab baru, ketikkan chrome://extensions
  2. Ceklis “Developer Mode”
  3. Klik tombol “Load unpacked extension”
  4. Pilih folder dimana Anda menyimpan extension Anda, klik OK

Selesai. Chrome Extension Anda sekarang sudah dapat digunakan. Perhatikan toolbar sebelah kanan. Chrome Extension ini hanya dapat digunakan di komputer Anda. Silahkan manfaatkan tutorial ini untuk membuat extension lainnya.

Video Tutorial – 5 Menit Membuat Chrome Extension

Referensi:

  • Google Feed – Petunjuk untuk atribut JSON yang dapat Anda gunakan.
  • Chrome Docs – Dokumen lengkap terkait Chrome Extension.
  • Video Tutorial – 5 Menit Membuat Chrome Extension