Chrome uzantısı nasıl oluşturulur

Bu günlerde her şey için bir uzantı var gibi görünse de, belirli bir amaç veya ihtiyaç için bir tarayıcı uzantısı bulmak için mücadele etmek imkansız değil. Bir tane inşa etmek ne kadar karmaşık? Aşağıda, bir Chrome uzantısının nasıl oluşturulacağına ilişkin adım adım bir kılavuz bulacaksınız:

Adım 1: Gereksinimler

Başlamadan önce iki not:

• Bu çoğu kişiye açık görünse de, uzantınızı Google Chrome'un kendisinde oluşturmanız önemlidir.
• Bu süreçte ilerlerken çalışmanızı test edin. Gittikçe kodlama hatalarını düzeltmek, bitirdikten sonra geri dönmekten daha kolaydır.

Başlamadan önce, uzantının işlevine karar vermeniz gerekecektir. Hangi amaca hizmet edecek? Kitlenizin ilgi alanlarına ve sorunlarına odaklanın, böylece ne tür bir çözüm sunabileceğinizi net bir şekilde tanımlayabilirsiniz.

Bunu hallettikten sonra tasarımı kontrol edin. Google Chrome mağazasına yüklenen her uzantı bir simge gerektirir. Kendiniz oluşturabilir veya tasarımı dışarıdan temin edebilirsiniz. Simgenizi aldıktan sonra uzantınızı oluşturmaya başlayabilirsiniz.

Adım 2: Yapı Taşları

Her yazılım parçası gibi, uzantı da birkaç dosyadan oluşacaktır. Bu nedenle, yapmanız gereken ilk şey , tüm uzantı dosyalarınızı barındıracak bir dizin oluşturmaktır.

Dizin , bilgisayarınızda dosyaları depolamak için bir konumdur. MS-DOS, OS/2 veya Linux gibi hiyerarşik dosya yapısına sahip herhangi bir işletim sisteminin bir dosya dizini vardır.

Neden bir dizine ihtiyacınız var? Böylece Chrome, uzantınızı yüklerken dosyaları doğru klasörden çekebilirsiniz.

manifest.json dosyası

Ardından, uzantınızın manifest dosyasını oluşturmanız gerekir.

Bildirim, işletim sistemine bir programın nasıl başlatılacağını bildiren bir dosyadır . Bir bildirim dosyasındaki ayarlar her zaman XML dili kullanılarak belirtilir. Bildirimler genellikle ayrıcalıklar gibi ayarları eklemek için kullanılır, işletim sistemine programın hangi DLL sürümünü kullanacağını bildirir.

Uzantınız olması durumunda, bildirim dosyası Chrome'a ​​uzantıyı yükleme talimatlarını verecektir.

Manifest dosyanızı oluşturma

Chrome'da manifest.json adında bir dosya oluşturun ve onu dizininize ekleyin. Bildirim dosyanıza ihtiyacınız olan kodu ekleyin. Ardından aşağıdaki kodu ekleyin:

{

“name”: “Başlarken Örneği”,

"description": "Bir Uzantı Oluşturun!",

"sürüm": "1.0",

"manifest_version": 3

}

Uzantının izinleri, uzantı işlevine bağlıdır. Tüm izinlerin ve anlamlarının bir listesini Chrome uzantı belgelerinde bulabilirsiniz.

Açılır Sayfa

Sitenizin bir açılır pencereye ihtiyacı varsa, onu kodunuza eklemelisiniz.

1. Bildirim dosyasında browser_action dosyanın adını atayın.
2. Açılır sayfayı HTML veya CSS ile oluşturun. SVG ile resim ekleyebilirsiniz.
3. Açılır pencereye işlevsellik eklemek için JavaScript kullanın. JavaScript dosyasını belirleyin ve onu açılır pencere dosyanıza bağlayın. Örneğin:
4. İşlevsellik oluşturabilir ve açılır DOM'ye erişebilirsiniz. İşte nasıl yapılacağına bir örnek.

