chrome.browserAction

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

≤ MV2

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.

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

Chrome 88 ve sonraki sürümler

Ö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()

Söz 
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ümler

    callback parametresi şu şekilde görünür: 

    ()=>void

İlerlemeler

  • Promise<void>

    Chrome 88 ve sonraki sürümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

enable()

Söz 
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ümler

    callback parametresi şu şekilde görünür: 

    ()=>void

İlerlemeler

  • Promise<void>

    Chrome 88 ve sonraki sürümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

getBadgeBackgroundColor()

Söz 
chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

Tarayıcı işleminin arka plan rengini alır.

Parametreler

  • ayrıntılar

    TabDetails

  • geri çağırma

    Functions (isteğe bağlı)

    callback parametresi şu şekilde görünür: 

    (result: ColorArray)=>void

İlerlemeler

  • Promise<ColorArray>

    Chrome 88 ve sonraki sürümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

getBadgeText()

Söz 
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

    TabDetails

  • 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ümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

getPopup()

Söz 
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

    TabDetails

  • 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ümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

getTitle()

Söz 
chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
)

Tarayıcı işleminin başlığını alır.

Parametreler

  • ayrıntılar

    TabDetails

  • 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ümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

setBadgeBackgroundColor()

Söz 
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ümler

    callback parametresi şu şekilde görünür: 

    ()=>void

İlerlemeler

  • Promise<void>

    Chrome 88 ve sonraki sürümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

setBadgeText()

Söz 
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 ve text 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ümler

    callback parametresi şu şekilde görünür: 

    ()=>void

İlerlemeler

  • Promise<void>

    Chrome 88 ve sonraki sürümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

setIcon()

Söz 
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şitse scale * 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|object 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şitse scale * 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ümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

setPopup()

Söz 
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ümler

    callback parametresi şu şekilde görünür: 

    ()=>void

İlerlemeler

  • Promise<void>

    Chrome 88 ve sonraki sürümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

setTitle()

Söz 
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ümler

    callback parametresi şu şekilde görünür: 

    ()=>void

İlerlemeler

  • Promise<void>

    Chrome 88 ve sonraki sürümler

    Vaatler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırmaları kullanması gerekir.

Etkinlikler

onClicked

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

Bir tarayıcı işlem simgesi tıklandığında tetiklenir. Tarayıcı işleminde pop-up varsa etkinleşmez.

Parametreler

  • geri çağırma

    işlev

    callback parametresi şu şekilde görünür: 

    (tab: tabs.Tab)=>void