# Chrome Eklentisi Nasıl Yapılır? Adım Adım

Kaynak: https://webodasi.com/chrome-eklentisi-nasil-yapilir/
Yazar: tuncay
Yayın: 2021-07-28
Güncelleme: 2021-07-28

Merhabalar. Hiç merak ettiniz mi Chrome Eklentisi gibi eklentiler nasıl yapılıyor? Kimisi bizi reklamlardan kurtarırken kimisi websitelerine çok güzel özellikler kazandırıyor. Yani sonuçta bunları birileri yapıyorsa biz neden yapamayalım?

 

Bu yazıda size nasıl sade ve güzel tasarımı olan bir  **Chrome Eklentisi**  yapabileceğinizi anlatacağım. Chrome eklentisi dediğime bakmayın  **çoğu tarayıcıda**   **kullanabilirsiniz.**  Öyleyse hemen yapılışa geçelim.

 

## Gereksinimler

 

-Temel HTML ve CSS bilgisi.

 

-Bir adet  **kod editörü** . (Hatta not defteri ile bile yapabilirsiniz. Fakat en rahat şekilde çalışmak için profesyonel bir araç tavsiye ediyoruz. Biz bu yazıda  **Sublime Text**  kullanacağız fakat siz [farklı programlar](https://webodasi.com/yazilim-gelistiriciler-icin-en-iyi-10-kod-duzenleyici) kullanabilirsiniz.)

 

## Hadi Başlayalım

 

O zaman hadi yavaştan yapmaya başlayalım. Her şeyden önce ilk yapmamız gereken **bir klasör oluşturmak** . Klasöre yapacağınız eklentinin ismini veya rastgele bir isim verebilirsiniz. Bütün yapacaklarımız bu klasör içinde olacak. Ben " **Web Odası Eklentisi** " ismini vereceğim.

 

![](https://webodasi.com/wp-content/uploads/ekletisi.png)

 

Şimdi ihtiyacımız olan şeyler şunlar:

 

- manifest.json Dosyası
- Eklentimiz için bir adet ikon (görsel)
- html ve css dosyaları

 

## manifest.json Dosyası

 

Şimdi  **dosyamızın içerisine**  bir adet " **manifest.json** " isimli dosya oluşturuyoruz ve dosya içeriğini şu şekilde dolduruyoruz:

 

Burada  **"name"**  kısmının karşısına eklentinizin ismini,  **"description"**  kısmının karşısına eklentinizin açıklamasını ve  **"default_icon"**  kısmının karşısına da hazırladığınız görselin dosya adını girmelisiniz. Bu işlemlerden sonra bu dosya ile işimiz bitmiş oluyor.

 

## popup.html Dosyası

 

Şimdi sırada eklentimizin içini yapmakta, bir adet "popup.html" dosyası oluşturuyoruz ve başlıyoruz:

 

Ben burada [Font Awsome](https://fontawesome.com) görsellerinden yararlandım. " **<!--Font Awsome Kodunu Buraya Yerleştiriniz -->** " yazan yere Font Awsome kodunuzu yapıştırarak devam edebilirsiniz.

 

Bu kısımda normal bir web sayfası tasarlıyormuş gibi HTML kodlarımızı giriyoruz ve dışarıdaki bir style.css dosyasına bağlıyoruz.

 

## style.css Dosyası

 

Şimdi yaptığımız eklentiyi süsleme zamanı geldi.

 

Burada dikkat etmeniz gereken şey  **body**   **kısmındaki yükseklik ve genişlik ayarları** . Bu ayarlar eklentimizin en-boy oranını belirleyecek. Onun dışında istediğiniz gibi tasarım yapabilirsiniz.

 

## Yükleme Ve Kullanma

 

Eveeet. Kendi eklentimizi başarılı bir şekilde hazırladık ve şimdi en güzel kısma geldi. Artık yaptığımız projeyi test edip kullanabiliriz.

 

## Kurulum

 

Bunu yapmak için tarayıcınızda  **chrome://extensions**  adresine gitmelisiniz. Ardından şu adımları takip edin:

 

Sağ üstte bulunan " **Geliştirici Modu** "nu aktif hale getirin

 

![](https://webodasi.com/wp-content/uploads/resim_2021-07-28_181544.png)

 

Daha sonra " **Paketlenmemiş Öğe Yükle** " butonuna basın ve çıkan yerden  **ilk başta oluşturduğumuz klasörü**  seçin.

 

![](https://webodasi.com/wp-content/uploads/resim_2021-07-28_183315.png)

 

Eklentimizi her zaman görüntülemek için sağ üstteki yapboz işaretine basın ve yaptığınız eklentiyi bulup " **Sabitle** " tuşuna basın.

 

## Son Hali

 

Gördüğünüz gibi eklentimizin son hali bu şekilde. Siz de kendi eklentilerinizi yapabilirsiniz. (Resimlere tıklayınca ilgili hesaplara, en üstteki logoya tıklayınca da [webodasi.com](https://webodasi.com)'a yönlendiriyor.)

 

![](https://webodasi.com/wp-content/uploads/webodasi-3.jpg)

 

## Eklentimizi İndirin

 

Burada sizinle birlikte yaptığımız eklentiyi cihazınıza kurmak isterseniz diye link bırakalım dedik. Dosyalarını inceleyip denemeler yapabilirsiniz.

 

[İndir](https://s6.dosya.tc/server3/ipogyf/Web_Odasi_Eklentisi.zip.html) ( **rar şifresi:**  webodası)

 

[Yedek Link](https://dosya.co/ibsslg7y4mvt/Web_Odas%C4%B1_Eklentisi.zip.html)

 

[Kaynak](https://www.instagram.com/p/CRtvSAYKoyA/)