Uzantı kullanıcı arayüzü amaca yönelik ve minimal olmalıdır. Uzantıların kendisi gibi kullanıcı arayüzü, göz atma deneyimini başka dikkatini dağıtmadan özelleştirmeli veya iyileştirmelidir.
Bu kılavuzda, zorunlu ve isteğe bağlı kullanıcı arayüzü özellikleri açıklanmaktadır. Bir uzantı içinde farklı kullanıcı arayüzü öğelerinin nasıl ve ne zaman uygulanacağını anlamak için bu raporu kullanın.
Uzantıyı tüm sayfalarda etkinleştirin
Bir uzantının özellikleri çoğu durumda çalışır durumda olduğunda bir browser_action kullanın.
Tarayıcı işlemini kaydet
"browser_action"
alanı manifest'e kaydedilir.
{
"name": "My Awesome browser_action Extension",
...
"browser_action": {
...
}
...
}
"browser_action"
belirtilmesi durumunda simge renkli olacak ve uzantının kullanıcılar tarafından kullanılabileceği belirtilir.
Bir rozet ekleyin
Rozetler, tarayıcı simgesinin üstünde en fazla dört karakter içeren renkli bir banner görüntüler. Yalnızca manifest dosyalarında "browser_action"
belirten uzantılar tarafından kullanılabilir.
Uzantının durumunu belirtmek için rozetler kullanın. Su İçi Etkinliği örneği, kullanıcıya başarılı bir şekilde alarm kurduğunu göstermek için "AÇIK" yazan bir rozet görüntüler ve uzantı boşta kaldığında hiçbir şey göstermez.
chrome.browserAction.setBadgeText
yöntemini çağırarak rozet metnini ve chrome.browserAction.setBadgeBackgroundColor
yöntemini çağırarak banner rengini ayarlayın .
chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});
Belirli sayfalarda uzantıyı etkinleştirin
Uzantının özellikleri yalnızca tanımlanan koşullar altında kullanılabilir olduğunda page_action parametresini kullanın.
Sayfa işlemi bildir
"page_action"
alanı manifest'e kaydedilir.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
...
}
...
}
"page_action"
belirtilmesi durumunda simge yalnızca uzantı kullanıcılar tarafından kullanılabilirken renklendirilir, aksi takdirde gri tonlamalı olarak görüntülenir.
Uzantıyı etkinleştirmek için kurallar tanımlayın
Bir arka plan komut dosyasında runtime.onInstalled
işleyicisinin altında chrome.declarativeContent
yöntemini çağırarak uzantının ne zaman kullanılabileceğine dair kurallar tanımlayın. URL'ye göre sayfa işlemi örnek uzantısı, URL'nin bir "g" içermesi gerektiğini belirten bir koşul ayarlar. Koşul karşılanırsa uzantı declarativeContent.ShowPageAction()
çağırır.
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when a page's URL contains a 'g' ...
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'g' },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
Uzantıyı etkinleştirin veya devre dışı bırakın
"page_action"
kullanan uzantılar, pageAction.show
ve pageAction.hide
çağrılarıyla dinamik olarak etkinleştirilip devre dışı bırakılabilir.
Mappy örnek uzantısı, bir web sayfasında adres olup olmadığını tarar ve konumunu pop-up içinde statik bir harita üzerinde gösterir. Uzantı, sayfa içeriğine bağlı olduğundan, hangi sayfaların alakalı olacağını tahmin eden kurallar tanımlayamaz. Bunun yerine, çağrı yaptığı sayfada adres bulunursa, pageAction.show
simgeyi renklendirmek ve uzantının bu sekmede kullanılabilir olduğunu belirtmek için kullanılır.
chrome.runtime.onMessage.addListener(function(req, sender) {
chrome.storage.local.set({'address': req.address})
chrome.pageAction.show(sender.tab.id);
chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
});
Uzantı simgelerini sağlayın
Uzantılar, onu temsil etmek için en az bir simge gerektirir. BMP, GIF, ICO ve JPEG dahil olmak üzere WebKit tarafından desteklenen tüm biçimler kabul edilse de, en iyi görsel sonuçları öneren PNG biçiminde simgeler sağlayın.
Araç çubuğu simgelerini belirtme
Araç çubuğuna özgü simgeler, manifest'te browser_action
veya page_action
altındaki "default_icon"
alanına kaydedilir. Birden fazla boyut eklemek, 16 dip alan için ölçeklendirme önerilir. Minimum olarak 16x16 ve 32x32 boyutları önerilir.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
"default_icon": {
"16": "extension_toolbar_icon16.png",
"32": "extension_toolbar_icon32.png"
}
}
...
}
Tüm simgeler kare biçiminde olmalıdır, aksi takdirde bozuk görünebilir. Simge sağlanmazsa Chrome, araç çubuğuna genel bir simge ekler.
Ek simgeler oluşturun ve kaydedin
Araç çubuğunun dışında kullanım için aşağıdaki boyutlarda ek simgeler ekleyin.
Simge Boyutu | Simge Kullanımı |
---|---|
16x16 | Uzantının sayfalarındaki site simgesi |
32x32 | Windows bilgisayarlar genellikle bu boyutu gerektirir. Bu seçeneğin sağlanması, boyut bozulmasının 48x48 seçeneğinin küçülmesini önler. |
48x48 | uzantı yönetimi sayfasında görüntülenir |
128x128 | Yüklemede ve Chrome Web Mağazası'nda görüntülenir |
Simgeleri, manifest'teki "icons"
alanının altında kaydedin.
{
"name": "My Awesome Extension",
...
"icons": {
"16": "extension_icon16.png",
"32": "extension_icon32.png",
"48": "extension_icon48.png",
"128": "extension_icon128.png"
}
...
}
Ek kullanıcı arayüzü özellikleri
Pop-up
Pop-up, kullanıcı araç çubuğu simgesini tıkladığında özel bir pencerede görüntülenen bir HTML dosyasıdır. Pop-up'lar web sayfalarına çok benzer şekilde çalışır; stil sayfalarına ve komut dosyası etiketlerine bağlantılar içerebilir, ancak satır içi JavaScript'e izin vermez.
Su İçme Etkinliği örnek pop-up'ında kullanılabilir zamanlayıcı seçenekleri görüntülenir. Kullanıcılar, sunulan düğmelerden birini tıklayarak alarm kurabilir.
<html>
<head>
<title>Water Popup</title>
</head>
<body>
<img src='./stay_hydrated.png' id='hydrateImage'>
<button id='sampleSecond' value='0.1'>Sample Second</button>
<button id='15min' value='15'>15 Minutes</button>
<button id='30min' value='30'>30 Minutes</button>
<button id='cancelAlarm'>Cancel Alarm</button>
<script src="popup.js"></script>
</body>
</html>
Pop-up, manifest dosyasına, tarayıcı veya sayfa işlemi altında kaydedilebilir.
{
"name": "Drink Water Event",
...
"browser_action": {
"default_popup": "popup.html"
}
...
}
Pop-up'lar, browserAction.setPopup
veya pageAction.setPopup
çağrılarıyla dinamik olarak da ayarlanabilir.
chrome.storage.local.get('signed_in', function(data) {
if (data.signed_in) {
chrome.browserAction.setPopup({popup: 'popup.html'});
} else {
chrome.browserAction.setPopup({popup: 'popup_sign_in.html'});
}
});
İpucu
Fareyle tarayıcı simgesinin üzerine gelen kullanıcılara kısa açıklamalar veya talimatlar sağlamak için bir ipucu kullanın.
İpuçları, manifest'teki "default_title"
alanında browser_action
veya page_action
yerine kaydedilir.
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
}
...
}
İpuçlarını browserAction.setTitle
ve pageAction.setTitle
çağrılarıyla da ayarlayabilir veya güncelleyebilirsiniz.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});
Özel yerel ayar dizeleri Internationalization (Uluslararası hale getirme) ile uygulanır. _locales
adında bir klasör içinde, ana dile özgü mesajlar için dizinler oluşturun. Örneğin:
_locales/en/messages.json
_locales/es/messages.json
Her dilin messages.json
içerisindeki mesajları biçimlendirin.
{
"__MSG_tooltip__": {
"message": "Hello!",
"description": "Tooltip Greeting."
}
}
{
"__MSG_tooltip__": {
"message": "Hola!",
"description": "Tooltip Greeting."
}
}
Yerelleştirmeyi etkinleştirmek için ipucu alanına mesaj yerine mesajın adını ekleyin.
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "__MSG_tooltip__"
}
...
}
Çok amaçlı adres çubuğu
Kullanıcılar, uzantı işlevlerini çok amaçlı adres çubuğu aracılığıyla başlatabilir. Manifest'e "omnibox"
alanını ekleyin ve bir anahtar kelime atayın. Çok Amaçlı Adres Çubuğu Yeni Sekme Arama örnek uzantısı, anahtar kelime olarak "nt" değerini kullanır.
{
"name": "Omnibox New Tab Search",\
...
"omnibox": { "keyword" : "nt" },
"default_icon": {
"16": "newtab_search16.png",
"32": "newtab_search32.png"
}
...
}
Kullanıcı çok amaçlı adres çubuğuna "nt" yazdığında uzantı etkinleştirilir. Kullanıcıya bunu bildirmek için, sağlanan 16x16 simgeyi gri tonlarlar ve çok amaçlı adres çubuğuna uzantı adının yanında ekler.
Uzantı, omnibox.onInputEntered
etkinliğini dinler. Tetiklendikten sonra, uzantı kullanıcının girişi için bir Google araması içeren yeni bir sekme açar.
chrome.omnibox.onInputEntered.addListener(function(text) {
// Encode user input for special characters , / ? : @ & = + $ #
var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
chrome.tabs.create({ url: newURL });
});
İçerik menüsü
Manifest'te "contextMenus"
izni vererek yeni içerik menüsü seçenekleri ekleyin.
{
"name": "Global Google Search",
...
"permissions": [
"contextMenus",
"storage"
],
"icons": {
"16": "globalGoogle16.png",
"48": "globalGoogle48.png",
"128": "globalGoogle128.png"
}
...
}
Yeni menü girişinin yanında 16x16 simge görüntülenir.
Arka plan komut dosyasında contextMenus.create
komutunu çağırarak bir içerik menüsü oluşturun. Bu işlem, runtime.onInstalled
işleyici etkinliği altında yapılmalıdır.
chrome.runtime.onInstalled.addListener(function() {
for (let key of Object.keys(kLocales)) {
chrome.contextMenus.create({
id: key,
title: kLocales[key],
type: 'normal',
contexts: ['selection'],
});
}
});
const kLocales = {
'com.au': 'Australia',
'com.br': 'Brazil',
'ca': 'Canada',
'cn': 'China',
'fr': 'France',
'it': 'Italy',
'co.in': 'India',
'co.jp': 'Japan',
'com.ms': 'Mexico',
'ru': 'Russia',
'co.za': 'South Africa',
'co.uk': 'United Kingdom'
};
Genel Google Arama içerik menüsü örneği, locales.js'deki listeden birden fazla seçenek oluşturur . Bir uzantı birden fazla içerik menüsü içerdiğinde, Google Chrome bunları otomatik olarak tek bir üst menüye daraltır.
Komutlar
Uzantılar, belirli komutları tanımlayabilir ve bunları bir tuş kombinasyonuna bağlayabilir. Manifest'te, "commands"
alanının altında bir veya daha fazla komut kaydedin.
{
"name": "Tab Flipper",
...
"commands": {
"flip-tabs-forward": {
"suggested_key": {
"default": "Ctrl+Shift+Right",
"mac": "Command+Shift+Right"
},
"description": "Flip tabs forward"
},
"flip-tabs-backwards": {
"suggested_key": {
"default": "Ctrl+Shift+Left",
"mac": "Command+Shift+Left"
},
"description": "Flip tabs backwards"
}
}
...
}
Komutlar, yeni veya alternatif tarayıcı kısayolları sağlamak için kullanılabilir. Tab Flipper örnek uzantısı, arka plan komut dosyasındaki commands.onCommand
etkinliğini dinler ve kayıtlı her kombinasyon için işlevselliği tanımlar.
chrome.commands.onCommand.addListener(function(command) {
chrome.tabs.query({currentWindow: true}, function(tabs) {
// Sort tabs according to their index in the window.
tabs.sort((a, b) => { return a.index < b.index; });
let activeIndex = tabs.findIndex((tab) => { return tab.active; });
let lastTab = tabs.length - 1;
let newIndex = -1;
if (command === 'flip-tabs-forward')
newIndex = activeIndex === 0 ? lastTab : activeIndex - 1;
else // 'flip-tabs-backwards'
newIndex = activeIndex === lastTab ? 0 : activeIndex + 1;
chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true});
});
});
Komutlar, uzantısıyla özel olarak çalışan bir tuş bağlama da oluşturabilir. Hello Extensions örneği, pop-up'ı açmak için bir komut verir.
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
},
"manifest_version": 2,
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
}
Uzantı bir browser_action
tanımladığından, pop-up dosyasını arka plan komut dosyası eklemeden açmak için komutlarda "execute_browser_action"
belirtebilir. page_action
kullanılıyorsa "execute_page_action"
ile değiştirilebilir. Hem tarayıcı hem de uzantı komutları aynı uzantıda kullanılabilir.
Sayfaları geçersiz kıl
Uzantı, Geçmiş, Yeni Sekme veya Yer İşaretleri web sayfasını geçersiz kılabilir ve özel bir HTML dosyasıyla değiştirebilir. Pop-up gibi özel mantık ve stil içerebilir ancak satır içi JavaScript'e izin vermez. Tek bir uzantı, mümkün olan üç sayfadan yalnızca birini geçersiz kılacak şekilde sınırlandırılmıştır.
Manifest'teki "chrome_url_overrides"
alanı altında bir geçersiz kılma sayfası kaydedin.
{
"name": "Awesome Override Extension",
...
"chrome_url_overrides" : {
"newtab": "override_page.html"
},
...
}
Bu sayfalar geçersiz kılınırken "newtab"
alanı, "bookmarks"
veya "history"
ile değiştirilmelidir.
<html>
<head>
<title>New Tab</title>
</head>
<body>
<h1>Hello World</h1>
<script src="logic.js"></script>
</body>
</html>