Bu makalemizde Google Chrome, Mozilla Firefox ve Opera gibi Tarayıcılar için Eklenti Yapımı nı en baştan yayınlamaya kadar ele alacağız. Eklentiler tüm tarayıcılarda çalışacak şekilde genele uygun yapılacaktır.
Yazımızda iki eklenti türünün yapımından bahsedeceğim. Örnek olarak da bu eklentilerin yapılışını ve içeriklerini ele alacağım. Yazıyı okumadan önce paylaştığım iki eklenti türünü de incelemeniz yazının anlaşılırlığını kolaylaştıracaktır.
İlk tür, eklentinin tarayıcıda açık olan sayfaya müdehale etmediği, sadece kendine tıklandığında işlemini yaptığı türdür. Buna örnek olarak sitemizin yapmış olduğu Linux Sözlüğü eklentisi‘ne bakabilirsiniz. Eklenti sanki bağımsız bir web sayfası gibidir. Tarayıcıda o anda açık olan site ile bir alakası yoktur.
İkinci tür eklentiler ise tarayıcıda açık olan web sayfasına etki edebilen eklentilerdir. Yani eklenti tarayıcıda açılan bütün web sayfalarına ve ya sadece belirlenen sitelere ulaşıp değişiklikler yapabileceğiniz türdür. Buna örnek olarak da gene bize ait olan Web Whatsapp Dark Mode eklentisi‘ni inceleyebilirsiniz.
Tarayıcı Eklentisi Nedir?
Eklenti Yapımı nı ele almadan önce yeni başlayanlar için tarayıcı eklentisi nedir sorusunu açıklayalım. Tarayıcılar için yapılan yardımcı uygulamalardır. Tarayıcıların sağ üst köşesinde arama çubuğunun yanında bulunur. Uzantı olarak da bilinir ama ben eklenti demeyi tercih ediyorum.
Eklentiler aslında birer web sayfasıdır. HTML, CSS ve JS ile yazılır. İsteğe bağlı olarak tarayıcıda açık olan bir sayfaya erişim sağlayabilir, değişiklik yapabilir. Uygulama tarzında, HTML5 oyunları gibi eklentilerde geliştirmek mümkündür. Aynı zamanda eklenti sayesinde tarayıcıyı kullanarak bilgisayar özelliklerine de erişilebilir. Kamera, ekran görüntüsü hatta portlara bile ulaşılabilir. Yani bir tarayıcı eklentisi ile arduino gibi gömülü sistem programlamayı tarayıcı üzerinden haberleştirebilirsiniz. Kısaca eklentiler ile küçümsenmeyecek kadar çok şey yapılabilir.
Her tarayıcının kendine özel mağazası vardır. Ücretli ve ücretsiz bir çok eklenti mevcut. Hatta yazılımcılar, tasarımcılar, eğitmenler vb. meslekler için özelleşmiş işlerini kolaylaştıracak bir çok eklenti var, araştırmanızı tavsiye ederim. Mağazaları kullanarak indirme işlemi yapabileceğiniz gibi geliştirici modunda da kendi yazdığınız eklentileri mağazaya yüklemeden kullanabilirsiniz.
Eklenti Yapımı
Bir klasör açalım ve eklentimizin tüm parçalarını o klasörde toplayalım. En sona geldiğimizde o klasörü yayınlamaya göndereceğiz. Eklenti için olmazsa olmaz en önemli parça “manifest.json” dosyasıdır. Sonra iconlar ve eklentinin amacına göre kullanılacak diğer html, css, js gibi dosyalar olur. Linux Sözlüğü ve Whatsapp Dark eklentilerinin klasör görünümleri aşağıda gösterilmiştir.
manifest.json
Eklenti yapımı nın en önemli parçasıdır. Gerekli ayarlar ve açıklamalar bu json dosyasında json formatında yazılır. manifest.json içeriği ile ilgili bir çok yazı ve tarayıcıların orijinal makaleleri mevcut. Biz sadece yukarıda belirtilen iki eklenti için gerekecek manifest.json dosyalarının içeriğini inceleyeceğiz. Bu bize tüm mantığı öğretecektir.
- Linux Sözlüğü eklentisi için manifest.json :
1 2 3 4 5 6 7 8 9 |
{ "name": "Linux Sözlüğü" , "version": "1.0" , "manifest_version": 2 , "author": "Fatih Yıldırım" , "description": "Linux komutlarının ne işe yaradığını açıklamaları ile anlatan bir linux terminal komutları sözlüğüdür." , "browser_action": { "default_icon" : "default-icon.png", "default_popup" : "index.html"} , "icons" : { "16" : "16-icon.png", "48" : "48-icon.png", "128" : "128-icon.png"} } |
- Web Whatsapp Dark için manifest.json :
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "manifest_version": 2 , "name": "Whatsapp Dark Theme" , "version": "1.0" , "description": "Dark theme for web whatsapp" , "icons" : { "16" : "whatsapp-16.png", "48" : "whatsapp-48.png", "128" : "whatsapp-128.png"} , "browser_action": { "default_icon" : "default-icon.png" } , "content_scripts": [{ "css": ["styles.css"], "matches": ["https://web.whatsapp.com/*"] }] } |
İçeriklerini açıklayacak olursak, bu dosya adından ve içeriğinden de anlaşıldığı gibi bi json dosyası. İçerik olarak da belli başlı değerler alıyor. name, description ve author değerlerini eklentiye göre dolduruyoruz. Eğer eklentiyi ilk defa yayınlıyorsak yani bir güncelleme atmıyorsak version değerine 1.0 manifest_version değerine de 2 veriniz. Güncelleme yayınlarsak bu değerleri güncellemeye göre artıracağız. icons kısmında ise klasör içerisine attığımız 16 48 128 pixellik png iconların isimleri veriyoruz.
Gelelim browser_action ve content_scripts kısmına.
browser_action genelleyecek olursak eklentinin sahip olduğu dosyalardır diyebiliriz. Eklentiler aslında birer web sayfasıdır demiştik. Yani eklenti sayfasının özelliklerini yazıyoruz. Whatsapp Dark eklentisi için herhangi bir sayfaya ihtiyaç yok, o yüzden eklentinin sadece iconu olması yeterli. Linux Sözlüğü eklentisi için bir sayfa var. Yani eklenti iconuna tıklandığında bir pencere açılıyor ve orada işlem yapıyorsunuz. İşte açılan o pencere aslında browser_action kısmında belirtilen default_popup index.html. index.html içinde de css ve js klasörlerinde ki css ve javascript dosyalarını kullanıp bir sayfa hazırladık. Yani hazırladığımız sayfayı eklenti iconuna basılınca açılacak şekile getirmek için browser_action kullanılıyor.
content_scripts kullanım amacı ise eklentimiz o an açık olan web sayfasına erişebilsin istediğimizde kullandığımız kısımdır. matches alanında belirttiğim gibi web.whatsapp.com adresinde kullanılacak bir eklenti diyorum. css kısmında ise klasörde bulunan styles.css içeriğini matches de söylediğim sitelere entegre et diyorum. İstersek oraya js deyip javascript dosyalarını da sayfaya entegre ettirebiliriz. Bu alanı kullandığımızda eklenti kurulum aşamasında kullanıcılara “bu eklenti web.whatsapp sitesindeki yazıları görüntüleyebilir ve değiştirebilir” diye yetki sorusu sorar. Onaylamak kullanıcıların taktiridir.
- Linux Sözlüğü eklentisinin manifes.json dosyasında content_scripts alanı yok. Bunun sebebi bu eklenti kullanıcıların gezdiği sayfalarla ilgilenmiyor ve erişim sağlamıyor.
- Web Whatsapp Dark eklentisinin manifest.json dosyasında da default_popup alanı yok. Bunun sebebi ise bu eklentiye tıklanıldığında herhangi bir işlem gerçekleşmiyor. Yüklediğiniz andan itibaren tek yaptığı işlem, web.whatsapp sayfasına girildiğinde styles.css dosyasını o sayfaya entegre etmesi.
İçerikler
Web Whatsapp Dark için styles.css içeriğini kendi hayalinize göre dizayn edebilirsiniz. Kodlara important koymayı unutmayınız çünkü hali hazırda olan siteye yeni css ekliyoruz ve adamların yazdığı css’i ezmeniz gerekiyor. Eğer tema yapacaksanız kendinize 3 renk belirleyip elementleri tek tek değiştirmenizi öneririm. styles.css içeriğini web.whatsapp sitesindeki elementleri ve classları referans alınarak düzenledik:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 |
body { background-color:#111111 !important; background-image: linear-gradient(to bottom, #4b4b4b, #4b4b4b) !important; color: rgb(255,255,255) !important; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ color: rgb(255,255,255) !important; } html[dir=ltr] ._3AwwN { background-color: rgb(35,35,35) !important; } html[dir=ltr] ._3qlW9 { background-color: rgb(35,35,35) !important; } html[dir] ._3auIg { background-color: #eeeeee !important; padding: 10px 16px !important; } ._1wjpf{ color:white !important; } [data-asset-intro-image] { background-image: none !important; } html[dir] ._3auIg { background-color: rgb(35,35,35) !important; } html[dir] .gQzdc { background-color: rgba(0, 0, 0, 0.6) !important; } html[dir] ._3YewW { background-color: #646464 !important; } html[dir] ._1WliW { background-color: #a4a4a4 !important; } html[dir] ._1NrpZ { background-color: #646464 !important; } .U0cj3 { color: #efefef !important; } html[dir] ._2EXPL._1f1zm { background-color: #a4a4a4 !important; } html[dir] ._2EXPL { background-color: #a4a4a4 !important; } ._3zJZ2 { background-color: #262626c2 !important; } .tail.message-out .tail-container{ display:none !important; } .tail.message-in .tail-container{ display:none !important; } html[dir=ltr] .Tkt2p { padding: 6px 7px 8px 9px !important; background-color: #a4a4a4 !important; border-radius:5px !important; } html[dir=ltr] ._3F6QL._2WovP ._2S1VP { padding-right: 2px !important; border-left: 0.1px solid transparent !important; color: #353535 !important; } html[dir] ._2jVLL { background-color: rgb(35, 35, 35) !important; } html[dir] ._3oju3 { background-color: #232323 !important; } .message-out { background-color: #232323 !important; } .message-in { background-color: #232323 !important; float: left !important; } html[dir=ltr] ._1i1U7._2DNgV { background: linear-gradient(to right, rgba(220, 248, 198, 0) 0%, #a4a4a4 50%) !important; } html[dir=rtl] ._1i1U7.jZ4tp { background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #a4a4a4 50%) !important; } html[dir] ._2EXPL:hover { background-color: #646464 !important; } html[dir=ltr] ._2uLFU, html[dir=ltr] ._1ArIP { background-color: #232323!important; } .message-system{ background-color:#353535 !important;} .L89LI{ background-color:#353535 !important;} html[dir=ltr] ._28zBA._14ou2:hover{ background-color:#545250 !important; } html[dir] ._1AKfk { background-color: #232323!important; } html[dir=ltr] ._1CSx9 { background-color: #646464!important; } html[dir] ._1OnaQ { background-color: #646464!important; } html[dir=ltr] ._1FroB { background-color: #646464!important; } html[dir] ._1jJLh { background-color: #232323 !important; } html[dir=ltr] ._34vig { background-color: #232323!important; } html[dir=ltr] ._3cyFx { background-color: #a4a4a4!important; border-radius: 5px!important; } html[dir] ._1CkkN { background-color: #232323!important; } html[dir] ._2vsnU { background-color: #232323 !important; } html[dir] .AfVTG { background-color: #232323!important; } ._2sNbV { background-color: #232323!important; } html[dir] ._1lIXT { background-color: #646464 !important; } html[dir] .gQzdc._3sdhb .jN-F5 { color: #fff !important; } html[dir] ._1CnF3 { background-color: #232323!important; } .status-icon { background-color: #646464!important; border-radius: 5px!important; } |
Linux Sözlüğü eklentisi gibi bir popup çıkmasını istiyorsanız da index.html içeriğine istediğiniz sayfayı hazıylayıp head aralığına popup boyutunu belirten kodları yazmanız yeterlidir. Artık yazdığınız tüm html sayfalarını eklenti olarak kullanabilirsiniz. Aşağıda yazılan kodları index.html içine yapıştırırsanız sitemizin eklentisini yapmış olursunuz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <title></title> <style> html, body { width:650px; height:450px; max-width: 100%; overflow-x: hidden; } </style> <script> window.location.href='https://kodblogum.com/'; </script> </head> <body> </body> </html> |
Geliştirici Modu
Eklenti Yapımı nda en önemli şey eklentileri tarayıcıların geliştirici modunu aktifleştirerek test etmektir. Yok ben sadece kendim için yaptım deyip yayınlamadan da sadece siz kullanabilirsiniz.
Google Chrome için geliştirici modu
- Arama çubuğuna “chrome://extensions/” yazıp eklentilerin yüklü olduğu sayfayı açın.
- Sağ üst köşede “Geliştirici Modu” seçeneğini aktifleştirin.
- “Paketlenmemiş Öğe Yükle” butonuna tıklayıp, uzantı klasörünüzü seçin ve yükleyin.
Mozilla Firefox için geliştirici modu
- Arama çubuğuna “about:debugging” yazıp eklenti debug sayfasını açın.
- “Enable add-on debugging” seçeneğini aktifleştirin
- “Load Temporary Add-on” butonuna tıklayıp, uzantı klasörünüzü seçin ve yükleyin.
Opera için geliştirici modu
- Opera tarayıcı açıkken “ctrl+shift+e” tuşuna basın yada Menü > Eklentiler > Eklentiler seçeneğini seçin.
- “Geliştirici Modu” butonuna tıklayın.
- “Paketlenmemiş Eklenti Yükle” butonuna tıklayıp, uzantı klasörünüzü seçin ve yükleyin.
Eklenti Yayınlama
Eklentilerimizi yayınlamak için eklenti klasörümüzü zip uzantısı ile sıkıştırıyoruz. zip halin de mağazalara gönderip içeriklerini girdikten sonra uygulamamız incelenecek, uygun görülürse yayınlanacaktır.
*Chrome için klasörün dışına çıkıp klasörü zipleyiniz. Firefox ve Opera için klasörün içine girip içindeki dosyaları zipleyiniz.
Google Chrome İçin Eklenti Yayınlama
- https://chrome.google.com/webstore/developer/dashboard adresine google hesabı ile bağlanıp giriniz.
- “Geliştirici Hesabınız” bölümündeki alanları doldurunuz.
- “Yeni Öge Ekle” butonuna basıp zip dosyanızı seçiniz ve yükleyiniz.
- Eklentinizin mağazada nasıl görüneceğine dair ayarları, dil ayarları, detaylı açıklama, ekran görüntüleri, tanıtım kutucuğu resimleri, simge vb. alanları doldurunuz.
- En alttaki “Değişiklikleri Önizle” butonu ile kontrolünü yaptıktan sonra “Değişiklikleri Yayınla” butonuna basarak onaylanmasını bekleyiniz.
- Onay süreci 2-3 gün sürmektedir.
Mozilla Firefox İçin Eklenti Yayınlama
- https://addons.mozilla.org/en-US/firefox/ adresine girip hesabınız varsa login yoksa register ile kayıt olunuz.
- Hesabınız ile giriş yaptıktan sonra sağ üstte isminizin üzerine gelin.
- Açılan pencerede “Submit a New Add-on” butonuna tıklayınız.
- “On this site” seçeneği seçili iken “Continue” .
- Zip dosyanızı seçiniz ve yükleyiniz.
- Bilgileri doldurduktan sonra “Submit Version” yapıp “My Add-ons” bölümüne geri dönün.
- Yüklediğiniz eklentiyi seçip, ekran görüntüleri, iconlar, açıklamalar, kategori ve dil ayarlarını düzenleyiniz.
- Onay süreci 2-3 saat sürmektedir.
Opera İçin Eklenti Yayınlanma
- https://addons.opera.com/tr/ adresine giriniz.
- “Oturum Aç” butonundan hesabınız yoksa üye olun, varsa giriş yapın.
- Giriş yaptıktan sonra “Geliştir” butonuna basın.
- “Upload new add-on” butonuna basıp zip olarak eklentinizi yükleyiniz.
- Yüklediğiniz eklentiye My Add-ons kısmından seçiniz ve içine giriniz.
- “Versions” sekmesine geçerek en alttaki yüklenme tarihi yazan versiona tıklayınız.
- “General”, “Media” ve “Translation” kısımlarını düzenleyiniz.
- Düzenleme işlemleri bittikten sonra “Stats” sekmesinden eklenti durumunu izleyebilirsiniz. Yayınlanma süreci değişkendir.
NOT: Her eklentinin yayınlanmasını kendi tarayıcısı üzerinden yapmayı unutmayın.
Tarayıcılar için Eklenti Yapımı adlı yazımızın sonuna geldik. HTML, CSS ve JSON bildiğiniz varsayılarak anlatıldı. Umarım faydalı olmuştur.
Kodla Kalın!
Bilgiler için teşekkür ederim.
Faydalı olduysa ne mutlu 🙂
tarayıcı eklentisi yapmak ile ilgili başka konunuz yok mu?
Şuan için yok. Ama tarayıcı eklentileri ile bir site için bot yapımı hakkında bir yazı yazılacak.
Bu harika olur. Bir de, benim gibi yazılımda zayıf olanlar için detaylı anlatım olursa çok iyi olur. Teşekkürler.
hocam instagram oto takip ve takipten çıkmak için bot yapsanız ama google eklenti olarak yardımcı olur möusunuz
Fatih bey, selamlar.
Hocam özel bir eklenti yaptırmak istiyorum. Ücret konusunda anlaşabileceğimize inanıyorum yardımcı olur musunuz.