Basit Bir Chrome Uzantısı Nasıl Yapılır?

Bir Chrome uzantısı yapmak oldukça basit bir işlemdir. İşiniz bittiğinde, tarayıcının nasıl çalıştığını geliştirmek için bilgisayarınızda kullanabileceksiniz.

Uzantının tam olarak çalışabilmesi için tarayıcının ihtiyaç duyduğu bazı temel bileşenler vardır. Özel uzantınızı yüklemeye veya başkalarıyla paylaşmaya gerek kalmadan Chrome'da(Chrome) nasıl çalıştıracağınız dahil, tüm bunları aşağıda ele alacağız .

Karmaşık bir Chrome uzantısı oluşturmak, aşağıda göreceğinizden çok daha ayrıntılı bir süreçtir, ancak genel süreç aynıdır. Bugün kullanmaya başlayabileceğiniz bir Chrome uzantısının nasıl oluşturulacağını öğrenmek için okumaya devam edin .

İpucu(Tip) : Kendi uzantınızın ne kadar harika olabileceğini görmek için bu harika Chrome uzantılarına(these amazing Chrome extensions) göz atın .

Chrome Uzantısı Nasıl Yapılır?

Bu kılavuzu kullanarak, en sevdiğiniz web sitelerinden bazılarını listeleyen basit bir Chrome uzantısı oluşturacaksınız. (Chrome)Tamamen özelleştirilebilir ve güncellenmesi gerçekten çok kolay.

Yapmanız Gerekenler:

  • Uzantıyı oluşturan tüm dosyaları tutacak bir klasör oluşturun.
  • Bu uzantının gerektirdiği temel dosyaları oluşturun: manifest.json , popup.html , background.html , style.css(styles.css) .
  • Popup.html'yi(popup.html) bir metin düzenleyicide açın ve işiniz bittiğinde kaydettiğinizden emin olarak aşağıdakilerin tümünü buraya yapıştırın.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Bağlantıları ve bağlantı metnini düzenlemekten çekinmeyin veya (Feel)Chrome uzantısını tam olarak olduğumuz gibi yapmak istiyorsanız, her şeyi aynı bırakın.

  • Manifest.json'u(manifest.json) metin düzenleyicide açın ve aşağıdakileri kopyalayın/yapıştırın:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

“manifest_version”: 2,
“name”: “Favori Siteler”, ( “name”: “Favorite Sites”,)
“description”: “Tüm favori web sitelerim.”, ( “description”: “All my favorite websites.”,)
“sürüm”: “1.0”, ( “version”: “1.0”,)
“simgeler”: { ( “icons”: {)
“16”: “icon.png”,
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},

   “arka plan”: {  (   “background”: { )
        “sayfa”:”background.html” (        “page”:”background.html”)
},

    "browser_action" : {
        "default_icon" : "icon.png",
        "default_title" : "Favori Siteler", (        “default_title” : “Favorite Sites”,)
        "default_popup": "popup.html"
    }
}

Bu kodun yenilebilir alanları ad(name) , açıklama(description) ve varsayılan_başlık(default_title) içerir .

  • Styles.css dosyasını(styles.css) açın ve aşağıdaki kodu yapıştırın. Açılır menüyü süsleyen şey, görünümü daha çekici ve kullanımı daha da kolay hale getirmektir.

#myUL {
liste stili-türü: yok; (list-style-type: none;)
   dolgu: 0; (   padding: 0;)
   kenar boşluğu: 0; (   margin: 0;)
   genişlik: 300 piksel; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  üst kenar boşluğu: -1 piksel; (  margin-top: -1px;)
  background-color: #f6f6f6;
  dolgu: 12 piksel; (  padding: 12px;)
  metin-dekorasyon: yok; (  text-decoration: none;)
  yazı tipi boyutu: 18 piksel; (  font-size: 18px;)
  siyah renk; (  color: black;)
  Ekran bloğu; (  display: block;)
  yazı tipi ailesi: 'Noto Sans', sans-serif; (  font-family: ‘Noto Sans’, sans-serif;)
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

CSS dosyasında değiştirebileceğiniz çok şey var . Chrome uzantınızı beğeninize göre özelleştirdikten sonra bu seçeneklerle oynayın .

  • (Create)Uzantı için bir simge oluşturun ve onu icon.png olarak adlandırın . Chrome uzantı klasörünüze yerleştirin . Yukarıdaki kodda da görebileceğiniz gibi, bu boyutlar için ayrı bir simge yapabilirsiniz: 16×16 piksel, 32×32 vb.

İpucu: (Tip: )Google, (Google has more information)Chrome uzantıları oluşturmaya ilişkin daha fazla bilgiye sahiptir. Burada gösterdiğimiz basit adımların ötesine geçen başka örnekler ve gelişmiş seçenekler de var.

Chrome'a ​​Özel Uzantı(Custom Extension) Nasıl Eklenir

Artık Chrome uzantısını oluşturduğunuza göre, az önce oluşturduğunuz tüm dosyaları gerçekten kullanabilmeniz için tarayıcıya eklemenin zamanı geldi. Özel bir uzantı yüklemek, normal bir Chrome uzantısını yüklemekten(how you’d install a normal Chrome extension) farklı bir prosedür içerir .

  • Chrome menüsünde Diğer araçlar(More tools ) > Uzantılar'a(Extensions) gidin . Veya adres çubuğuna chrome://extensions/
  • Henüz seçili değilse , Geliştirici modunun(Developer mode) yanındaki düğmeyi seçin . Bu, kendi Chrome(Chrome) uzantılarınızı içe aktarmanıza izin veren özel bir modu açar .

  • Yukarıdaki 1. Adımda(Step 1) oluşturduğunuz klasörü seçmek için o sayfanın üst kısmındaki Paketlenmemiş yükle(Load unpacked ) düğmesini kullanın .

  • (Accept)Herhangi bir istem görürseniz kabul edin. Aksi takdirde, özel olarak oluşturulmuş Chrome uzantınız, tarayıcınızın sağ üst köşesinde sahip olduğunuz diğer uzantılarla birlikte görünecektir.

Chrome Uzantınızı Düzenleme

Artık Chrome uzantınız kullanılabilir durumda olduğuna göre, onu kendinize ait hale getirmek için değişiklikler yapabilirsiniz. 

Styles.css dosyası, uzantının nasıl görüneceğini kontrol eder, böylece genel liste stilini ayarlayabilir ve yazı tipi rengini veya türünü değiştirebilirsiniz. W3Schools , CSS ile yapabileceğiniz tüm farklı şeyler hakkında bilgi edinmek için en iyi kaynaklardan biridir .

Web sitelerinin listelendiği sırayı değiştirmek veya daha fazla site eklemek veya mevcut siteleri kaldırmak için popup.html dosyasını düzenleyin. Düzenlemelerinizi yalnızca URL ve ad üzerinde tuttuğunuzdan emin olun. <li> ve <html> gibi diğer tüm karakterler gereklidir ve değiştirilmemelidir. W3Schools'daki HTML Eğitimi,(HTML Tutorial on W3Schools) bu dil hakkında daha fazla bilgi edinmek için iyi bir yerdir.



Metin Aksoy

About the author

Excel ve PowerPoint dahil olmak üzere Microsoft Office yazılımlarıyla çalışma deneyimine sahip bir bilgisayar uzmanıyım. Ayrıca Google'a ait bir tarayıcı olan Chrome ile de deneyimim var. Becerilerim arasında mükemmel yazılı ve sözlü iletişim, problem çözme ve eleştirel düşünme yer alır.


Related posts