chrome.browserAction

Açıklama

Kullanılabilirlik

Aşağıdaki şekilde, adres çubuğunun sağındaki çok renkli kare, tarayıcı işlemine ait simgedir. Simgenin altında bir pop-up gösterilir.

Her zaman etkin olmayan bir simge oluşturmak istiyorsanız tarayıcı işlemi yerine sayfa işlemi kullanın.

Manifest

Tarayıcı işleminizi uzantı manifestinde şu şekilde 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 dip'lik alanı doldurmak için uygun boyuta ölçeklendirir. Ancak tam boyut sağlanmazsa bu ölçeklendirme, simgenin ayrıntılarını kaybetmesine veya bulanık görünmesine neden olabilir.

1,5x veya 1,2x gibi daha az yaygın ölçek faktörlerine sahip cihazlar giderek yaygınlaştığından simgeleriniz için birden fazla boyut sağlamanız önerilir. Bu sayede, simge görüntüleme boyutu değişirse farklı simgeler sağlamak için başka bir işlem 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

Tarayıcı işlemlerinde simge, ipucu, rozet ve pop-up olabilir.

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 dp'lik kare simge kullanın.

Simgeyi iki şekilde ayarlayabilirsiniz: statik bir resim kullanarak veya HTML5 canvas öğesini kullanarak. Statik resimler kullanmak basit uygulamalar için daha kolaydır ancak tuval öğesini kullanarak daha dinamik kullanıcı arayüzleri (ör. akıcı animasyon) oluşturabilirsiniz.

Statik resimler, BMP, GIF, ICO, JPEG veya PNG dahil olmak üzere WebKit'in gösterebileceği 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ı boyutlardaki bir dizi resim olarak tanımlanabilir. Gösterilecek gerçek resim, 16 dip piksel boyutuna en uygun olacak şekilde gruptan seçilir. Simge grubu herhangi bir boyuttaki simge spesifikasyonunu içerebilir ve Chrome en uygun olanı seçer.

İpucu

İpucunu ayarlamak için manifest dosyasındaki browser_action'ın 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 Uluslararası hale getirme konusuna bakın.

Rozet

Tarayıcı işlemleri isteğe bağlı olarak bir rozet (simgenin üzerine yerleştirilmiş bir metin) gösterebilir. Rozetler, tarayıcı işlemini güncelleyerek uzantının durumu hakkında az miktarda bilgi göstermeyi kolaylaştırır.

Rozetin alanı sınırlı olduğundan 4 karakter veya daha az olmalıdır.

Rozetin metnini ve rengini sırasıyla browserAction.setBadgeText ve browserAction.setBadgeBackgroundColor kullanarak ayarlayın.

Pop-up

Tarayıcı işleminde pop-up varsa kullanıcı, uzantının simgesini tıkladığında pop-up görünür. Pop-up, istediğiniz HTML içeriklerini barındırabilir ve içeriğine uyacak şekilde otomatik olarak boyutlandırılır. Pop-up pencere 25x25 pikselden küçük ve 800x600 pikselden büyük olamaz.

Tarayıcı işlemine pop-up eklemek için pop-up'ın içeriğini içeren bir HTML dosyası oluşturun. Manifest dosyasındaki default_popup bölümünün 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 aşağıdaki 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şlemleri kullanmayın. Bunun yerine page actions'ı kullanın.
• 16x16 dp alanın en iyi şekilde kullanıldığı büyük ve renkli simgeler kullanın. Tarayıcı işlemi simgeleri, sayfa işlemi simgelerinden biraz daha büyük ve kalın görünmelidir.
• Google Chrome'un tek renkli menü simgesini taklit etmeyin. Bu, temalarla iyi çalışmaz ve uzantılar biraz öne çıkmalıdır.
• Simgenize yumuşak kenarlar eklemek için alfa şeffaflığı kullanın. Birçok kişi tema kullandığından simgeniz çeşitli arka plan renklerinde güzel görünmelidir.
• Simgenizi sürekli olarak canlandırmayın. Bu sadece can sıkıcı.

Örnekler

Tarayıcı işlemlerini kullanmayla ilgili 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.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
): Promise<extensionTypes.ColorArray>

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.onClicked.addListener(
  callback: function,
)