Sıfırdan Chrome Uzantıları Nasıl Oluşturulur

Eğer yapmak istersen bazı işlevler ekleyin veya değiştirin Google Chrome'da bir uzantı kullanmanız gerekir. Chrome Web Mağazası'ndan bir uzantı indirebilirsiniz, ancak bazen varolan herhangi bir uzantıda bulamadığınız belirli bir işlevselliğe ihtiyaç duyarsınız..

İyi haber, gerekli işlevselliği eklemek veya değiştirmek veya daha sonra yapabileceğiniz Google Chrome için yeni bir eklenti veya uygulama yapmak için kendi uzantınızı oluşturabileceğinizdir. diğer kullanıcılara dağıt Chrome Web Mağazası'nı kullanarak.

Aşağıda, size göstereceğim Bir uzantı oluşturmanın en kolay yolu. Bazı web geliştirme bilgisine (HTML, CSS ve JS) sahipseniz, kendinizi evinizde hissedeceksiniz. Eğer değilse, önce bu kanalları izleyin. web geliştirmenin temellerini öğrenir, sonra aşağıda devam et.

Ön şartlar

Bu eğiticiye başlamadan önce aşağıdaki gereksinimleri tamamlamanız gerekir..

1. Aşina olmalısın HTML, CSS ve JavaScript. [Kaynakları kontrol et]
2. Sahip olmalısın kod editörü uzantıyı yazmak için [Editörleri karşılaştır]
3. (İsteğe bağlı) Uzantınızı diğer kullanıcılara dağıtmak istiyorsanız, geliştirici hesabı Chrome Web Mağazası'nda. [Hesap oluştur]

Not: Google, Chrome Web Mağazası'nda bir geliştirici hesabı oluşturmak için küçük bir ücret ödemenizi ister.

Bir uzantı oluştur

Bu yazıda, bir oluşturma sürecini paylaşacağım yapılacak iş uzantısı Google Chrome için. Temel bileşenleri ve uzantılara sağlanan yetenekleri göstermek için bir yardımcı (aşağıda gösterildiği gibi) olacak..

1. Bir şablon alın

Google Chrome, diğer platformlar gibi küme yapısına sahip uzantılar, Yeni başlayanlar için karmaşık görünebilir. Bu nedenle, tüm gereksinimleri sağlayacak bir uzantı için bir boyler şablonu elde etmek iyidir..

Extensionizr en iyi kazan plakası üreticisidir Krom uzantıları için. Verilen uzatma tiplerinden birini seçmenize izin verir. - tarayıcı işlemi (tüm sayfalar veya tarayıcı için bir eylem), sayfa işlemi (geçerli sayfa için bir eylem) veya gizli uzantı (genellikle ön arayüzde gizlenmiş bir arka plan eylemi).

Ayrıca, çeşitli ince ayar seçenekleri sunar. gerekli eklentileri, izinleri dahil etme / hariç tutma, vb. Seçmeniz gerekir “Tarayıcı işlemi” uzatma türü olarak ve “Arkaplan yok” bu eğitim için arka plan sayfası olarak.

Örnek uzantınızı oluşturmak için seçenekleri seçmeniz bittiğinde, “İndir!” Extensionizr içindeki düğme. En sonunda, arşivi (.zip) bir dizine çıkart ve uzantıyı yazmaya başlamak için kod düzenleyicinizi açın..

2. Uzantıyı kodlayın

Şablonu indirdikten ve çıkardıktan sonra, aşağıdaki ekran görüntüsünde gösterildiği gibi bir dizin yapısı göreceksiniz. Şablon özenle düzenlenmiştir ve en önemli dosyanın bu olduğunu bilmelisiniz. “manifest.json“.

Bu dizindeki diğer dosya ve klasörleri de tanıyalım:

1. _locales: İçin kullanılır depo dili bilgisi çok dilli bir uygulama için.
2. css: Bootstrap 4 gibi üçüncü taraf ön uç kütüphanelerini saklamak için çalışır.
3. simgeler: Uzantınız için çeşitli boyutlarda simgelere sahip olacak şekilde tasarlanmıştır.
4. js: Tasarruf etmek çok kullanışlı üçüncü taraf arka uç kütüphaneleri jQuery 3 gibi.
5. src: Uzantınız için yazacağınız asıl kodu saklar..

