Web tarayıcınızla birlikte gelen özelliklerden kendinizi hiç mutsuz buldunuz mu? Google Web Mağazası'nı saatlerce arşınlasanız bile, web'de gezinme deneyiminizi geliştirmek için "indir" düğmesine basmak her zaman basit bir mesele değildir.

Tarayıcı uzantılarının girdiği yer burasıdır. Bu makalede, kendi DIY Google Chrome Uzantınızı sıfırdan oluşturma sürecini keşfedeceğiz.

Google Chrome Uzantısı Nedir?

Modern Google Chrome gibi web tarayıcıları kullanımlarını kolaylaştıran ve çoğu kullanıcının ihtiyaçlarını karşılayabilen bir dizi özellikle birlikte gelir. Bu stok özelliklerini genişletmek, birçok farklı fayda sağlayabilir. Bu nedenle tarayıcı geliştiricileri genellikle onlar için uzantılar, eklentiler ve eklentiler oluşturmayı mümkün kılar.

Google Chrome bu özelliği sunarak web geliştirme deneyimi olan herkesin kendi Chrome Uzantılarını oluşturmasını kolaylaştırır. Birçok web sitesinde olduğu gibi HTML, JavaScript ve CSS kullanarak bir uzantı oluşturabilirsiniz.

Bir web sitesinin aksine, uzantılar siz göz atarken arka planda çalışabilir, hatta bazen ziyaret ettiğiniz sitelerle etkileşime girebilir.

instagram viewer

Google Chrome Uzantımız Ne Yapacak?

Make Use Of web sitesini ziyaret etmenizi ve sitede bulunan makale kategorilerine göre rastgele bir arama yapmanızı sağlayacak basit bir Chrome uzantısı oluşturacağız. Bu hızlı ve kolay bir projedir, ancak yine de çok şey öğreneceksiniz.

Nasıl Yapılacağını Öğreneceksin

  • Google Chrome Uzantısı Oluşturun
  • Bir Chrome Uzantısı kullanarak web sayfalarına özel kod ekleyin
  • Olay dinleyicileri oluşturun ve tıklamaları simüle edin
  • Rastgele sayılar üret
  • Diziler ve değişkenlerle çalışma

Kendi DIY Chrome Uzantınızı Oluşturma

Google, kendinizinkini oluşturmayı şaşırtıcı derecede kolaylaştırdı Chrome Uzantıları, bu yüzden bir şeyin işe yaraması uzun sürmez. Aşağıdaki adımları takip etmek yalnızca 10 ila 15 dakika sürecektir, ancak kendi kodunuzu da denemenizi öneririz.

Adım 1: Dosyaları Oluşturma

Uzantınızı, dağıtmayı planlamadığınızda kendi yerel makinenizde depolayabilirsiniz. Uzantımızı oluşturmak için sadece dört farklı dosya oluşturmamız gerekiyor; bir HTML dosyası, bir CSS dosyası, bir JavaScript dosyası ve bir JSON dosyası.

Dosyalarımızı index.html, style.css, script.js ve manifest.json olarak adlandırdık. Bildirim dosyasının düzgün çalışması için bu ada sahip olması gerekir, ancak kodunuzu buna göre değiştirdiğiniz sürece diğerlerine istediğiniz adları verebilirsiniz.

Bu dosyaları aynı kök klasöre yerleştirmelisiniz.

Adım 2: Manifest Dosyasını Oluşturma

Bildirim dosyası, her Google Chrome Uzantısıyla birlikte gelir. Bazı temel ayarları yerine getirirken Chrome uzantısı hakkında bilgi sağlar. Bu dosya bir ad, sürüm numarası, açıklama ve bir bildirim sürümü içermelidir. Ayrıca izinleri ve yüklenen bir eylemi de ekledik. index.html uzantı için görünen açılır pencere olarak.

{
"isim": "MakeUseOf.com Otomatik Arama",
"versiyon": "1.0.0",
"tanım": "İlginç makaleler bulmak için bir arama aracı",
"manifest_version": 3,
"yazar": "samuel garbett",
"izinler": ["depolamak", "bildirimselİçerik", "aktif sekme", "komut dosyası"],
"host_permissions": [""],
"eylem":{
"default_popup": "index.html",
"default_title": "MUO Otomatik Arama"
 }
}

3. Adım: HTML ve CSS'yi Oluşturma

