Google Chrome Eklentisi Yazmak

Merhaba Arkadaşlar, Bugün size Google Chrome için eklenti yazmayı öğreteceğim. Aslına bakarsanız hiç google chrome eklenti yazma istediği duymadım. Nedense zordur diye öğrenmek istemedim. Tesadüfen google’in geliştirici sitesine girdim ve kodlarına baktım çok kolay.. Tamamı ile html kullanıyoruz. Bir tek json kodu var. Onuda vereceğim size. Örneğin ben sitemden son konuları çeken bir eklenti yaptım. Belki yakında eklentiyi indirmeye sunabilirim

Aşağıdaki resimde yaptığım uygulamayı görebilirsiniz.

İlk Önce Boş bir klasör açıyoruz. Daha sonra yeni bir txt dosyası açıyoruz. Adını ve uzantısı “manifest.json” olarak değiştiriyoruz. Sonra aşağıdaki kodları json dosyamıza yazıyoruz. Burda ;
name Kısmına : Uygulamamızın Adı
version Kısmına : Uygulamamızın Verisonu
manifest_version : Burayı değiştirmiyoruz
description Kısmına : Uygulamamızın ile ilgili açıklama ( Türkçe karakter kullanırsanız hata verebilir )
default_icon Kısmına : Uygulamamızın icon adını ve uzantısını yazıyoruz.
default_popup Kısmına : Uygulamamızın sağ üstteki iconuna tıklayınca açılacak html sayfasının adını belirtiyoruz.

{
  "name": "AtknUludag - Son Makaleler",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Bu Eklenti sayesinde AtknUludag Blog sayfasindaki son makeleleri gorebilirsiniz.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

Yukarıdaki kodda belirttiğimiz popup.html dosyasını yazmaya başlayalım.. Şimdi burda şunu belirteyim. Gördüğünüz gibi öncede yazmış olduğum yenieklenenkonular.php Dosyasına yönlendiriyorum.. Bu kısımda istediğiniz herşeyi yapabilirsiniz. Sizin hayal gücünüze kalmış. Ama burda iki önemli kısım var.. body style kodunda width ve height değerlerini ve eğer başka linke yönlendireceksiniz iframe kodunda da width ve height değerlerini düzenleyiniz. Bu değerler icona basınca açılan popup kısmının uzunluğu ve genişliğini belirlemek için yazdık.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>AtknUludag.Com Son Konular</title>
<style type="text/css">
body{width: 700px; height:500px}
</style>
<meta http-equiv="refresh" content="1;URL=http://www.atknuludag.com/SonKonular.php">
</head>
<body>

<iframe src="http://www.atknuludag.com/SonKonular.php" style="width:700px;height:500px" frameborder="0"></iframe>

</body>
</html>

Şimdi uygulamamız bitti. Sıra geldi bunu test etmeye Aşağıdaki resimdeki işlemleri yapıyoruz. Dördüncü adımda gördüğünüz gibi dosyalarımızın bulunduğu klasörü seçiyoruz. Daha sonra eklenti yüklenmiş olacak. Resmi büyük görmek için üstüne tıklayabilirsiniz.

“Google Chrome Eklentisi Yazmak” üzerine 7 yorum

  1. Hocam kullandığım manifest bu bununla chrome mağazaya oyun koyuyorum ama beceremediğim bir şey var başkalarının koyduğu oyunlara baktığımda dil desteği bir suru, ama ben dil desteği olan bir manifest bulamadım. Nasıl eklerım bu dıllerı . Teşekurler

    {
    “name”: “COUNTER-STRIKE-ONLINE 2”,
    “description”: “http://www.”,

    “version”: “1”,
    “manifest_version”: 2,

    “app”: {
    “launch”: {
    “web_url”: “http://”
    }
    },
    “icons”: {
    “128”: “128×128.png”
    },
    “permissions”: [
    “unlimitedStorage”,
    “notifications”
    ]
    }

    1. Benim bu konudaki amacım google chrome tarayıcısının programlama mantığı. Html ve javascript ile yapabilirsiniz. Sanırım bu işlemi gizli yapmak istiyorsunuz ama öyle birşey söz konusu olamaz sanırsam. Çünkü sağ yukarıdaki simgelere tıklanıldığında kodlar aktif oluyor

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.