Açıklama
Simgeleri, adres çubuğunun sağındaki ana Google Chrome araç çubuğuna yerleştirmek için tarayıcı işlemlerini kullanın. Bir tarayıcı işleminde simgesine ek olarak bir ipucu, rozet ve pop-up bulunabilir.
Kullanılabilirlik
Aşağıdaki şekilde, adres çubuğunun sağındaki çok renkli kare bir tarayıcı işleminin simgesidir. Simgenin altında bir pop-up gösteriliyor.
Her zaman etkin olmayan bir simge oluşturmak isterseniz bir tarayıcı işlemi yerine bir sayfa işlemi kullanın.
Manifest
Tarayıcı işleminizi uzantı manifestine aşağıdaki gibi kaydedin:
{
"name": "My extension",
...
"browser_action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
},
"default_title": "Google Mail", // optional, shown in tooltip
"default_popup": "popup.html" // optional
},
...
}
Chrome'da kullanılacak herhangi bir boyutta simge sağlayabilirsiniz. Chrome en yakın olanı seçer ve 16'lık alanı doldurmak için uygun boyuta ölçeklendirir. Ancak tam boyut sağlanmazsa bu ölçeklendirme, simgenin ayrıntıları kaybetmesine veya belirsiz görünmesine neden olabilir.
1,5x veya 1,2x gibi daha az kullanılan ölçek faktörlerine sahip cihazlar giderek yaygınlaştığından, simgeleriniz için birden fazla boyut sağlamanız teşvik edilir. Bu sayede, simge görüntü boyutu değişirse farklı simgeler sağlamak için başka bir çalışma yapmanız gerekmez.
Varsayılan simgeyi kaydetmek için eski söz dizimi hâlâ desteklenmektedir:
{
"name": "My extension",
...
"browser_action": {
...
"default_icon": "images/icon32.png" // optional
// equivalent to "default_icon": { "32": "images/icon32.png" }
},
...
}
Kullanıcı arayüzünün bölümleri
Bir tarayıcı işleminde simge, ipucu, rozet ve pop-up bulunabilir.
Simge
Chrome'daki tarayıcı işlemi simgeleri 16 dip (cihazdan bağımsız piksel) genişliğinde ve yüksekliğindedir. Daha büyük simgeler, sığacak şekilde yeniden boyutlandırılır ancak en iyi sonuçlar için 16 altlık kare simge kullanın.
Simgeyi iki şekilde ayarlayabilirsiniz: statik resim kullanarak veya HTML5 kanvas öğesini kullanarak. Basit uygulamalar için statik resimler kullanmak daha kolaydır ancak tuval öğesini kullanarak daha dinamik kullanıcı arayüzleri (ör. yumuşak animasyonlar) oluşturabilirsiniz.
Statik resimler, WebKit'in gösterebileceği BMP, GIF, ICO, JPEG veya PNG gibi herhangi bir biçimde olabilir. Paketi açılmış uzantılarda resimler PNG biçiminde olmalıdır.
Simgeyi ayarlamak için manifest dosyasındaki browser_action öğesinin default_icon alanını kullanın veya browserAction.setIcon
yöntemini çağırın.
Ekran piksel yoğunluğu (oran size_in_pixel / size_in_dip
) 1'den farklı olduğunda simgenin düzgün şekilde gösterilmesi için simge, farklı boyutlara sahip resim grubu olarak tanımlanabilir. Görüntülenecek gerçek resim, 16 dip piksel boyutuna en iyi sığdırmak için ayar içinden seçilir. Simge grubu, herhangi bir boyut simge
spesifikasyonunu içerebilir. Chrome en uygun olanı seçer.
İpucu
İpucunu ayarlamak için manifest öğesinde browser_action öğesinin default_title alanını kullanın veya browserAction.setTitle
yöntemini çağırın. default_title alanı için yerel ayara özel dizeler belirtebilirsiniz. Ayrıntılar için Internationalization (Uluslararası hale getirme) bölümüne bakın.
Rozet
Tarayıcı işlemleri isteğe bağlı olarak bir rozet (simgenin üzerine yerleştirilmiş bir metin) görüntüleyebilir. Rozetler, uzantının durumu hakkında az miktarda bilgi görüntülemek için tarayıcı işlemini güncellemeyi kolaylaştırır.
Rozette alan sınırlı olduğu için en fazla 4 karakterden oluşmalıdır.
browserAction.setBadgeText
ve browserAction.setBadgeBackgroundColor
kullanarak rozetin metnini ve rengini belirleyin.
Pop-up
Bir tarayıcı işleminin pop-up'ı varsa kullanıcı, uzantının simgesini tıkladığında pop-up görüntülenir. Pop-up, istediğiniz HTML içeriğini içerebilir ve içeriğine sığacak şekilde otomatik olarak boyutlandırılır. Pop-up 25x25'ten küçük ve 800x600'den büyük olamaz.
Tarayıcı işleminize pop-up eklemek için pop-up içeriğini barındıran bir HTML dosyası oluşturun. Manifest dosyasındaki default_popup öğesinin default_popup alanında HTML dosyasını belirtin veya browserAction.setPopup
yöntemini çağırın.
İpuçları
En iyi görsel etki için şu yönergeleri uygulayın:
- Çoğu sayfada mantıklı olan özellikler için tarayıcı işlemlerini kullanın.
- Yalnızca birkaç sayfa için anlamlı olan özellikler için tarayıcı işlemlerini kullanmayın. Bunun yerine sayfa işlemlerini kullanın.
- 16x16 boyutundaki alanı en iyi şekilde kullanan büyük, renkli simgeler kullanın. Tarayıcı işlemi simgeleri, sayfa işlemi simgelerinden biraz daha büyük ve ağır görünmelidir.
- Google Chrome'un tek renkli menü simgesini taklit etmeye çalışmayın. Bu durum temalarla pek iyi sonuç vermez. Yine de uzantıların biraz öne çıkması gerekir.
- Simgenize yumuşak kenarlar eklemek için alfa şeffaflığını kullanın. Birçok kişi tema kullandığından simgeniz çeşitli arka plan renklerinde güzel görünmelidir.
- Simgeniz için sürekli animasyon yapmayın. Bu çok sinir bozucu.
Örnekler
Tarayıcı işlemlerini kullanmaya ilişkin basit örnekleri examples/api/browserAction dizininde bulabilirsiniz. Diğer örnekler ve kaynak kodunu görüntüleme konusunda yardım için Örnekler bölümüne bakın.
Türler
ColorArray
Tür
[sayı, sayı, sayı, sayı]
ImageDataType
Bir resmin piksel verileri. Bir ImageData nesnesi olmalıdır (örneğin, bir canvas
öğesinden).
Tür
ImageData
TabDetails
Özellikler
-
tabId
numara isteğe bağlı
Durumun sorgulanacağı sekmenin kimliği. Herhangi bir sekme belirtilmezse sekmeye özgü olmayan durum döndürülür.
Yöntemler
disable()
chrome.browserAction.disable(
tabId?: number,
callback?: function,
)
Bir sekme için tarayıcı işlemini devre dışı bırakır.
Parametreler
-
tabId
numara isteğe bağlı
Tarayıcı işleminin değiştirileceği sekmenin kimliği.
-
geri çağırma
Functions (isteğe bağlı)
Chrome 67 ve sonraki sürümlercallback
parametresi şu şekilde görünür:() => void
İlerlemeler
-
Promise<void>
Chrome 88 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.
enable()
chrome.browserAction.enable(
tabId?: number,
callback?: function,
)
Sekme için tarayıcı işlemini etkinleştirir. Varsayılan olarak etkindir.
Parametreler
-
tabId
numara isteğe bağlı
Tarayıcı işleminin değiştirileceği sekmenin kimliği.
-
geri çağırma
Functions (isteğe bağlı)
Chrome 67 ve sonraki sürümlercallback
parametresi şu şekilde görünür:() => void
İlerlemeler
-
Promise<void>
Chrome 88 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.
getBadgeBackgroundColor()
chrome.browserAction.getBadgeBackgroundColor(
details: TabDetails,
callback?: function,
)
Tarayıcı işleminin arka plan rengini alır.
Parametreler
-
ayrıntılar
-
geri çağırma
Functions (isteğe bağlı)
callback
parametresi şu şekilde görünür:(result: ColorArray) => void
-
sonuç
-
İlerlemeler
-
Promise<ColorArray>
Chrome 88 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.
getBadgeText()
chrome.browserAction.getBadgeText(
details: TabDetails,
callback?: function,
)
Tarayıcı işleminin rozet metnini alır. Herhangi bir sekme belirtilmezse sekmeye özgü olmayan rozet metni döndürülür.
Parametreler
-
ayrıntılar
-
geri çağırma
Functions (isteğe bağlı)
callback
parametresi şu şekilde görünür:(result: string) => void
-
sonuç
dize
-
İlerlemeler
-
Söz<dize>
Chrome 88 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.
getPopup()
chrome.browserAction.getPopup(
details: TabDetails,
callback?: function,
)
Bu tarayıcı işlemi için pop-up olarak ayarlanan HTML dokümanını alır.
Parametreler
-
ayrıntılar
-
geri çağırma
Functions (isteğe bağlı)
callback
parametresi şu şekilde görünür:(result: string) => void
-
sonuç
dize
-
İlerlemeler
-
Söz<dize>
Chrome 88 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.
getTitle()
chrome.browserAction.getTitle(
details: TabDetails,
callback?: function,
)
Tarayıcı işleminin başlığını alır.
Parametreler
-
ayrıntılar
-
geri çağırma
Functions (isteğe bağlı)
callback
parametresi şu şekilde görünür:(result: string) => void
-
sonuç
dize
-
İlerlemeler
-
Söz<dize>
Chrome 88 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.
setBadgeBackgroundColor()
chrome.browserAction.setBadgeBackgroundColor(
details: object,
callback?: function,
)
Rozetin arka plan rengini ayarlar.
Parametreler
-
ayrıntılar
nesne
-
renk
dize | ColorArray
Rozetin RGBA rengini oluşturan, 0-255 aralığında dört tam sayıdan oluşan bir dizi. CSS onaltılık renk değerine sahip bir dize de olabilir; örneğin,
#FF0000
veya#F00
(kırmızı). Renkleri tam opaklıkta oluşturur. -
tabId
numara isteğe bağlı
Değişikliği, belirli bir sekme seçildiği zamanla sınırlar. Sekme kapatıldığında otomatik olarak sıfırlanır.
-
-
geri çağırma
Functions (isteğe bağlı)
Chrome 67 ve sonraki sürümlercallback
parametresi şu şekilde görünür:() => void
İlerlemeler
-
Promise<void>
Chrome 88 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.
setBadgeText()
chrome.browserAction.setBadgeText(
details: object,
callback?: function,
)
Tarayıcı işlemi için rozet metnini ayarlar. Rozet, simgenin üstünde görüntülenir.
Parametreler
-
ayrıntılar
nesne
-
tabId
numara isteğe bağlı
Değişikliği, belirli bir sekme seçildiği zamanla sınırlar. Sekme kapatıldığında otomatik olarak sıfırlanır.
-
text (metin)
string isteğe bağlı
İstenilen sayıda karakter aktarılabilir, ancak alana yalnızca yaklaşık dört karakter sığabilir. Boş bir dize (
''
) iletilirse rozet metni temizlenir.tabId
belirtilirse vetext
null değerine ayarlanırsa belirtilen sekmenin metni temizlenir ve varsayılan olarak global rozet metni kullanılır.
-
-
geri çağırma
Functions (isteğe bağlı)
Chrome 67 ve sonraki sürümlercallback
parametresi şu şekilde görünür:() => void
İlerlemeler
-
Promise<void>
Chrome 88 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.
setIcon()
chrome.browserAction.setIcon(
details: object,
callback?: function,
)
Tarayıcı işlemi için simgeyi ayarlar. Simge; bir resim dosyasının yolu, tuval öğesindeki piksel verileri veya bunlardan birinin sözlüğü olarak belirtilebilir. path
veya imageData
özelliği belirtilmelidir.
Parametreler
-
ayrıntılar
nesne
-
imageData
ImageData | nesne isteğe bağlı
Ayarlanacak bir simgeyi temsil eden ImageData nesnesi veya sözlük {size -> ImageData}. Simge sözlük olarak belirtilmişse kullanılan resim, ekranın piksel yoğunluğuna bağlı olarak seçilir. Bir ekran alanı birimine sığan resim piksellerinin sayısı
scale
değerine eşitsescale
* n boyutunda bir resim seçilir. Burada n, kullanıcı arayüzündeki simgenin boyutudur. En az bir resim belirtilmelidir. 'details.imageData = foo' öğesinin 'details.imageData = {'16': foo}' değerine eşdeğer olduğunu unutmayın. -
yol
string | nesne isteğe bağlı
Ayarlanacak simgeye işaret eden göreli bir resim yolu veya sözlük {boyut -> göreli resim yolu}. Simge sözlük olarak belirtilmişse kullanılan resim, ekranın piksel yoğunluğuna bağlı olarak seçilir. Bir ekran alanı birimine sığan resim piksellerinin sayısı
scale
değerine eşitsescale
* n boyutunda bir resim seçilir. Burada n, kullanıcı arayüzündeki simgenin boyutudur. En az bir resim belirtilmelidir. 'details.path = foo', 'details.path = {'16': foo}' ile eşdeğerdir -
tabId
numara isteğe bağlı
Değişikliği, belirli bir sekme seçildiği zamanla sınırlar. Sekme kapatıldığında otomatik olarak sıfırlanır.
-
-
geri çağırma
Functions (isteğe bağlı)
callback
parametresi şu şekilde görünür:() => void
İlerlemeler
-
Promise<void>
Chrome 116 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.
setPopup()
chrome.browserAction.setPopup(
details: object,
callback?: function,
)
Kullanıcı, tarayıcı işlem simgesini tıkladığında pop-up olarak açılacak HTML dokümanını ayarlar.
Parametreler
-
ayrıntılar
nesne
-
pop-up
dize
Pop-up'ta gösterilecek HTML dosyasının göreli yolu. Boş dizeye (
''
) ayarlanırsa pop-up gösterilmez. -
tabId
numara isteğe bağlı
Değişikliği, belirli bir sekme seçildiği zamanla sınırlar. Sekme kapatıldığında otomatik olarak sıfırlanır.
-
-
geri çağırma
Functions (isteğe bağlı)
Chrome 67 ve sonraki sürümlercallback
parametresi şu şekilde görünür:() => void
İlerlemeler
-
Promise<void>
Chrome 88 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.
setTitle()
chrome.browserAction.setTitle(
details: object,
callback?: function,
)
Tarayıcı işleminin başlığını ayarlar. Bu başlık, ipucunda görünür.
Parametreler
-
ayrıntılar
nesne
-
tabId
numara isteğe bağlı
Değişikliği, belirli bir sekme seçildiği zamanla sınırlar. Sekme kapatıldığında otomatik olarak sıfırlanır.
-
title
dize
Fareyle üzerine gelindiğinde tarayıcı işleminin görüntüleneceği dize.
-
-
geri çağırma
Functions (isteğe bağlı)
Chrome 67 ve sonraki sürümlercallback
parametresi şu şekilde görünür:() => void
İlerlemeler
-
Promise<void>
Chrome 88 ve sonraki sürümlerVaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.