“Günümüzdeki hayatımızda, sosyal medya uygulamalarını ve Google Arama motorunu eğlence ve arama amaçlarımız için kullanmaya, yani “Google” arama motoru aracılığıyla bazı eğitim konularını araştırmak ve genel bilgi edinmek için daha istekliyiz. Bir şeyi aramak için Google arama motorunu kullanmak için, cep telefonlarımızda, dizüstü bilgisayarlarımızda veya kişisel bilgisayarlarımızda halihazırda yüklü bir tarayıcı olmalıdır. Günümüz yüzyılın en çok kullanılan ve verimli tarayıcılarından biri, birçok iyi işlevin yanı sıra eklenti özelliği ile karşımıza çıkan “Google Chrome” tarayıcısıdır. 'Uzantı', web sitelerini ve farklı işlevleri kısıtlamak veya bunlara izin vermek için herhangi bir tarayıcıda bulunan eklentidir. Bu uzantılar genellikle yerleşik olarak gelmez; her uzantıyı gerektiğinde tarayıcınıza ayrı ayrı eklemeniz gerekir. Teknolojide biraz uzmansanız, birkaç adımda bir uzantı oluşturmak ve eklemek için manifest JSON dosyalarının kullanımını biliyor olabilirsiniz. Bu nedenle, bu makale Google Chrome tarayıcısında yeni bir uzantı oluşturmak için tüm bu adımları kapsayacaktır.
Bir uzantı oluşturma yöntemine bakmadan önce, Google Chrome tarayıcınızın zaten başlatıldığından ve “Google” Arama Motorunun herhangi bir arka plan içermediğinden emin olmanız gerekir. Aşağıda ekli resmin, 'Google.com' arama motoru için arka planı olmadığını, yani yalnızca beyaz arka planı olmadığını görebilirsiniz.
Uzantı Klasörü Ekle
Visual Studio Code aracınızı Windows sisteminizin uygulamalarından hızla açın. Visual Studio Code'un düzgün bir şekilde açılması ve kullanımımız için etkinleştirilmesi 1 dakika kadar sürebilir. Düzgün bir şekilde başlatılıp kullanıma hazır hale geldikten sonra, aşağıda gösterilen üst görev çubuğundaki “Dosya” menü listesi aracılığıyla önceden oluşturulmuş “Uzantı” klasörünü ekledik. “Uzantı” klasörünü oluşturduktan sonra, tarayıcıda uzantı için simge olarak kullanılacak görüntüleri içeren “görüntü” adlı başka bir klasör ekledik. Bununla birlikte yeni bir uzantı oluşturup tarayıcıya eklemek için bir adet “manifest.json” dosyası ve “script.js” adlı bir javascript dosyası ekledik. “Google”ın arka planını değiştirmek için bir uzantı oluşturmak ve kullanmak üzere JSON'da çalışmaya başlamak için üzerine çift tıklayarak manifest.json dosyasından başlayalım.
Manifest Dosyası Oluştur
Manifest.json dosyasına aşağıda gösterilen “JSON” kodunu eklemelisiniz. Bu kod, Google Chrome Tarayıcımıza bir uzantı oluşturmak ve eklemek için gerçek yapılandırma komut dosyasıdır. Bu JSON kodu, değişken manifest sürümünün '2' olarak başlatılması ve oluşturulacak bir uzantının adı, yani 'Arka Planı Değiştir' ile başlatılmıştır. Daha sonra “description” değişkeninin içine uzantımızın kısa açıklamasını ekledik.
Bununla birlikte bir uzantının sürümünü “1.0” olarak ekledik. 'Uzantı' için tüm temel yapılandırmalar oluşturulduktan sonra, uzantılar için bir simge olarak kullanılacak resim simgesinin yolunu eklememiz gerekiyor. 'Tarayıcı' değişkeni, Google Chrome tarayıcısının üst görev çubuğu için uzantı simgesini ayarlamak için tanımlanmıştır, yani, belirli veya tüm siteler için gelecekte kullanım için etkinleştirildikten sonra tüm uzantıların görüntülendiği yer. Bundan sonra, tarayıcının her seferinde farklı dosyalar kullanabilmesi için farklı boyutlarda üç resim dosyasının yolunu ekledik.
Bununla birlikte, Google Chrome'un üst görev çubuğundan 'uzantılar' simgesine tıkladıktan sonra hangi görüntünün görüntüleneceğini göstermek için 'page_action' değişkeni kullanılmıştır. Her yeniden yüklemede simgeler olarak kullanılacak görüntüler için üç farklı yol değeri ile birlikte 'Default_icon' değişkeni içinde kullanılmıştır. Bu amaçla üç farklı görüntü dosyası kullanılmıştır. Son content_scripts değişkeni, içinde toplam 2 yeni değişken, yani eşleşmeler ve CSS alır. 'Eşleşmeler' değişkeni, bu yeni uzantının kullanımı oluşturulduktan sonra değiştirilecek web sitesinin yolunu içerir. Bununla birlikte, 'CSS' değişkeni, uzantı için başvurduktan sonra Google.com'un stili için kullanılacak bir CSS dosyasının adını, yani uzantı etkinleştirildiğinde her yeniden yüklemeden sonra Google.com'un stilini içerir. Artık bu kod eksiksiz ve kullanıma hazır olduğuna göre, hemen kaydedin ve “main.css” dosyasına gidin.
main.css CSS dosyası içinde, oluşturulacak manifest dosya uzantımız için stil ekledik. Stil, html “gövde” etiketi kullanılarak, yani manifest dosyasının tam “gövde” alanına uygulanacak şekilde uygulanacaktır. Arama motorundan bir resim dosyasının “URL”sini kullanarak Google.com için yeni arka planı ayarlıyoruz. Şimdi, her şeyden önce kodunuzu kaydedin.
Manifest.json ve main.css dosyası gibi gerekli kodları tamamladıktan sonra, yeni sekmede chrome://extensions URL'si üzerinden Google Chrome tarayıcısında Extensions yardımcı programını açmamız gerekiyor. Uzantılar yardımcı programı alanı açılır. Geliştirici modundan, aşağıdaki resimde gösterilen 'paketlenmemiş yükle' düğmesi aracılığıyla bir uzantı yapmak için yerel sisteminizden paketlenmemiş 'Uzantı' klasörünü yüklemeniz gerekir. Uzantı, gösterildiği gibi Chrome tarayıcısına etkili bir şekilde eklendi. Tam olarak çalışması için hataları kaldırın.
“Uzantı” simgesinden, görev çubuğunda görüntülemek için “Arka Planı Değiştir” uzantısını, yani “C” simgesi uzantısını seçin.
Google.com'u yeniden yükledikten sonra, bu uzantı kullanılarak arka planı güncellendi.
Çözüm
Windows sisteminde tarayıcı kullanmanın açıklamasından başlayarak, herhangi bir tarayıcıda uzantıların önemini de tartıştık. Uzantıların kısa açıklamasından sonra, Google Chrome tarayıcısı için bir uzantı oluşturmak için manifest JSON dosyasını kullanma yöntemini ve “Google.com” arama motoru için arka plan değişikliği için nasıl kullanılacağını açıkladık. Uzantıyı Google chrome'a yükledikten sonra, arka planını değiştirmek için Google.com'da kullanıyoruz.