manifest.json

İçerir Uygulamanızla ilgili temel meta veriler, Bu, uygulamanızın tarayıcıdaki ayrıntılarını tanımlar. Dahili numaranızın adını, açıklamasını, web sitesini, simgesini vb. Özelliklerle birlikte ayarlamak için düzenleyebilirsiniz. tarayıcı işlemleri ve izinleri.

Örneğin, aşağıdaki kodda, browser_action altındaki default_title ile birlikte adını, açıklamasını ve homepage_url'yi değiştirdiğimi göreceksiniz. Ayrıca ben katma “depolama” izinler altında uzantımızdaki verileri depolamamız gerektiği için.

 "name": "Todoizr - Yapılacaklar Basitleştirilmiş", "sürüm": "0.0.1", "manifest_version": 2, "açıklama": "Herkes için basit yapılacaklar uygulaması.", "homepage_url": " https://go.aksingh.net/todoizr "," icons ": " 16 ":" icons / icon16.png "," 48 ":" simgeler / icon48.png "," 128 ":" simgeler / simge128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - Yapılacaklar Basitleştirilmiş "," default_popup ":" src / browser_action / browser_action.html "," izinler ": [" depolama "] 

src \ BROWSER_ACTION

Bu dizin tarayıcı işleminin kodunu tutacaktır. Bizim durumumuzda, yapacağız açılır pencereyi kodla tarayıcıdaki uzantının simgesine tıklayarak gösterilir. Uzantımız, kullanıcıların açılır pencerede yapılacak iş öğeleri eklemelerine ve görüntülemelerine izin verecek.

Not: Bu depoyu klonlayarak her zaman kodla zıplayabilirsiniz..

Şablondan ilk kod

Bu dizinde yalnızca tüm koda sahip bir HTML dosyası olmasına rağmen, daha iyi netlik için onu üç ayrı dosyaya bölmeye karar verdim. Bu dedi, HTML dosyası adlı “browser_action.html” şimdi aşağıdaki kod var:

Ayrıca, stil dosyası adlı “browser_action.css” JavaScript dosyası adlandırılmışken aşağıdaki içeriğe sahip “browser_action.js” şimdilik boş.

 #mainPopup padding: 10px; yükseklik: 200px; genişlik: 400px; font ailesi: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Pop-up arayüzünü tasarla

İlk projeyi ayarladıktan sonra, ilk açılan pencerenin arayüzünü tasarlayalım. Sahibim arayüzü minimalist bir yaklaşımla kur, adın en üstünde ve ardından yapılacaklar öğeleri eklemek için bir form ve eklenen öğeleri görüntülemek için aşağıdaki bir alan gösteriliyor. Bu basit tasarımı ile ilham alıyor “Form Stili 5“.

Aşağıdaki kodda iki divs ekledim - biri yapılacak iş öğesi ekleme formunu görüntülemek için diğeri de önceden eklenmiş yapılacak iş öğelerinin listesini görüntülemek için. Yani, yeni kod için “browser_action.html” Şöyleki:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Ve stil dosyası “browser_action.css” şimdi aşağıdaki kod var:

 @imort URL ("./ form_style_5.css"); #mainPopup height: 200px; genişlik: 300px; font ailesi: Helvetica, Ubuntu, Arial, sans-serif;  / * Yapılacak iş öğesi formu * / .form-style-5 margin: auto; dolgu maddesi: 0px 20px;  .form-style-5: birinci çocuk background: none;  .form-style-5 h1 color: # 308ce3; yazı tipi boyutu: 20 piksel; metin hizalama: orta;  .form-style-5 input [type = "text"] width: auto; şamandıra: sol; kenar boşluğu: unset;  .form-style-5 input [type = "button"] arkaplan: # 308ce3; genişlik: otomatik; Sağa çık; dolgu maddesi: 7px; sınır: yok; sınır yarıçapı: 4px; yazı tipi boyutu: 14 piksel;  .form-style-5 input [type = "button"]: gezinip background: # 3868d5;  / * Yapılacaklar listesi * / .form-style-5: last-child height: inherit; marj-alt: 5 piksel;  .form-style-5 ul dolgu maddesi: 20 piksel;  .form-style-5 ul li font-size: 14px;  

Son olarak, üçüncü taraf stil dosyası “form_style_5.css” aşağıdaki içeriğe sahiptir. Eklentimizin tasarımına ilham vermek için basitçe web sitesinden alınmıştır..

 / * Sanwebe.com tarafından Form Stili 5 * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; dolgu maddesi: 10px 20px; arkaplan: # f4f7f8; marj: 10 piksel otomatik; dolgu maddesi: 20px; arkaplan: # f4f7f8; sınır yarıçapı: 8px; font-family: Georgia, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; marj-alt: 10 piksel;  .form-style-5 label display: block; marj-alt: 8 piksel;  .form-style-5 girişi [type = "metin"], .form tarzı-5 girişi [type = "tarih"], .form tarzı-5 girişi [type = "datetime"], .form tarzı -5 giriş [tip = "e-posta"], .form tarzı-5 giriş [tip = "sayı"], .form stil-5 girişi [tip = "arama"], .form stil-5 girişi [tür = "time"], .form-style-5 girişi [type = "url"], .form-style-5 textarea, .form-style-5 seçimi font-family: Georgia, "Times New Roman", Times serif; arkaplan: rgba (255,255,255, .1); sınır: yok; sınır yarıçapı: 4px; yazı tipi boyutu: 16 piksel; marj: 0; taslak: 0; dolgu maddesi: 7px; genişlik:% 100; kutu boyutlandırma: kenarlık kutusu; -webkit-box-sizeing: sınır kutusu; -moz-kutu-boyutlandırma: border-box; arka plan rengi: # e8eeef; color: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) eki; kutu-gölge: 0 1px 0 rgba (0,0,0,0.03) eki; marj-alt: 30 piksel;  .form-style-5 girişi [type = "text"]: odak, .form-style-5 girişi [type = "date"]: odak, .form tarzı-5 girişi [type = "datetime"]: odak, .form-style-5 girişi [type = "email"]: odak, .form-style-5 girişi [type = "sayı"]: odak, .form-style-5 girişi [tip = "arama"] : focus, .form-style-5 girişi [type = "time"]: focus, .form-style-5 girişi [type = "url"]: focus, .form tarzı-5 textarea: focus, .form- style-5 select: focus background: # d2d9dd;  .form-style-5 select -webkit-görünüm: menülist-düğme; yüksekliği: 35px;  .form-style-5 .number background: # 1abc9c; renk: #fff; yükseklik: 30px; genişlik: 30px; ekran: satır içi blok; yazı tipi boyutu: 0.8em; kenar boşluğu: 4 piksel; hat yüksekliği: 30px; metin hizalama: orta; metin-gölge: 0 1 px 0 rgba (255,255,255,0.2); sınır yarıçapı: 15px 15px 15px 0px;  .form-style-5 girişi [type = "delivery"], .form-style-5 girişi [type = "button"] position: relatif; Ekran bloğu; dolgu maddesi: 19px 39px 18px 39px; renk: #FFF; marj: 0 otomatik; arkaplan: # 1abc9c; yazı tipi boyutu: 18 piksel; metin hizalama: orta; yazı tipi stili: normal; genişlik:% 100; sınır: 1px katı # 16a085; kenarlık genişliği: 1px 1px 3px; marj-alt: 10 piksel;  .form-style-5 girişi [type = "delivery"]: vurgulu, .form-style-5 girişi [type = "button"]: vurgulu background: # 109177;  

Pop-up’ın mantığını yaz

Uzantının önü bitince bir kez daha mantığını yazalım. Yapabilmek için uzantımıza ihtiyacımız var yapılacak iş öğelerini ekleyin ve ayrıca bunları görüntüleyin açılır pencerede. Bu nedenle, giriş metnini yapılacak iş öğesi olarak eklemek için bir düğme tıklatma dinleyicisi ve bu öğeleri göstermek için bir sayfa yükleme dinleyicisi ekleyeceğiz..

Aşağıdaki kodda iki işlevi kullanacağız. - sync.get () ve sync.set (), hangi parçası “chrome.storage“. Yapılacaklar öğelerini depoya kaydetmek için ikinciye, bunları almak ve göstermek için ilkine ihtiyacımız var..

Bununla birlikte, aşağıda belirtilen kodun son kodu “browser_action.js” dosya. Aşağıda da görebileceğiniz gibi, amacını anlamanıza yardımcı olmak için kod çok yorumlanmıştır.

 function loadItems () / * İlk önce () veri depodaki verileri * / chrome.storage.sync.get (['todo'], function (result) var todo = [] if (result && result.todo && result.todo.trim ()! == ") / * Diziyi bir dize olarak kaydettiğinizde çözümleyin ve alın * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Uzantıyı yükleyin

Uzantınızı yazmayı tamamladıktan sonra, Google Chrome'un mağaza dışı, paketlenmemiş uzantıları yükleme özelliğini sunan özelliğini test etme zamanı. Ama önce sen yapmalısın geliştirici modunu etkinleştir Tarayıcınızda: seçenekleri buton > seçmek “Daha fazla araç” > Uzantıları, ve sonra aç “Geliştirici modu“.

Şimdi arama çubuğunun altında daha fazla düğme göreceksiniz. Buraya tıklayın “Ambalajsız yükle” buton. Dizini soracak - uzantınızın dizinine göz atıp seçecek ve uzantıyı yükleyecektir. Uzantınızın kodunu düzenler veya güncellerseniz, son değişiklikleri yüklemek için yeniden yükle düğmesi.

Örneğimizde, uzantının simgesini göreceksiniz Profil simgesinin yanında, örnek uzantımıza bir tarayıcı işlemi ekledik. Bu simgeye tıklayabilirsiniz yapılacak iş öğelerini ekle ve görüntüle uzantımızda belirtilen işlem budur.

Bir uzantı dağıtın

Olmasına rağmen bir uzantı yüklemek kolay Chrome Web Mağazası’na, işlemin tüm ayrıntılarını kapsaması için çok uzun. Kısacası, bir geliştirici hesabı oluşturun, uzantınızı paketleyin ve içerik ayrıntılarıyla birlikte (ad, simge, ekran görüntüleri vb.) Gönderin; adım adım kılavuzunda listelendiği gibi.

Sıradaki ne? Oku ve kodla

Beklediğiniz gibi, bu eğitimin amacı, Google Chrome için uzantı geliştirme işlemine başlamanızı sağlamaktır. Temel kavramları ele almaya çalıştım; ancak, daha fazlasını bilmen gerek ciddi uzatma gelişimi için.

Dedi ki, aşağıda bazıları benim favori kaynaklar Google Chrome ve diğer Chromium tabanlı tarayıcılar için uzantılar geliştirmeyi öğrenmek için:

1. Tüm yetenekler, bileşenler ve uzantıların özellikleri.
2. Google Chrome'un arkasındaki ekip tarafından örnek uzantılar.

Bu kaynaklardan geçtiyseniz ve bir miktar zorluğa hazırsanız, geliştirmeyi tamamladığınız uzantıda aşağıdaki özellikleri eklemeyi deneyin:

1. Kaydedilen yapılacak iş öğelerini silme seçeneği.
2. Öğe eklendiğinde bildirimleri gösterme özelliği.

Hepsi en popüler tarayıcı için ilk uzantınızı geliştirmekle ilgili.. Hangi uzantıyı oluşturdunuz? Bir problemin mi oldu? Lütfen aşağıya bir yorum yazarak veya @aksinghnet adresinden bana mesaj göndererek hikayenizi bildirin.

Sonuncusu ama en az olmayanı, Todoizr'i (yarattığımız eklenti) Chrome Web Mağazası'nda deneyebileceğinizi ve bu depodaki kodun tamamını kontrol edebileceğinizi unutmayın..