document.addEventListener(“DOMContentLoaded”, () => {

var düğmesi = document.getElementById(“gönder”)

button.addEventListener(“tık”, (e) => {

konsol.log(e)

})

})

içerik komut dosyası

content_script bölümü, uzantının nerede çalışması gerektiğini tanımlar. Uzantının tüm sitelerde çalışmasını istiyorsanız şunu yazmalısınız:

"içerik_komut dosyaları": [

{

"eşleşir": ["<all_urls>"],

“css”: [“background.css”],

“js”: [“background.js”]

}

],

Uzantının örneğin Facebook gibi tek bir sitede çalışmasını istiyorsanız, [“https://facebook.com/*”] eklemelisiniz.

Etkinlikler sayfası

Olay, ilginç bir şey olduğunda haberdar olmanızı sağlayan bir nesnedir. Örneğin, bir alarm zamanı geldiğinde bilgilendirilmek için chrome.alarms.onAlarm olayını kullanabilirsiniz.

chrome.alarms.onAlarm.addListener(işlev(alarm) {

appendToLog('alarms.onAlarm –'

+ ' isim: ' + alarm.name

+ ' planlanmışZaman: ' + alarm.scheduledTime);

});

Etkinlik sayfaları hakkında daha fazla bilgiyi Chrome belgelerinde bulabilirsiniz.

Content.js

İçerik komut dosyaları, tarayıcı uzantılarının parçası olan JavaScript dosyalarıdır. İçerik komut dosyalarının normal javascript'ten daha fazla ayrıcalığı vardır.

3. Adım: Chrome uzantısı açılır penceresinden bir açılır HTML dosyası açın

Yerel chrome uzantınıza bir düğme yerleştirirseniz, bu düğmeye tıkladığınızda farklı içerikte başka bir HTML açılır penceresi oluşturabilirsiniz. İşte StackOverflow ile ilgili bir örnek:

manifest.json:

{

"ad": "Hile Sayfaları",

"açıklama": "hile sayfası uzantısı",

"sürüm": "1.0",

"manifest_version": 3,

"arka fon": {

"service_worker": "background.js"

},

“izinler”: [“depolama”, “activeTab”, “komut dosyası”,”sekmeler”],

"eylem": {

"default_popup": "popup.html",

"default_icon": {

“16”: “/images/get_started16.png”,

“32”: “/images/get_started32.png”,

“48”: “/images/get_started48.png”,

“128”: “/images/get_started128.png”

}

},

"simgeler": {

“16”: “/images/get_started16.png”,

“32”: “/images/get_started32.png”,

“48”: “/images/get_started48.png”,

“128”: “/images/get_started128.png”

}

}

Popup.html:

<!DOCTYPE html>

<html>

<kafa>

<link rel="stylesheet" href="style.css">

</head>

<body>

<button id=”git_Sheet”>git sayfası</button>

<script src="popup.js"></script>

</body>

</html>

Ve popup.js dosyası:

izin ver gitSheet = document.getElementById(“git_Sheet”); gitSheet.addEventListener(“tıkla”, zaman uyumsuz () => { izin ver

= bekle chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ hedef: { tabId: tab.id }, işlev: ShowGitSheet, }); }); function ShowGitSheet() { chrome.browserAction.openPopup({ açılır pencere: “git_popup.html” }); }

İpucu: uzantınızı firefox'tan başka bir tarayıcının çalıştırmasını istiyorsanız chrome.browserAction.openPopup yerine chrome.windows.create({url: '…', yazın: 'popup'}) kullanın.

4. Adım: Uzantınızı Chrome'a ​​Yükledikten Sonra Hataları Kontrol Edin

Oluşturma aşamasını tamamladığınızda, Chrome'un çalıştırdığından emin olmak için uzantıyı test etme zamanı gelmiştir. Uzantınızı yüklemek ve hata ayıklamaya başlamak için şu adımları izleyin:

