Bu sayfa, Cloud Translation API ile çevrilmiştir.

Kullanıcı arayüzünü tasarlama

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, 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.

Pop-up örnek ekran görüntüsü

<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'});
  }
});

Fareyle tarayıcı simgesinin üzerine gelen kullanıcılara kısa açıklamalar veya talimatlar sağlamak için bir ipucu kullanın.

Örnek bir ipucunun ekran görüntüsü

İ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.

Etkin Çok Amaçlı Adres Çubuğu Uzantısı

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.

Birden Fazla İçerik Menüsü Daraltılacak

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>