Komut dosyamızı yazmaya başlamadan önce HTML ve CSS kullanarak temel bir kullanıcı arayüzü oluşturmamız gerekiyor. kullanabilirsiniz Bootstrap gibi CSS kütüphanesi Kendinizinkini oluşturmaktan kaçınmak için, ancak uzantımız için yalnızca birkaç kurala ihtiyacımız var.

index.html dosyamızda html, head ve body etiketleri bulunur. Head etiketi, bir sayfa başlığı ve stil sayfamıza bir bağlantı içerirken, gövde bir h1 etiketine, bir sizi MakeUseOf.com'a götüren düğme ve bir tetikleyici olarak kullanacağımız başka bir düğme senaryo. Belgenin hemen sonundaki bir komut dosyası etiketi şunları içerir: script.js dosya.

<html>
<kafa>
<Başlık>MUO Otomatik Arama</title>
<meta karakter kümesi="utf-8">
<bağlantı rel="stil sayfası" href="stil.css">
</head>
<gövde>
<h1>MUO Otomatik Arama</h1>
<a href="https://www.makeuseof.com/" hedef="_boşluk"><düğme kimliği="düğmeBir">MakeUseOf.com'a gidin</button></a>
<düğme kimliği="düğmeİki">Rastgele Aramayı Başlat</button>
</body>
<komut dosyası kaynağı="script.js"></script>
</html>

CSS dosyamız HTML'mizden bile daha basittir ve yalnızca beş öğenin stilini değiştirir. H1 etiketleri ve her iki düğmemiz için olduğu kadar html ve gövde etiketlerimiz için de kurallarımız var.

html {
 genişlik: 400 piksel;
}
gövde {
 yazı tipi ailesi: Helvetica, sans-serif;
}
h1 {
 metin hizalama: merkez;
}
#buttonBir {
 sınır yarıçapı: 0px;
 genişlik: %100;
 dolgu: 10px 0px;
}
#buttonİki {
 sınır yarıçapı: 0px;
 genişlik: %100;
 dolgu: 10px 0px;
 üst kenar boşluğu: 10 piksel;
}

4. Adım: JavaScript'i Oluşturma

Bu süreçteki son adım olarak, script.js dosyamızı oluşturmanın zamanı geldi.

Bu dosyadaki ilk işlev olarak adlandırılan insertScript(), diğer işlevi eklemek için yerinde (otomatik arama()) geçerli sayfaya girin. Bu, sayfayı değiştirmemize ve MakeUseOf.com sitesinde zaten mevcut olan arama özelliklerini kullanmamıza olanak tanır.

Bunu, yukarıda incelediğimiz işlevi çağırmadan önce Rastgele Aramayı Başlat düğmesine tıklanana kadar bekleyen bir olay dinleyicisi takip eder.

bu otomatik arama() işlevi biraz daha karmaşıktır. MUO web sitesindeki 20 kategoriyi içeren bir diziyle başlar ve rastgele aramalarımızı yaparken bize iyi bir örnek verir. Bunu takiben, kullandığımız Matematik.rastgele() dizimizden bir giriş seçmek için 0 ile 19 arasında rastgele bir sayı üretme işlevi.

Arama terimimiz elimizdeyken, şimdi MUO arama çubuğunu açmak için bir düğme tıklamasını simüle etmemiz gerekiyor. Arama düğmesinin kimliğini bulmak için önce Chrome geliştirici konsolunu kullanıyoruz ve ardından bunu JavaScript kodumuza ekliyoruz. Tıklayın() işlev.

Arama düğmesi gibi, beliren arama çubuğunun kimliğini de bulmamız gerekiyor, bu da seçtiğimiz rastgele arama terimini eklememizi sağlıyor. Bu tamamlandı ile, aramamızı yapmak için formu göndermek basit bir meseledir.

// Bu işlev, otomatik Arama işlevimizi sayfanın koduna ekler
işlevinsertScript() {
// Bu, işlem için odaklanılan sekmeyi seçer ve otomatik Arama işlevinden geçer
 chrome.tabs.query({aktif: doğru, geçerliPencere: doğru}, sekmeler => {
krom.komut dosyası oluşturma.executeScript({hedef: {tabId: sekmeler[0].İD}, işlev: otomatik arama})
 })
// Bu, web sitesi arama çubuğunu seçmek için uzantı açılır penceresini kapatır
pencere.kapat();
}


// Bu, "Başlangıç Rastgele Aramak" buton
Document.getElementById('düğmeİki').addEventListener('Tıklayın', insertScript)


