chrome.browserAction

Açıklama

Tarayıcı işlemlerini kullanarak simgeleri ana Google Chrome araç çubuğuna, adres çubuğunun sağına yerleştirin. Bir tarayıcı işlemi, simgesine ek olarak bir ipucu, rozet ve pop-up içerebilir.

Kullanılabilirlik

≤ MV2

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

Her zaman etkin olmayan bir simge oluşturmak istiyorsanız tarayıcı yerine bir sayfa işlemi kullanın eyleme dökülebilir.

Manifest

Tarayıcı işleminizi aşağıdaki gibi uzantı manifestine 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 boyut simgesi sağlayabilirsiniz. Chrome, en yakın olanı seçip ölçeklendirir. 16'lık alanı doldurmak için uygun boyuta getiriyoruz. Ancak tam boyut sağlanmazsa ölçekleme, simgenin ayrıntıların kaybolmasına veya bulanık görünmesine neden olabilir.

1,5x veya 1,2x gibi daha seyrek ölçeğe sahip cihazlar simgeleriniz için birden fazla boyut sağlamanız önerilir. Bu aynı zamanda, simgenin artık değiştiğinden farklı simgeler sağlamak için başka işlem yapmanız gerekmez!

Varsayılan simgeyi kaydetmek için kullanılan 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şlemi bir simge, bir ipucu, bir rozet ve bir pop-up içerebilir.

Simge

Chrome'daki tarayıcı işlem simgeleri, 16 çıkış (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 sonucu elde etmek için 16 diplik kare simge kullanın.

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

Statik resimler, WebKit'in gösterebileceği BMP, GIF, ICO, JPEG veya PNG gibi herhangi bir biçimde olabilir. Örneğin, paketlenmemiş uzantılar varsa resimler PNG biçiminde olmalıdır.

Simgeyi ayarlamak için manifest dosyasında browser_action'ın default_icon alanını kullanın veya browserAction.setIcon yöntemini kullanın.

Ekran piksel yoğunluğu (oran size_in_pixel / size_in_dip) olduğunda simgeyi düzgün bir şekilde görüntülemek için 1'den farklıysa simge, farklı boyutlara sahip bir dizi resim olarak tanımlanabilir. Asıl resim ekran, 16 dip piksel boyutuna en iyi uyacak şekilde gruptan seçilir. Simge grubu herhangi bir boyut simgesi spesifikasyonunu gördüğünüzde Chrome en uygun olanı seçer.

İpucu

İpucunu ayarlamak için manifest dosyasında browser_action default_title alanını kullanın veya browserAction.setTitle yöntemini çağırın. Şu sorgu için yerel ayara özel dizeler belirtebilirsiniz: default_title alanı; Ayrıntılar için Uluslararası hale getirme bölümüne bakın.

Rozet

Tarayıcı işlemleri isteğe bağlı olarak bir rozet (rozet, simgenin üzerine katmanlı bir metin parçası) görüntüleyebilir. Rozetler, tarayıcı işlemini güncelleyerek durumu hakkında daha fazla bilgi edinin.

Rozetin alanı sınırlı olduğundan en fazla 4 karakterden oluşmalıdır.

Rozetin metnini ve rengini ayarlamak için browserAction.setBadgeText ve Sırasıyla browserAction.setBadgeBackgroundColor.

Bir tarayıcı işleminde pop-up varsa kullanıcı uzantının simgesini tıkladığında pop-up görünür. İlgili içeriği oluşturmak için kullanılan pop-up istediğiniz herhangi bir HTML içeriğini içerebilir ve içeriğine uyacak ş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'ın içeriğiyle bir HTML dosyası oluşturun. Belirtin: manifest dosyasındaki browser_action default_popup alanına bir HTML dosyası ekleyin veya browserAction.setPopup yöntemini kullanarak giriş yapabilirsiniz.

İpuçları

En iyi görsel etki için aşağıdaki yönergeleri uygulayın:

  • Çoğu sayfada işe yarayan özellikler için tarayıcı işlemlerini kullanın.
  • Yalnızca birkaç sayfada işe yarayan özellikler için tarayıcı işlemlerini kullanmayın. sayfasını kullan işlemlerine bakın.
  • 16x16 boyutundaki düşüş alanından en iyi şekilde faydalanan büyük ve renkli simgeler kullanın. Tarayıcı işlem simgeleri sayfa işlem simgelerinden biraz daha büyük ve ağır görünmesi gerekir.
  • Google Chrome'un tek renkli menü simgesini taklit etmeyin. İş Listesi’ndeki gibi biraz göze çarpması gerekir.
  • Simgenize yumuşak kenarlar eklemek için alfa şeffaflığı kullanın. Birçok kişi temaları kullandığı için simgesinin çeşitli arka plan renklerinde güzel görünmesi gerekir.
  • Simgenize sürekli olarak animasyon yapmayın. Bu sadece can sıkıcı.

Örnekler

Tarayıcı işlemlerini kullanmaya ilişkin basit örnekleri examples/api/browserAction içinde bulabilirsiniz dizin. Diğer örnekler ve kaynak kodunun görüntülenmesiyle ilgili 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 'nı inceleyin.

Özellikler

  • tabId

    sayı isteğe bağlı

    Sorgu durumu için sekmenin kimliği. Herhangi bir sekme belirtilmezse sekmeye özgü olmayan durum döndürülür.

Yöntemler

disable()

Söz 'nı inceleyin.
chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

Bir sekme için tarayıcı işlemini devre dışı bırakır.

Parametreler

  • tabId

    sayı isteğe bağlı

    Tarayıcı işleminin değiştirileceği sekmenin kimliği.

  • geri çağırma

    işlev isteğe bağlı

    Chrome 67 ve sonraki sürümler 'nı inceleyin.

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

    () => void

İadeler

  • Taahhüt<void>

    Chrome 88 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

enable()

Söz 'nı inceleyin.
chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

Bir sekme için tarayıcı işlemini etkinleştirir. Varsayılan olarak etkin değerine ayarlanır.

Parametreler

  • tabId

    sayı isteğe bağlı

    Tarayıcı işleminin değiştirileceği sekmenin kimliği.

  • geri çağırma

    işlev isteğe bağlı

    Chrome 67 ve sonraki sürümler 'nı inceleyin.

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

    () => void

İadeler

  • Taahhüt<void>

    Chrome 88 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

getBadgeBackgroundColor()

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

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

Parametreler

  • ayrıntılar

    TabDetails

  • geri çağırma

    işlev isteğe bağlı

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

    (result: ColorArray) => void

İadeler

  • Promise&lt;ColorArray&gt;

    Chrome 88 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

getBadgeText()

Söz 'nı inceleyin.
chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
)

Tarayıcı işleminin rozet metnini alır. Herhangi bir sekme belirtilmezse sekmeye özel olmayan rozet metni döndürülür.

Parametreler

  • ayrıntılar

    TabDetails

  • geri çağırma

    işlev isteğe bağlı

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

    (result: string) => void

    • sonuç

      dize

İadeler

  • Promise<dize>

    Chrome 88 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

getPopup()

Söz 'nı inceleyin.
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

    işlev isteğe bağlı

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

    (result: string) => void

    • sonuç

      dize

İadeler

  • Promise<dize>

    Chrome 88 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

getTitle()

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

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

Parametreler

  • ayrıntılar

    TabDetails

  • geri çağırma

    işlev isteğe bağlı

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

    (result: string) => void

    • sonuç

      dize

İadeler

  • Promise<dize>

    Chrome 88 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

setBadgeBackgroundColor()

Söz 'nı inceleyin.
chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

Rozetin arka plan rengini ayarlar.

Parametreler

  • ayrıntılar

    nesne

    • renk

      string | ColorArray

      Rozetin RGBA rengini oluşturan 0-255 aralığındaki dört tam sayıdan oluşan 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 işler.

    • tabId

      sayı isteğe bağlı

      Değişikliği, belirli bir sekmenin seçildiği zamanla sınırlar. Sekme kapatıldığında otomatik olarak sıfırlanır.

  • geri çağırma

    işlev isteğe bağlı

    Chrome 67 ve sonraki sürümler 'nı inceleyin.

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

    () => void

İadeler

  • Taahhüt<void>

    Chrome 88 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

setBadgeText()

Söz 'nı inceleyin.
chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

Tarayıcı işlemi için rozet metnini ayarlar. Rozet, simgenin üstünde gösterilir.

Parametreler

  • ayrıntılar

    nesne

    • tabId

      sayı isteğe bağlı

      Değişikliği, belirli bir sekmenin seçildiği zamanla sınırlar. Sekme kapatıldığında otomatik olarak sıfırlanır.

    • text (metin)

      dize isteğe bağlı

      İstediğiniz sayıda karakter aktarılabilir ancak alana en fazla dört karakter sığabilir. Boş bir dize ('') geçilirse rozet metni temizlenir. tabId belirtilirse ve text null ise belirtilen sekmedeki metin temizlenir ve varsayılan olarak genel rozet metnine ayarlanır.

  • geri çağırma

    işlev isteğe bağlı

    Chrome 67 ve sonraki sürümler 'nı inceleyin.

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

    () => void

İadeler

  • Taahhüt<void>

    Chrome 88 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

setIcon()

Söz 'nı inceleyin.
chrome.browserAction.setIcon(
  details: object,
  callback?: function,
)

Tarayıcı işleminin simgesini ayarlar. Simge, bir resim dosyasının yolu, bir tuval öğesinden piksel verileri veya bunlardan birinin sözlüğü olarak belirtilebilir. path veya imageData özelliği belirtilmelidir.

Parametreler

  • ayrıntılar

    nesne

    • resimVerisi

      ImageData | nesne isteğe bağlı

      Bir ImageData nesnesi veya sözlük {size -> ImageData} yer alır. Simge sözlük olarak belirtilirse kullanılan resim, ekranın piksel yoğunluğuna bağlı olarak seçilir. Bir ekran alanı birimine sığan resim pikseli sayısı scale ise scale * n boyutunda bir resim seçilir. Burada n, kullanıcı arayüzündeki simgenin boyutudur. En az bir resim belirtilmelidir. 'details.imageData = foo' koduna dikkat edin 'details.imageData = {'16': foo}' ile eşdeğerdir

    • yol

      string | nesne isteğe bağlı

      Göreli bir görsel yolu veya bir sözlük {size -> göreli görüntü yolu} ayarlanacak bir simgeye işaret eder. Simge sözlük olarak belirtilirse kullanılan resim, ekranın piksel yoğunluğuna bağlı olarak seçilir. Bir ekran alanı birimine sığan resim pikseli sayısı scale ise scale * n boyutunda bir resim seçilir. Burada n, kullanıcı arayüzündeki simgenin boyutudur. En az bir resim belirtilmelidir. "details.path = foo"nun 'details.path = {'16': foo}' ile eşdeğerdir

    • tabId

      sayı isteğe bağlı

      Değişikliği, belirli bir sekmenin seçildiği zamanla sınırlar. Sekme kapatıldığında otomatik olarak sıfırlanır.

  • geri çağırma

    işlev isteğe bağlı

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

    () => void

İadeler

  • Taahhüt<void>

    Chrome 116 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

setPopup()

Söz 'nı inceleyin.
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

      sayı isteğe bağlı

      Değişikliği, belirli bir sekmenin seçildiği zamanla sınırlar. Sekme kapatıldığında otomatik olarak sıfırlanır.

  • geri çağırma

    işlev isteğe bağlı

    Chrome 67 ve sonraki sürümler 'nı inceleyin.

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

    () => void

İadeler

  • Taahhüt<void>

    Chrome 88 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

setTitle()

Söz 'nı inceleyin.
chrome.browserAction.setTitle(
  details: object,
  callback?: function,
)

Tarayıcı işleminin başlığını ayarlar. Bu başlık, ipucunda gösterilir.

Parametreler

  • ayrıntılar

    nesne

    • tabId

      sayı isteğe bağlı

      Değişikliği, belirli bir sekmenin 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ülemesi gereken dize.

  • geri çağırma

    işlev isteğe bağlı

    Chrome 67 ve sonraki sürümler 'nı inceleyin.

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

    () => void

İadeler

  • Taahhüt<void>

    Chrome 88 ve sonraki sürümler 'nı inceleyin.

    Vaatler yalnızca Manifest V3 ve sonraki sürümler için desteklenir. Diğer platformların geri çağırma yapması gerekir.

Etkinlikler

onClicked

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

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

Parametreler

  • geri çağırma

    işlev

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

    (tab: tabs.Tab) => void