Chrome Web Uzantısı - Önceden Kodlama Deneyimi Gerekmez: 6 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:17

Chrome Uzantıları, kullanıcıların tarama deneyimini geliştirmek için oluşturulmuş küçük programlardır. Krom uzantıları hakkında daha fazla bilgi için https://developer.chrome.com/extensions adresine gidin.

Bir Chrome Web Uzantısı yapmak için kodlama gereklidir, bu nedenle aşağıdaki web sitesinde HTML, JavaScript ve CSS'yi incelemek çok yararlıdır:

www.w3schools.com/default.asp (w3 okulları kodlama kaynakları için iyi bir web sitesidir)

Nasıl kodlanacağını bilmiyor musun? Endişelenmeyin, bu eğitim size yol göstermenize yardımcı olacaktır.

Chrome Uzantıları ile ilgili en iyi şey, özelleştirilebilmeleridir. Yapılabilecek sadece belirli bir şey değil, bu yüzden yaratıcı olun.

Gereçler

İhtiyaç duyulan sarf malzemeleri aşağıdadır:

• Metin düzenleyicili bir bilgisayar (Not Defteri kullanıyorum)
• Google Chrome

Ve hepsi bu!

Adım 1: Dizini Oluşturun

İlk olarak, tüm dosyaların tutulacağı bir klasör oluşturun ve buna 'uzantı' adını verin. İsim daha sonra istenirse değiştirilebilir.

Adım 2: Manifest Dosyasını Oluşturun ve Kodlayın

Bildirim dosyası, uzantının çok önemli bir parçasıdır. Uzantıya tam olarak ne yapması ve olması gerektiğini söyler. Manifest dosyaları JSON'da biçimlendirilir. İlk adım, bir metin düzenleyici açmak ve yeni bir dosyayı 'manifest.json' olarak kaydetmektir.

Ardından aşağıdaki betiği yazın:

{

"name": "İlk Uzantı", "versiyon": "1.0", "açıklama": "Bir uzantı kodlayabilirim", "manifest_version": 2, "browser_action": { "default_title": "İlk Uzantı" } }

Değerlerden sonra virgülleri unutmayın!

Bu yazıldıktan sonra manifest dosyasını kaydedin ve chrome://extensions'a gidin (bunun için tarayıcı olarak Chrome kullanılmalıdır). chrome://extensions'a geldikten sonra geliştirici modunu açın. Bundan sonra, 'Paketlenmemiş yükle' düğmesine basın ve 'uzantı' klasörünü seçin.

davul rulo lütfen…

Yay! Bu bir uzantı, ama biraz sıkıcı. Şu anda tam anlamıyla hiçbir şey yapmıyor, ancak yakında süper havalı olacak.

Adım 3: Simgeleri Oluşturun ve Manifest'i Güncelleyin

Simge çizmek için iyi çalışan bir web sitesi https://www.piskelapp.com/'dur. Kullanılabilecek başka çizim programları da vardır. Simgeler kare olmalıdır. Bu proje 16x16, 32x32, 48x48 ve 128x128 simgeleri kullanacak. Simge yapıldıktan sonra, uzantı klasöründe 'images' adlı bir klasör oluşturun ve simgeyi o klasöre koyun. Bir resmi boyutuna göre adlandırmak iyi bir fikir olabilir. Örneğin, 'icon32.png'. Yeni kod aşağıdadır:

{

"name": "İlk Uzantı", "versiyon": "1.0", "açıklama": "Bir uzantı kodlayabilirim", "manifest_version": 2, "browser_action": { "default_title": "İlk Uzantı", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128.png " } } }

Bildirim koduna ilişkin referans için https://developer.chrome.com/extensions/manifest adresine gidin.

4. Adım: Bir Pop-up Ekleyin

Bu uzantı bir açılır pencereye sahip olacak. Açılır pencere bir HTML(Köprü Metni İşaretleme Dili) dosyasıdır, bu nedenle önce HTML, CSS ve JavaScript'in temellerini öğrenmek iyidir.

İlk olarak, bir belgeyi uzantı klasörüne ' popup.html ' dosyası olarak kaydedin.

Ardından, manifest dosyasını, tıklandığında ' popup.html ' gösterecek şekilde düzenleyin. Yeni kod aşağıdadır:

{

"name": "İlk Uzantı", "versiyon": "1.0", "açıklama": "Bir uzantı kodlayabilirim", "manifest_version": 2, "browser_action": { "default_title": "İlk Uzantı", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128.png " }, "default_popup": "popup.html" } }

Virgülü unutma!

Şimdi, aşağıdaki HTML kodu popup.html'ye eklenirse, tıklandığında 'Merhaba Dünya' gösterecektir.

Selam Dünya

Adım 5: İyi Görünmesini Sağlayın ve Etkileşimli Hale Getirin

Temel bir HTML satırı yazılırsa, minimum düzeyde yapılır. CSS (Basamaklı Stil Sayfaları) eklenirse daha havalı görünür ve JavaScript eklenirse daha etkileşimli olabilir. Bu öğretici HTML, JavaScript ve CSS'yi açıklayan ayrıntılara girmeyecek, ancak çevrimiçi olarak çok sayıda kaynak var. Aşağıda basit 'Merhaba Dünya' programının kodu, ardından sırasıyla daha renkli programın kodu:

Selam Dünya

Selam Dünya

#merhaba{ arka plan rengi: #000000; renk: #ff0000; sınır: 8px başlangıç #86a3b2; sınır yarıçapı: 50 piksel; dönüştürmek: döndürmek(57deg); dolgu: 10 piksel; kullanıcı seçimi: yok; imleç: artı işareti; geçiş: 2s dönüştürmek; } #hello:hover {dönüştür: döndür(-417deg); }

Bu ikinci örnek, yeni başlayanlar için çok kafa karıştırıcı olabilir. Ama bu size CSS'nin bir program/uzantı için ne kadar önemli olduğunu göstermek içindi. Şimdi biraz ara vermek ve biraz HTML5 kodlaması öğrenmek ve bazı referanslar için developer.chrome.com'u kullanmak için iyi bir zaman. Biraz zaman alabilir, ancak harika bir uzatma yapılabilir.

6. Adım: Chrome Web Mağazasında Yayınlama

Biri gerçekten harika bir uzantı yaptıysa ve bunu dünyayla paylaşmak isterse, yayınlayabilir. Sonuçta, bir uzantının noktası budur. Bu eğitim sadece manifest dosyasını ve onu nasıl kullanabileceğinizi açıklamaya çalıştı ve sadece bir 'Merhaba Dünya' programı vardı.

Bir uzantıyı herkese açık hale getirmek için yapılacak ilk şey, uzantı klasörünü bir zip dosyasına dönüştürmektir. Yapılacak ikinci şey, https://chrome.google.com/webstore/category/extensions adresine gidip bir google hesabına giriş yapmaktır. Ardından, ayarlar dişli düğmesine tıklayın ve ardından 'geliştirici panosuna' tıklayın. Zip dosyasını yüklemek için 'Yeni Öğe' düğmesine basın. Bir kez orada, Mağaza Girişi, Gizlilik ve Fiyatlandırmayı düzenlemek gerekir. Bir uzantı, inceleme için gönderilirse kolayca yayınlanabilir.

Uzantı bittiğine göre artık kodlamaya devam edin!