Masih berhadapan dengan laptop di malam ini, di kala orang-orang sudah tertidur nyenyak setelah beraktivitas seharian. Kadang saya merasa bosan dengan rutinitas saya setelah berhenti menjadi mahasiswa. Dimulai dengan tidur pagi jam 7, bangun jam 12 siang, dilanjutkan bercumbu dengan laptop hingga keesokan paginya. Dan itu seakan sudah menjadi siklus harian, bahkan bulanan ;). Anehnya, saya sangat menikmati hal itu :D. Nah, sesuai janji saya di postingan kemarin, di postingan malam ini saya akan berbagi tips & trik sederhana untuk membuat sebuah Google Chrome Extension untuk menampilkan RSS dari blog yang menggunakan engine wordpress. Caranya cukup mudah, ini saya praktekkan pada self hosting, yang artinya saya tidak numpang dengan hosting milik wordpress.
Untuk tutorialnya, saya dapatkan dari sini. Layaknya pemrograman web, yaitu dengan menggunakan html, css, js dan json. Karena memang browser Google Chrome sudah sepenuhnya mendukung teknologi html5 yang menurut saya sangat powerfull. Dapat juga kita sisipkan sebuah webservice untuk keperluan menampilkan data dari layanan yang kita buat sendiri. Dan tentunya ini membutuhkan self hosting tersendiri. OK deh, kita langsung aja ke langkah-langkah pembuatannya.
1. Karena akan menampilkan hasil feed RSS, kita harus mendaftarkan blog kita di feedburner.google.com.
2. Log In ke akun google milik rekan-rekan. Masukkan alamat feed blog kita :
3. Setelah itu, akan dihasilkan sebuah alamat feed. Nah alamat ini yang akan kita panggil, untuk kemudian ditampilkan dalam daftar 10 tulisan terbaru di blog kita. Simpan alamatnya baik-baik 🙂
4. Kemudian kita buat sebuah file dengan ekstensi .php, yang isinya ialah memanggil alamat feedburner di atas. Disini juga kita akan memanggil class SimpleXmlElement() milik php (support mulai PHP versi 5), yang berfungsi untuk melakukan parsing format data xml. Untuk tampilannya, silahkan dikreasikan sesuai keinginan rekan-rekan 🙂
<?php
function getFeed($feed_url) {
$content = file_get_contents($feed_url);
$x = new SimpleXmlElement($content);
foreach($x->channel->item as $entry)
{
echo "<div id='list'><div class='cleaner_h5'></div><b><h1><a href='".$entry->link."' target=_blank>".$entry->title ."</a></h1></b></div>";
}
}
getFeed("http://feeds.feedburner.com/gedelumbung/hiSB");
?>
5. Simpan file di atas dengan nama rss.php dan upload ke sebuah web server atau hosting. Saya menyimpan file ini di subdomain blog saya, http://rss.gedelumbung.com/rss.php
6. Sekarang kita lanjut untuk membuat file paket untuk Google Chrome Extension. Format file yang digunakan adalah JSON. Yuppppzzz, JSON everywhere :p. Formatnya seperti di bawah ini, pastikan kita menggunakan manifest_version : 2. Karena Google melakukan pembaharuan terhadap API Chrome Extension terdahulu.
{
"name": "RSS Blog GedeLumbung.Com",
"manifest_version": 2,
"version": "1.0",
"description": "Hanya Catatan Kecil Seorang Mahasiswa Sontoloyo",
"icons": {
"16" : "images/GB-19.png",
"48" : "images/GB-48.png",
"128" : "images/GB-128.png"
},
"browser_action": {
"default_icon": "images/GB-19.png",
"default_title": "RSS Blog GedeLumbung.Com",
"default_popup": "popup.html"
},
"permissions": ["tabs"]
}
7. Pada tag browser_action, kita dapat memanggil sebuah file html. Dimana file html ini akan berfungsi sebagai popup tampilan ketika extension (yang telah dipasang di browser Chrome) di-klik. Disini saya menggunakan iframe untuk memanggil file rss.php yang sudah saya upload di subdomain blog.
File popup.html
<body>
<h1><a href="http://gedelumbung.com" target="_blank">WWW.GedeLumbung.COM</a></h1>
<h2>Ng`Blog Biar Gak GobloG – BlogNya Gede Lumbung | Hanya Catatan Kecil Seorang Mahasiswa Sontoloyo</h2>
<div class="cleaner_h20"></div>
<div>
<iframe src="http://rss.gedelumbung.com/rss.php" frameborder="0" autoscrolling="no" width="100%" height="400"></iframe>
</div>
</body>
8. Karena membutuhkan icon, silahkan siapkan gambar dengan ukuran seperti di atas yaitu 16×16, 48×48, dan 128×128. Simpan di dalam folder images.
9. Saatnya kita mencoba extension ini ke browser Google Chrome. Caranya hampir sama dengan cara instalasi di postingan kemarin.
10. Setelah terbuka menu extensions, silahkan ikuti langkah di bawah ini. Pada gambar di bawah, kita harus mencentang developer mode terlebih dahulu. Kemudian klik “Load unpackaged extension” untuk memuat file extension yang tadi kita buat. Jika tidak terjadi kesalahan, maka extension kita sudah terpasang di browser Google Chrome. Untuk menjadikan format .crx, silahkan klik “Pack extension”. Akan dihasilkan 2 buah file, yaitu file .crx dan 1 file key yang digunakan kala kita ingin melakukan perubahan pada file extension
Nah, kira-kira begitulah sedikit langkah-langkah untuk membuat sebuah extension sederhana guna menampilkan rss feed blog pada browser Google Chrome. Kalau ingin mengirimkan extension ini ke Chrome Web Store, kita dikenai biaya pendaftaran $5. Berhubung saya gak tau cara bayarnya, sementara belum bisa submit aplikasi ke sana :D. OK deh, sekian dulu postingan saya kali ini. Semoga bermanfaat untuk kita semua.
Happy Blogging and Keep Coding
Cheerrrss….!!!!
mantap bli..icip-icip dulu
naise inpo artikel gan.. sundul2…
naah ini yg dicari! Mantap, Kang,,, Bravo!!!
kalo boleh tanya skalian minta advice nya, cara bikin rss feed untuk web/blog di codeigniter!
makasiiih, Kang!