• Google Chrome tarayıcınızda chrome://extensions'ı açın.
• Sağ üst köşedeki Geliştirici kutusunu işaretleyerek geliştirici modunu ayarlayın.
• "Paketlenmemiş uzantıyı yükle"yi tıkladığınızda dosyanızı seçme seçeneğiyle birlikte göreceksiniz.
• Uzantınız geçerliyse, onu seçtiğinizde hemen yüklenmelidir.
• Geçersiz ise, bir hata mesajı göreceksiniz.

Kod yazarken en sık yapılan hatalar sözdizimi hatalarıdır. Bu nedenle, yapılacak ilk şey, tüm virgüllerin ve parantezlerin doğru yerde ve doğru biçimde olduğunu tekrar kontrol etmektir.

Ardından, çalıştığını görebilmek için "etkin" kutusunu işaretlediğinizden emin olun.

Adım 5: Eyleme mantık ekleyin.

İyi bir temel kural, API çağrılarını arka plan komut dosyasına ve DOM manipülasyonunu içerik komut dosyasına yerleştirmektir. Bir arka plan komut dosyası ekleme örneğini görelim:

1. Uzantılar dizini içinde background.js adlı dosyayı oluşturun
2. Arka plan komut dosyasını bildirime kaydedin

{

“name”: “Başlarken Örneği”,

"description": "Bir Uzantı Oluşturun!",

"sürüm": "1.0",

"manifest_version": 3,

"arka fon": {

"service_worker": "background.js"

}

}

Chrome, uzantıyı yeniden yüklediğinizde, olaylar gibi ek talimatlar için dosyayı tarayabilir.

1. Komut dosyasını ekleyin. Uzantınızın amacına göre farklı olacaktır.

Uzantınızın yüklendiğinde bilgi almasına yardımcı olmak için, arka plan komut dosyasına runtime.onInstalled için bir dinleme olayı eklemelisiniz. Ardından, onInstalled dinleyicisi, depolama API'sini kullanarak bir değer atar, böylece uzantı bileşenleri değere erişebilir ve onu güncelleyebilir.

// arkaplan.js

let color = '#3aa757';

chrome.runtime.onInstalled.addListener(() => {

chrome.storage.sync.set({ color });

console.log('Varsayılan arka plan rengi %cgreen olarak ayarlanmıştır', `color: ${color}`);

});

Google Chrome geliştirici sitesinde sonraki adımlar hakkında daha fazla bilgi edinin. Bu, kullanıcı arayüzünüzü ve simgenizi nasıl oluşturacağınızı ve kullanıcı etkileşimini geliştirmek için bazı katman mantığı oluşturmayı içerir.

Her zamanki gibi, arayüzünüzü tasarlamaya başlamak için bildirim dosyanıza bir tarayıcı eylemi kaydetmeniz gerekir. Örneğin, bir açılır pencere kullanıyorsanız, kod şöyle görünebilir:

<!DOCTYPE html>

<html>

<kafa>

<link rel="stylesheet" href="button.css">

</head>

<body>

<button id="changeColor"></button>

</body>

</html>

Bir simgenin gereksinimleri nelerdir? Resimler için, 16×16 ve 32×32 piksel. Tüm simgeler kare olmalıdır.

Uzantınızın ne yapacağını bilmesi için mantık komut dosyalarınızı eklemeyi unutmayın. Örneğin, onu popup.js betiğinin sonuna ekleyebilirsiniz.

// Butona tıklandığında setPageBackgroundColor'u mevcut sayfaya enjekte edin

changeColor.addEventListener(“tıkla”, zaman uyumsuz () => {

İzin Vermek

= bekle chrome.tabs.query({ active: true, currentWindow: true });

chrome.scripting.executeScript({

hedef: { tabId: tab.id },

işlev: setPageBackgroundColor,

});

});

// Bu işlevin gövdesi, içinde bir içerik komut dosyası olarak yürütülecektir.