// Bu fonksiyon bir diziden rastgele bir konu seçer ve 
işlevotomatik arama() {
// Bu, arama terimlerimizi saklayacak bir dizidir.
 const searchTerms = ["PC ve Mobil", "Yaşam tarzı", "Donanım", "pencereler", "Mac",
"Linux", "Android", "Elma", "internet", "Güvenlik",
"Programlama", "Eğlence", "üretkenlik", "Kariyer", "Yaratıcı",
"oyun", "Sosyal medya", "Akıllı ev", "kendin yap", "Gözden geçirmek"];


// Bu, 0 ile 19 arasında rastgele bir sayı üretir
İzin Vermek seçiciNumara = Matematik.zemin(Matematik.rastgele() * 20);


// Bu, diziden bir giriş seçmek için rastgele sayıyı kullanır
İzin Vermek seçim = searchTerms[selectorNumber];


// Bu, MUO web sitesi arama simgesine tıklamayı simüle eder
 Document.getElementById("js-arama").Tıklayın();


// Bu, MUO web sitesi arama çubuğunu bir değişken olarak ayarlar
var arama çubuğu = belge.getElementById("js-arama-girişi");


// Bu, rastgele arama terimimizi arama çubuğuna ekler
 searchBar.value = searchBar.value + seçim;
// Bu, web sitesi formunu etkinleştirerek işlemi tamamlar
 Document.getElementById("arama formu2").Sunmak();
}

5. Adım: Dosyalarınızı Chrome://extensions'a Ekleme

Ardından, az önce oluşturduğunuz dosyaları Chrome uzantıları sayfasına eklemenin zamanı geldi. Bunu yaptıktan sonra, uzantıya Chrome'dan erişilebilir olacak ve dosyalarınızda her değişiklik yaptığınızda kendini güncelleyecektir.

Google Chrome'u açın, chrome://extensions'a gidin ve sağ üst köşedeki Geliştirici Modu kaydırıcısının açık konumda olduğundan emin olun.

Tıklamak Ambalajsız Yükle sol üst köşede, ardından uzantı dosyalarınızı kaydettiğiniz klasörü seçin ve tıklayın. Dosya Seç.

Uzantınız yüklendiğine göre, sağ üst köşedeki yapboz parçası simgesine tıklayabilir ve daha kolay erişim için uzantınızı ana görev çubuğuna sabitleyebilirsiniz.

Artık tamamlanmış uzantıya tarayıcınızdan erişebilmelisiniz. Bu uzantının yalnızca MUO web sitesinde veya arama düğmesi ve çubuğu için aynı kimliğe sahip web sitelerinde çalışacağını akılda tutmakta fayda var.

Google Chrome Uzantısı Oluşturma

Bu makale, yalnızca kendi Google Chrome uzantınızda oluşturabileceğiniz olası özelliklerin yüzeyini çizmektedir. Temel bilgileri öğrendikten sonra kendi fikirlerinizi keşfetmeye değer.

Chrome uzantıları, göz atma seviyenizi yükseltmenize yardımcı olabilir, ancak güvenli ve güvenli tarama için bilinen bazı gölgeli Chrome uzantılarından uzak durmaya çalışın.

En Kısa Sürede Kaldırmanız Gereken 6 Gölgeli Google Chrome Uzantısı

Sonrakini Oku

PaylaşmakCıvıldamakPaylaşmakE-posta

İlgili konular

  • Programlama
  • Tarayıcı Uzantıları
  • Web Geliştirme
  • JavaScript

Yazar hakkında

Samuel L. Garbett (44 Makale Yayımlandı)

Samuel, kendin yap ile ilgili her şeye tutkuyla bağlı, İngiltere merkezli bir teknoloji yazarıdır. Uzun yıllar yazar olarak çalışmanın yanı sıra web geliştirme ve 3D baskı alanlarında iş kuran Samuel, teknoloji dünyasına benzersiz bir bakış açısı sunuyor. Ağırlıklı olarak kendin yap teknolojisi projelerine odaklanarak, evde deneyebileceğiniz eğlenceli ve heyecan verici fikirleri paylaşmaktan başka bir şey sevmiyor. İş dışında, Samuel genellikle bisiklet sürerken, bilgisayar oyunları oynarken veya çaresizce evcil yengeciyle iletişim kurmaya çalışırken bulunabilir.

Samuel L.'dan Daha Fazla Garbett

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın