Uzantılar farklı ancak birbirine bağlı bileşenlerden oluşur. Bileşenler; arka plan komut dosyaları, içerik komut dosyaları, bir seçenekler sayfası, kullanıcı arayüzü öğeleri ve çeşitli mantık dosyalarını içerebilir. Uzantı bileşenleri web geliştirme teknolojileriyle oluşturulur: HTML, CSS ve JavaScript. Bir uzantının bileşenleri, işlevselliğine bağlıdır ve her seçeneği gerektirmeyebilir.
Bu eğitim, kullanıcının developer.chrome.com adresindeki herhangi bir sayfanın arka plan rengini değiştirmesine olanak tanıyan bir uzantı oluşturur. Bu uzantı, kullanıcı ilişkilerine giriş niteliğinde bir gösterim sunmak için birçok temel bileşenden yararlanır.
Uzantının dosyalarını barındıracak yeni bir dizin oluşturarak başlayın.
Doldurduğunuz uzantıyı burada bulabilirsiniz.
Manifest dosyasını oluşturma
Uzantılar manifest ile başlar. manifest.json adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
Manifest dosyasını içeren dizin, geliştirici modunda geçerli durumunda bir uzantı olarak eklenebilir.
chrome://extensionsadresine giderek Uzantı Yönetimi sayfasını açın.- Uzantı Yönetimi sayfasını ayrıca Chrome menüsü tıklanarak, fareyle Diğer Araçlar'ın üzerine getirilerek ve Uzantılar'ı seçilerek de açılabilir.
- Geliştirici modu'nun yanındaki açma/kapatma düğmesini tıklayarak Geliştirici Modu'nu etkinleştirin.
- PAKETİ KALDIRILMADI düğmesini tıklayıp uzantı dizinini seçin.
İşte burada! Uzantı başarıyla yüklendi. Manifest dosyasında simge içermediğinden, uzantı için genel bir araç çubuğu simgesi oluşturulur.
Talimat ekle
Uzantı yüklenmiş ancak herhangi bir talimat içermiyor. background.js başlıklı bir dosya oluşturup bu dosyayı uzantı dizinine yerleştirerek bir arka plan komut dosyası kullanın.
Arka plan komut dosyaları ve diğer önemli bileşenler manifest'te kayıtlı olmalıdır. Manifest'e bir arka plan komut dosyası kaydetmek, uzantıya hangi dosyaya başvuruda bulunacağını ve o dosyanın nasıl davranması gerektiğini bildirir.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
Uzantı artık kalıcı olmayan bir arka plan komut dosyası içerdiğinin farkındadır ve kayıtlı dosyayı dinlemesi gereken önemli etkinlikler için tarar.
Bu uzantı yüklenir yüklenmez kalıcı bir değişkenden bilgi alması gerekir. Arka plan komut dosyasına runtime.onInstalled için bir dinleme etkinliği ekleyerek başlayın. Uzantı, onInstalled işleyicinin içinde storage API'yi kullanarak bir değer ayarlar. Bu sayede birden fazla uzantı bileşeni bu değere erişebilir ve değeri güncelleyebilir.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
storage API dahil olmak üzere çoğu API'nin, uzantının bunları kullanabilmesi için manifest dosyasındaki "permissions" alanı altında kaydedilmesi gerekir.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
Uzantı yönetimi sayfasına geri dönün ve Yeniden yükle bağlantısını tıklayın. Görünümleri incele adlı yeni bir alan, mavi bir bağlantıyla (arka plan sayfası) kullanılabilir hale gelir.
Arka plan komut dosyasının konsol günlüğünü ("The color is green.") görüntülemek için bağlantıyı tıklayın
Kullanıcı arayüzünü tanıtın
Uzantılar birçok kullanıcı arayüzü biçiminde olabilir ancak bu arayüzde pop-up kullanılır.
popup.html adlı bir dosya oluşturup dizine ekleyin. Bu uzantı, arka plan rengini değiştirmek için bir düğme kullanır.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
Arka plan komut dosyası gibi bu dosyanın da manifest dosyasında page_action altında pop-up olarak tanımlanması gerekir.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
Araç çubuğu simgeleri için tanımlama da default_icons alanındaki page_action altında yer alır.
Resimler klasörünü buradan indirin, sıkıştırmasını açın ve uzantı dizinine yerleştirin. Uzantının görüntüleri nasıl kullanacağını bilmesi için manifest dosyasını güncelleyin.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"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"
}
},
"manifest_version": 2
}
Uzantılar ayrıca uzantı yönetimi sayfasında, izin uyarısında ve site simgesinde resimler de gösterir. Bu görüntüler, manifest dosyasında icons kapsamında belirtilir.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"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"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
Uzantı bu aşamada yeniden yüklenirse gri tonlamalı bir simge içerir ancak işlev farklılıkları gösterilmez. page_action manifest'te tanımlandığından, tarayıcıya kullanıcının popup.html ile ne zaman etkileşimde bulunabileceğini bildirmek uzantıya bağlıdır.
Bildirilen kuralları, runtime.onInstalled işleyici etkinliği içinde declarativeContent API ile arka plan komut dosyasına ekleyin.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Uzantının, manifest dosyasındaki declarativeContent API'ye erişmek için izin alması gerekir.
{
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
Kullanıcılar "developer.chrome.com" içeren bir URL'ye gittiğinde tarayıcı artık tarayıcı araç çubuğunda tam renkli bir sayfa işlemi simgesi gösterir. Simge tam renkli olduğunda kullanıcılar popup.html'yi görüntülemek için
simgeyi tıklayabilir.
Pop-up kullanıcı arayüzünün son adımı, düğmeye renk eklemektir. popup.js adlı bir dosya oluşturup aşağıdaki kodu kullanarak uzantı dizinine ekleyin.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
Bu kod, düğmeyi popup.html öğesinden alır ve depolama alanından renk değerini ister. Daha sonra, rengi düğmenin arka planı olarak uygular. popup.html içine popup.js öğesine bir komut dosyası etiketi ekleyin.
<!DOCTYPE html>
<html>
...
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
Yeşil düğmeyi görüntülemek için uzantıyı yeniden yükleyin.
Katman mantığı
Uzantı artık pop-up'ın developer.chrome.com adresindeki kullanıcılar tarafından kullanılması gerektiğini biliyor ve renkli bir düğme gösteriyor ancak daha fazla kullanıcı etkileşimi için mantığa ihtiyacı var. popup.js öğesini aşağıdaki kodu içerecek şekilde güncelleyin.
let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = "' + color + '";'});
});
};
Güncellenen kod, düğmeye bir onclick etkinliği ekler. Bu etkinlik, programatik olarak yerleştirilmiş bir içerik komut dosyasını tetikler. Bu işlem, sayfanın arka plan rengini düğmeyle aynı renge dönüştürür. Programatik yerleştirmenin kullanılması, web sayfalarına otomatik olarak istenmeyen kod eklemek yerine, kullanıcı tarafından çağrılan içerik komut dosyalarının kullanılmasına olanak tanır.
Uzantının tabs API'ye geçici olarak erişmesine izin vermek için manifest dosyasının activeTab iznine ihtiyacı vardır. Bu, uzantının tabs.executeScript kodunu çağırmasını sağlar.
{
"name": "Getting Started Example",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}
Uzantı artık tamamen işlevseldir. Uzantıyı yeniden yükleyin, bu sayfayı yenileyin, pop-up'ı açın ve yeşile dönmesi için düğmeyi tıklayın! Ancak, bazı kullanıcılar arka planı farklı bir renkle değiştirmek isteyebilir.
Kullanıcılara seçenekler sunun
Uzantı şu anda kullanıcıların arka planı yalnızca yeşil renkle değiştirmesine izin veriyor. Seçenekler sayfası eklemek, kullanıcılara uzantının işlevleri üzerinde daha fazla kontrol sağlar ve göz atma deneyimlerini daha da özelleştirerek kullanıcılara kolaylık sağlar.
options.html adlı dizinde bir dosya oluşturarak başlayın ve aşağıdaki kodu ekleyin.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>
Ardından, manifest dosyasında seçenekler sayfasını kaydedin ve
{
"name": "Getting Started Example",
...
"options_page": "options.html",
...
"manifest_version": 2
}
Uzantıyı yeniden yükleyin ve AYRINTILAR'ı tıklayın.
Ayrıntılar sayfasını aşağı kaydırın ve seçenekler sayfasını görüntülemek için Uzantı seçenekleri'ni belirleyin, ancak şu anda boş görünür.
Son adım, seçenekler mantığını eklemektir. Aşağıdaki kodu kullanarak uzantı dizininde options.js adlı bir dosya oluşturun.
let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
for (let item of kButtonColors) {
let button = document.createElement('button');
button.style.backgroundColor = item;
button.addEventListener('click', function() {
chrome.storage.sync.set({color: item}, function() {
console.log('color is ' + item);
})
});
page.appendChild(button);
}
}
constructOptions(kButtonColors);
Dört renk seçeneği sağlanır ve daha sonra seçenekler sayfasında, tıklama etkinlik işleyicilerle düğme olarak oluşturulur. Kullanıcı bir düğmeyi tıkladığında, uzantının global depolama alanındaki renk değeri güncellenir. Uzantının tüm dosyaları global depolamadan renk bilgilerini aldığından, başka hiçbir değerin güncellenmesine gerek yoktur.
Bir sonraki adımı atın
Tebrikler! Dizin artık çok basit olsa da tam işlevsel bir Chrome uzantısına sahip.
Sonraki adım
- Chrome Uzantısına Genel Bakış, biraz yedekler, genel olarak Uzantı mimarisi hakkında birçok ayrıntı verir ve geliştiricilerin öğrenmek isteyeceği bazı belirli kavramlar içerir.
- Uzantılarda hata ayıklama için kullanılabilecek seçeneklerle ilgili bilgileri hata ayıklama eğiticisinde bulabilirsiniz.
- Chrome Uzantıları, açık web'de bulunanların ötesinde güçlü API'lere erişim sağlar. Chrome.* API belgelerinde her API adım adım açıklanmıştır.
- Geliştirici kılavuzunda, gelişmiş uzantı oluşturmayla ilgili belgelere ait düzinelerce ek bağlantı bulunmaktadır.