// geçerli sayfa

function setPageBackgroundColor() {

chrome.storage.sync.get(“renk”, ({ renk }) => {

document.body.style.backgroundColor = renk;

});

}

function setPageBackgroundColor() {

chrome.storage.sync.get(“renk”, ({ renk }) => {

document.body.style.backgroundColor = renk;

});

6. Adım: Uzantınızı Deneyin

Bir sonraki adım, mantıksal olarak, uzantıyı sürekli olarak test etmektir, böylece her şeyin olması gerektiği gibi çalıştığından emin olabilirsiniz. Testi dışarıdan yaptırıyorsanız, arayüzün ne kadar sezgisel olduğunu kontrol etme fırsatını yakalayın. Test sonuçlarına göre komut dosyalarınızı ayarlayın, ardından tekrar test edin.

7. Adım: Uzantınızı Chrome Web Mağazası'na gönderin

Uzantınızdan memnun kaldığınızda, Chrome web mağazasına gidebilir ve gönderebilirsiniz.

Chrome geliştirici mağazasında, Yeni öğe 'yi tıklayın, ardından proje dosyasını yükleyiciye bırakın.

Chrome, izinleri ve neden gerekli oldukları hakkında bilgi istemek için bazı sorular soracaktır.

Google Chrome uzantı örnekleri

Her şeyin bir uzantısı var gibi görünüyor. İşte en kullanışlılarından bazıları:

• Drive'a Kaydet
  Bu uzantı, tarayıcının üstüne küçük bir simge yükler. Göz attığınız her şeyi sürücü hesabınıza gönderir, böylece daha sonra bakabilirsiniz. Ekran görüntüsü alarak, görüntü, ses veya video kaydederek çalışır.
• sıralama
  Bu eklenti, kullanıcılara gelen kutularını düzenlemenin ve onlar için en önemli olan şeylere öncelik vermenin bir yolunu sunar. Gmail ile bütünleşir ve iletileri özel sütunlara sürükleyip bırakmanıza olanak tanır.
• her yerde HTTPS
  Bu uzantı, herhangi bir web sitesini http'den güvenli HTTPS'ye değiştirerek taramanızın güvenliğini artırır, bu nedenle şifreli ve güvenlidir.
• kurabiyeler umurumda değil
  Çerezleri kabul etmenizi isteyen her web sitesi ile bu uzantı bir cankurtarandır. Çok fazla görünmeyebilir, ancak çerez açılır pencerelerinde kabul et düğmesine basacaktır. Size zaman kazandıracak ve üretkenliğinizi hızlandıracaktır.
• Hız testi
  
  Bu kullanışlı uzantı, hareket halindeyken bağlantı hızınızı kontrol etmenizi sağlar. Bir masaüstü ve mobil sürümle, büyük bir eki indirmeden veya bir video akışı yapmadan önce bağlantınızın en iyi durumda olduğundan emin olabilirsiniz.
  Tek tıklama ile Speedtest, kullandığınız ağ üzerinde hızlı bir bağlantı testi gerçekleştirir.

Chrome uzantınız ne yapabilir?

Özel olarak oluşturulmuş uzantılar, tek bir görevi gerçekleştiren yazılım programlarıdır. Bununla birlikte, birden fazla işlevsellik dahil edebilirsiniz, ancak her şeyin aynı amaca ulaşmak için çalışması gerektiğini unutmayın.

Bir Chrome uzantısı, sayfa işlemlerini veya tarayıcı işlemlerini kullanarak çalışır:

Sayfa eylemi : Bu, belirli sayfalara özel bir eylemdir.

Tarayıcı eylemi : hangi sayfada olursanız olun alakalıdır.

Kullanıcı arayüzünün kullanıcı dostu ve anlaşılması kolay olduğundan emin olun. Nihai teslimat, kullanıcının indirip kurabileceği bir paket olacaktır.

Uzantınızdan para kazanmanın denenmiş ve test edilmiş 5 yolu

Uzantınızın temel amacı gelir elde etmektir. Hedef kitlenizi ve uzantıyı nasıl kullanacaklarını tanımladıktan sonra, ondan nasıl para kazanabileceğinizi planlayabilirsiniz. Uzantılardan para kazanma hakkında kapsamlı bir kılavuz yazdık. İşte bazı önemli noktalar:

1. Uygulama İçi Reklamlar

Uygulama içi reklamcılık, uzantınızdan para kazanmanın en yaygın yollarından biridir. Bunlar, uzantınızı kullanan bir kullanıcıya görünen reklamlardır. Programatik bir çözüm aracılığıyla uygulama içi reklamcılık yoluyla para kazandığınızda, reklamları döndürür. Statik reklamlardan farklı olarak bu teknik, potansiyelinizi en üst düzeye çıkarmanıza yardımcı olur. Görüntülü reklamcılığı kullanarak farklı reklam türlerini karıştırabilirsiniz.

CodeFuel kullanıcıları, hizmet, kullanıcının amacına uygun reklamlar görüntülediğinden, getirilerini en üst düzeye çıkarır ve para kazanmalarını basitleştirir.

2. Arama Ağı Reklamları

Bu, reklamların bir arama motoru sonuç sayfasına yerleştirildiği bir stratejidir. Reklamlar, kişi bir şey ararken göründüğü için kullanıcı deneyimini bozmaz. Arama reklamlarını kullanıcı amacına göre özelleştirebilir, böylece kullanıcı deneyimini iyileştirebilirsiniz.

3. Uygulama İçi Ödemeler ve Satın Almalar

Bu modelde, uzantı ücretsizdir ancak ücretlendirdiğiniz dahili özellikler vardır. Uygulama içi satın alma, oyun uygulamaları ve uzantıları arasında yaygındır. Kullanıcı, ekstra ücretli özellikleri eklemek isteyip istemediğini seçer.

4. Ücretli Yükseltmeler

Benzer şekilde bu modelde de temel uzantı ücretsiz olarak sunuluyor ancak kullanıcı premium sürüm istiyorsa yükseltilmiş sürüm için ödeme yapması gerekiyor. Bu, Grammarly gibi popüler uzantılar tarafından kullanılan son derece yaygın bir modeldir.

5. Ücretsiz

Bu, uzantılar ve uygulamalar için muhtemelen en popüler para kazanma modelidir. Freemium ile uzantıyı ücretsiz olarak sunuyorsunuz. Ondan nasıl para kazanıyorsun? Senin birkaç seçeneğin var:

1. Sınırlı bir süre için ücretsiz deneme sunabilirsiniz.
2. Sınırlı özelliklere sahip ücretsiz, temel bir sürüm sunabilirsiniz.

Bu modeli seçerseniz, Google ücretli uzantılara son verdiği için sınırlamalarını göz önünde bulundurun.

En İyi Güvenlik Uzantıları Google Chrome:

Çoğu kişi Chrome'u alışverişten arama yapmaya ve finansal hesaplarını yönetmeye kadar her şey için kullanır. Tüm bu hassas verilerin korunması gerekir. Bu bilgilerin güvende kalmasını sağlayabilecek birkaç uzantı vardır.

1. Avast Çevrimiçi Güvenlik

Bu uzantı, web taramanızın güvenliğini birden fazla özellikle kapsayacaktır. Kimlik avı saldırısı koruması , herhangi bir web sayfasının öğelerini tarar ve sayfanın sahte veya şüpheli olup olmadığını tespit eder . Diğer değerli özellikler, tehlikeli siteleri tespit etmek için bir topluluk derecelendirme sistemi kullanmayı içerir.

2. Bulanıklaştırma

Tüm kimlik bilgilerinizin güvende kalmasını sağlamak için bir zorunluluk olan bir dizi parola yöneticisi vardır. Blur, ek güvenlik özellikleri nedeniyle en güvenli olanlardan biridir.

Blur , parolalarınızı şifreler, kaydeder ve yönetir . Ayrıca kredi kartı bilgilerinizi alışveriş sitelerinden gizler ve çerez olmayanlar da dahil olmak üzere her türlü takipçiyi engeller.

3. Tıklayın ve Temizleyin

Tek bir tıklama ile çevrimiçi etkinliğinizin tüm izlerini temizleyen bir temizleme aracıdır. Uzantı düğmesi tüm çevrimiçi geçmişi, çerezleri, önbelleği, kayıtlı URL'leri, web SQL veritabanlarını ve hatta geçici dosyaları temizler. Tıkla ve Temizle yerleşik bir kötü amaçlı yazılımdan koruma yazılımına sahiptir ve belirli türdeki verileri silmek için özelleştirilebilir.

4. Panik Butonu

Bu uzantı, açtığınız her şeyi tek bir tıklamayla kapatmanıza yardımcı olur. Hassas bir şey üzerinde çalışıyorsanız ve yetkili olmayan bir kişi yaklaşırsa bu yararlıdır. Panik düğmesine tıklandığında, tüm sekmeler hemen kapanacak ve yer imleri klasöründe saklanacaktır.

5. Hayaletlik

Çevrimiçi gizliliğinizi korumak veya izleyiciler üzerinde kontrol sahibi olmak istiyorsanız, bu uzantı çözüm olabilir. Ghostery, izleyiciler üzerinde kontrol sahibi olmanızı sağlar, böylece hangilerini engelleyeceğinize veya engelini kaldıracağınıza karar verebilirsiniz. Ayrıca belirli bir türün izlenmesini engellemenizi sağlar.

CodeFuel, uzantınızın getirisini en üst düzeye çıkarmanıza nasıl yardımcı olabilir?

CodeFuel ile uzantı para kazanmanızı bir sonraki seviyeye taşıyın. Eksiksiz para kazanma platformumuz, tarayıcı uzantıları dahil olmak üzere dijital mülkleriniz için amaca dayalı para kazanma sağlar.

Çözüm, kullanıcılara amaca göre özelleştirilmiş, alaka düzeyi yüksek alışveriş ve metin reklamları sunmak için makine öğreniminden yararlanır. Diğer çözümlerin aksine CodeFuel, Bing ve GoogleAdSense gibi birden çok reklam ağıyla çalışma esnekliği sağlar. CodeFuel ile uzatma veriminizi bugün maksimize etmeye başlayın.

Bir Chrome uzantısı donarsa nasıl düzeltilir?

Chrome uzantınızla çalışıyorsunuz ve tarayıcı aniden donuyor. Ne kadar sinir bozucu. Yaygın değil, ama oluyor. Chrome çökerse veya donarsa, bir proxy hatası gibi hatanın türünü belirten bir hata mesajı alırsınız veya web sayfası kullanılamaz.

Chrome yardımı, bir dizi sorun giderme ipucunu listeler:

• Diğer sekmeleri ve uygulamaları kapatın
• Tarayıcıyı yeniden başlatın
• Kötü amaçlı yazılım olup olmadığını kontrol edin
• Ağı sorunlar için test edin
• Uzantınız Chrome ile çakışmaya neden oluyorsa şu talimatları uygulayın:

1. Sağ üstte, Diğer'i tıklayın. Ayarlar
2. Altta, Gelişmiş'i tıklayın.
3. Sıfırla ve temizle'yi tıklayın Uyumsuz uygulamaları güncelleyin veya kaldırın.
   Bu seçeneği görmüyorsanız, sorunlu bir uygulama yoktur.
4. Listeden her uygulamayı güncellemek mi yoksa kaldırmak mı istediğinize karar verin.
   Bilgisayarınızın uygulama mağazasını açın ve bir güncelleme olup olmadığını kontrol edin.

SSS