Tuesday, 2017-10-24, 1:34 AM
Welcome Guest

[ New messages · Members · Forum rules · Search · RSS ]
Page 1 of 11
Forum » Tutorial & Latihan Soal » Tutorial Bahasa Pemrograman » Membuat extensions sederhana di Google Chrome (Thanx to google for an awesome open standart)
Membuat extensions sederhana di Google Chrome
SanmanzzDate: Tuesday, 2010-11-09, 11:48 AM | Message # 1
Major
Group: Administrators
Messages: 94
Reputation: 1
Status: Offline
Google chrome adalah salah satu browser dari google yang menganut prinsip open standart, dikarenakan open standart maka kita dapat menambahkan coding atau extensions kedalam google chrome dengan menggunakan standart yang sama. Open source juga menganut prinsip open standart, dan setiap orang dapat membantu atau melakukan modifikasi apabila terdapat proses yang tidak berjalan dengan yang dikehendaki.

Berikut ini adalah cara untuk membuat sebuah extensions sederhana dari google yang bertujuan untuk mencari gambar dari flicker dan ditampilkan didalam google chrome.
untuk membuat sebuah ektensions sederhana kita memerlukan file yang diberi nama manifest.json, dan sebuah file berekstensi .html sebagai tempat bahasa coding kita.

Sebelum mulai pastikan browser anda adalah google chrome dapat di download disini

Langkah" untuk membuat extensions di google chrome :
1. Buat sebuah folder baru di komputer anda
contoh : "d:\chrome exercise"
2. Didalam folder tersebut buatlah sebuah file manifest.json, dan isi file manifest.json adalah seperti ini:

Quote
{
"name" : "PopUp Gambar Saya",
"version" : "1.0",
"description" : "Pop Up Gambar",
"browser_action" : {
"default_icon": "icon.png",
"popup" : "popup.html"
},
"icons" : {
"128" : "icon.png"
},
"permissions" : [
"http://*/*"
]
}

3. buat sebuah images (256x256 pixel) .png --> dengan nama "icon.png" dan copykan kedalam folder "d:\chrome exercise"
4. buat sebuah file dengan nama popup.html dan save kedalam folder yang sama
didalam file popup.html berisi coding seperti berikut ini :
Quote
<style>
body {
min-width:357px;
overflow-x:hidden;
}

img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>

<script>
var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=anjing%20lucu&" +
"safe_search=1&" + // 1 is "safe"
"content_type=1&" + // 1 is "photos only"
"sort=relevance&" + // another good one is "interestingness-desc"
"per_page=20",
true);
req.onload = showPhotos;
req.send(null);

function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");

for (var i = 0, photo; photo = photos[i]; i++) {
var img = document.createElement("image");
img.src = constructImageURL(photo);
//constructImageURL(photo);
document.body.appendChild(img);
}
}

// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +
"_s.jpg";
}

function cariFoto(){
var input = document.querySelector('#textInput').value;
var hapus = document.getElementsByTagName('img');
//for (var i=0; i<hapus.length;i++){
// document.body.removeChild(hapus[i]);
//}

while (hapus.length>0){
document.body.removeChild(hapus[0]);
hapus = document.getElementsByTagName('img');
}

req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=" + input + "&",
"safe_search=1&" + // 1 is "safe"
"content_type=1&" + // 1 is "photos only"
"sort=relevance&" + // another good one is "interestingness-desc"
"per_page=20",
true);
req.onload = showPhotos;
req.send(null);
}
</script>

<input type="text" id="textInput" value="" size="40" />
<input type="button" value="Search" onclick="cariFoto();" />
<br />

5. Selanjutnya adalah langkah untuk menempel extensions yang telah kita buat ke google chrome kita
buka google chrome pada address bar ketikkan "chrome://extensions"
lalu pilih developer mode

6. Pilih load upacked extensions dan kemudian cari folder kita meletakan manifest.json --> "d:\chrome exercise"
7. Extensions kita telah selesai dan dapat digunakan!!!

credit to google for awesome extensions!!!

Sanmanzz

 
debyDate: Tuesday, 2010-11-09, 12:02 PM | Message # 2
Private
Group: Users
Messages: 1
Reputation: 0
Status: Offline
mantab ko,,lanjutkan hands hands
 
Forum » Tutorial & Latihan Soal » Tutorial Bahasa Pemrograman » Membuat extensions sederhana di Google Chrome (Thanx to google for an awesome open standart)
Page 1 of 11
Search: