Kullanıcı arayüzünü tasarlama

Uzantı kullanıcı arayüzü amaca uygun ve minimal olmalıdır. Uzantıların kendisi gibi, kullanıcı arayüzü de göz atma deneyimini dikkat dağıtmadan özelleştirmeli veya geliştirmelidir.

Bu kılavuzda, zorunlu ve isteğe bağlı kullanıcı arayüzü özellikleri ele alınmaktadır. Bu bilgileri, bir uzantıda farklı kullanıcı arayüzü öğelerini nasıl ve ne zaman uygulayacağınızı anlamak için kullanın.

Uzantıyı tüm sayfalarda etkinleştirme

Bir uzantının özellikleri çoğu durumda işlevsel olduğunda browser_action kullanın.

Tarayıcı işlemini kaydetme

Manifest'te "browser_action" alanı kayıtlı.

{
  "name": "My Awesome browser_action Extension",
  ...
  "browser_action": {
    ...
  }
  ...
}

"browser_action" tanımlandığında simge renkli kalır ve uzantının kullanıcılar tarafından kullanılabildiğini gösterir.

Rozet ekleyin

Rozetler, tarayıcı simgesinin üzerinde en fazla dört karakter içeren renkli bir banner gösterir. Yalnızca manifestlerinde "browser_action" bildiren uzantılar tarafından kullanılabilirler.

Uzantının durumunu belirtmek için rozetler kullanın. Su İçme Etkinliği örneğinde, kullanıcıya alarmı başarıyla ayarladığını göstermek için "AÇIK" yazan bir rozet gösterilir. Uzantı boşta olduğunda ise hiçbir şey gösterilmez.

chrome.browserAction.setBadgeText işlevini çağırarak rozetin metnini, chrome.browserAction.setBadgeBackgroundColor işlevini çağırarak da banner'ın rengini ayarlayın .

chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});

Uzantıyı belirli sayfalarda etkinleştirme

Bir uzantının özellikleri yalnızca belirli koşullar altında kullanılabiliyorsa page_action'ı kullanın.

Sayfa işlemini tanımla

Manifest'te "page_action" alanı kayıtlı.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    ...
  }
  ...
}

"page_action" değerini belirtmek, simgeyi yalnızca uzantı kullanıcılar tarafından kullanılabilir olduğunda renklendirir. Aksi takdirde, simge gri tonlarda gösterilir.

Uzantıyı etkinleştirme kurallarını tanımlama

Bir arka plan komut dosyasında runtime.onInstalled dinleyicisi altında chrome.declarativeContent işlevini ç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 "g" harfini içermesi koşulunu belirler. Koşul karşılanırsa uzantı declarativeContent.ShowPageAction() işlevini ç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ştirme veya devre dışı bırakma

"page_action" kullanan uzantılar, pageAction.show ve pageAction.hide çağrıları yapılarak dinamik olarak etkinleştirilebilir ve devre dışı bırakılabilir.

Mappy örnek uzantısı, bir web sayfasında adres tarar ve konumunu pop-up penceresinde statik bir haritada gösterir. Uzantı, sayfa içeriğine bağımlı olduğundan hangi sayfaların alaka düzeyi yüksek olacağını tahmin etmek için kurallar tanımlayamaz. Bunun yerine, bir sayfada adres bulunursa simgeyi renklendirmek ve uzantının o sekmede kullanılabileceğini belirtmek için pageAction.show çağrısı yapı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ğlama

Uzantılar için en az bir simge gerekir. En iyi görsel sonuçlar için PNG biçiminde simgeler sağlayın. Bununla birlikte, BMP, GIF, ICO ve JPEG dahil olmak üzere WebKit tarafından desteklenen tüm biçimler kabul edilir.

Araç çubuğu simgelerini belirleme

Araç çubuğuna özgü simgeler, manifest dosyasında browser_action veya page_action altında "default_icon" alanına kaydedilir. 16'lı dip alanı için ölçeklendirme yapmak üzere birden fazla boyut eklemeniz önerilir. En az 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 olmalıdır. Aksi takdirde bozulabilirler. Simge sağlanmazsa Chrome, araç çubuğuna genel bir simge ekler.

Ek simgeler oluşturma ve kaydetme

Araç çubuğu dışında kullanılmak üzere aşağıdaki boyutlarda ek simgeler ekleyin.

Manifest dosyasındaki "icons" alanı altında kayıt simgeleri.

{
  "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

Pop-up, kullanıcı araç çubuğu simgesini tıkladığında özel bir pencerede gösterilen 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österilir. Kullanıcılar, sağlanan düğmelerden birini tıklayarak alarm kurar.

<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, manifestte tarayıcı işlemi 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ılarak da dinamik olarak 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'});
  }
});

İpucu

Kullanıcılar tarayıcı simgesinin üzerine geldiğinde kısa açıklamalar veya talimatlar vermek için ipucu kullanın.

İpuçları, manifest dosyasındaki "default_title" alanı browser_action veya page_action içinde kaydedilir.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

Açıklama metinleri, browserAction.setTitle ve pageAction.setTitle çağrıları yapılarak da ayarlanabilir veya güncellenebilir.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});

Özel yerel dizeler, uluslararasılaştırma ile uygulanır. _locales adlı bir klasörde dile özgü mesajları barındırmak için aşağıdaki gibi dizinler oluşturun:

• _locales/en/messages.json
• _locales/es/messages.json

Her dilin messages.json içindeki ileti biçimlerini kullanın.

{
  "__MSG_tooltip__": {
      "message": "Hello!",
      "description": "Tooltip Greeting."
  }
}

{
  "__MSG_tooltip__": {
      "message": "Hola!",
      "description": "Tooltip Greeting."
  }
}

Yerelleştirmeyi etkinleştirmek için ipucu alanına ileti yerine iletinin adını ekleyin.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "__MSG_tooltip__"
  }
...
}

Çok amaçlı adres çubuğu

Kullanıcılar, omnibox aracılığıyla uzantı işlevini çağırabilir. Manifest dosyasına "omnibox" alanını ekleyin ve bir anahtar kelime belirleyin. Çok Amaçlı Adres Çubuğu Yeni Sekme Arama örnek uzantısı, anahtar kelime olarak "nt"yi 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. Bunu kullanıcıya bildirmek için, sağlanan 16x16 simgeyi gri tonlarda gösterir ve uzantı adının yanındaki çok amaçlı adres çubuğuna ekler.

Uzantı, omnibox.onInputEntered etkinliğini dinler. Uzantı tetiklendikten sonra kullanıcının girişiyle ilgili 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 dosyasında "contextMenus" iznini vererek yeni bağlam menüsü seçenekleri ekleyin.

{
  "name": "Global Google Search",
  ...
  "permissions": [
    "contextMenus",
    "storage"
  ],
  "icons": {
    "16": "globalGoogle16.png",
    "48": "globalGoogle48.png",
    "128": "globalGoogle128.png"
  }
  ...
}

16x16 simgesi, yeni menü girişinin yanında gösterilir.

Arka plan komut dosyasında contextMenus.create işlevini çağırarak bir bağlam 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 dosyasındaki listeden birden fazla seçenek oluşturur . Bir uzantı birden fazla bağlam menüsü içerdiğinde Google Chrome bunları otomatik olarak tek bir üst menüde daraltır.

Komutlar

Uzantılar belirli komutlar tanımlayabilir ve bunları bir tuş kombinasyonuna bağlayabilir. Manifest dosyasında "commands" alanı 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 her kayıtlı kombinasyon için işlevsellik 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ğinde, pop-up'ı açma komutu veriliyor.

{
  "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ı içermeden açmak için komutlarda "execute_browser_action" belirtebilir. page_action kullanılıyorsa "execute_page_action" ile değiştirilebilir. Aynı uzantıda hem tarayıcı hem de uzantı komutları kullanılabilir.

Sayfaları geçersiz kılma

Uzantılar, 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ı, olası üç sayfadan yalnızca birini geçersiz kılabilir.

Manifest'te "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>