Kullanıcı arayüzünü tasarlama

Uzantı kullanıcı arayüzü, amaca yönelik ve minimum düzeyde olmalıdır. Uzantıların kendisi gibi, Kullanıcı arayüzü, rahatsız edici bir şekilde göz atma deneyimini özelleştirmeli veya geliştirmelidir.

Bu kılavuzda, zorunlu ve isteğe bağlı kullanıcı arayüzü özellikleri açıklanmaktadır. Nasıl ve ne zaman yapıldığını anlamak için bir uzantı içinde farklı kullanıcı arayüzü öğeleri uygulamak için kullanılır.

Uzantıyı tüm sayfalarda etkinleştir

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

Tarayıcı işlemini kaydet

"browser_action" alanı manifeste kaydedilmiştir.

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

"browser_action" tanımlanması, simgenin renkli kalmasını sağlayarak uzantının kullanıcılar tarafından kullanılabileceğini gösterir. yardımcı olur.

Bir rozet ekleyin

Rozetler, tarayıcı simgesinin üstünde en fazla dört karakter içerecek şekilde renkli bir banner görüntüler. Yalnızca manifest dosyalarında "browser_action" öğesini tanımlayan uzantılar tarafından kullanılabilir.

Uzantının durumunu belirtmek için rozetler kullanın. Su İçme Etkinliği örneğinde bir "AÇIK" olarak görünen rozet kullanıcıya başarılı bir şekilde alarm ayarladığını gösterir ve uzantısı boşta.

chrome.browserAction.setBadgeText çağrısını ve banner rengini çağırarak rozet metnini ayarlayın chrome.browserAction.setBadgeBackgroundColor numaralı telefonu arayarak .

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

Uzantıyı belirli sayfalarda etkinleştirme

Bir uzantının özellikleri yalnızca tanımlanan koşullarda kullanılabildiğinde page_action parametresini kullanın.

Sayfa işlemi bildir

"page_action" alanı manifeste kaydedilmiştir.

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

"page_action" tanımlandığında simge yalnızca uzantı kullanıcılara sunulduğunda renklendirilir. aksi takdirde gri tonlamada görüntülenir.

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

chrome.declarativeContent Arka plan komut dosyasında runtime.onInstalled işleyiciyi kullanın. URL'ye göre sayfa işlemi örneği uzantısı, URL'nin bir "g" içermesi gerektiğini belirten bir koşul belirler. Koşul karşılanırsa uzantı declarativeContent.ShowPageAction() araması yapar.

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.

Mappy örnek uzantısı, bir web sayfasında adres olup olmadığını kontrol eder ve konumunu statik pop-up'ta gösterir. Uzantı, sayfa içeriğine bağlı olduğundan kural bildiremez Böylece hangi sayfaların alakalı olacağını tahmin edebilirsiniz. Bunun yerine, çağırdığı sayfada adres bulunursa Simgeyi renklendirmek ve uzantının ilgili sekmede kullanılabileceğini belirtmek için pageAction.show tuşlarına basın.

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ın temsil etmesi için en az bir simge gerekir. Simgeleri en iyi PNG biçiminde sağlayın görsel sonuçlar, ancak BMP, GIF, ICO ve JPEG gibi WebKit tarafından desteklenen tüm biçimler kabul edilir.

Araç çubuğu simgeleri atama

Araç çubuğuna özel simgeler şunun altındaki "default_icon" alanında kayıtlıdır: Manifest dosyasında browser_action veya page_action. Birden fazla boyut eklemek 16 derecelik alana göre ölçeklenmesi teşvik edilir. 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 bozuk olabilir. Simge sağlanmazsa Chrome, birini tıklayın.

Ek simgeler oluşturma ve kaydetme

Araç çubuğunun dışında kullanım için aşağıdaki boyutlarda ek simgeler ekleyin.

Simgeleri, "icons" alanının altındaki manifeste 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

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 şu kurala göre alarm kurdu: gösterilen düğmelerden birini tıklayarak.

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

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

Fareyle tarayıcının üzerine gelindiğinde kullanıcılara kısa açıklamalar veya talimatlar vermek için ipucu kullanın simgesini tıklayın.

İpuçları, "default_title" alanında browser_action veya page_action kayıtlıdır dosyası olarak gönderin.

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

İpuçlarını ayarlamak veya güncellemek için browserAction.setTitle ve pageAction.setTitle.

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

Özel yerel ayar dizeleri Uluslararası hale getirme ile uygulanır. Şuraya dizin oluşturun: _locales adlı bir klasör içinde kurum diline özel iletiler, örneğin:

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

Her dil için messages.json içinde iletileri biçimlendirin.

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

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

Yerelleştirmeyi etkinleştirmek için ipucu alanında 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, çok amaçlı adres çubuğu aracılığıyla uzantı işlevlerini çağırabilir. "omnibox" alanını şuraya dahil edin: manifest dosyasını açın ve bir anahtar kelime belirtin. Çok Amaçlı Adres Çubuğu Yeni Sekme Arama örnek uzantısı "nt" kullanır. olması anahtar kelime.

{
  "name": "Omnibox New Tab Search",\
  ...
  "omnibox": { "keyword" : "nt" },
  "default_icon": {
    "16": "newtab_search16.png",
    "32": "newtab_search32.png"
  }
  ...
}

Kullanıcı "nt" yazdığında uzantıyı çok amaçlı adres çubuğuna yazar. Bunu kullanıcıya bildirmek için sağlanan 16x16 simgeyi gri tonlamalı hale getirir ve uzantı adının yanındaki çok amaçlı adres çubuğuna bu simgeyi ekler.

Uzantı, omnibox.onInputEntered etkinliğini dinler. Tetiklendikten sonra uzantısı, kullanıcının girişine ilişkin Google aramasını 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" iznini 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 simgesi görüntülenir.

Arka plan komut dosyasında contextMenus.create yöntemini çağırarak bir içerik menüsü oluşturun. Bu runtime.onInstalled işleyici etkinliğinin 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 kitaplığı için bir değer olabilir . Bir uzantı birden fazla içerik menüsü içerdiğinde Google Chrome, tek bir üst menü olacak şekilde otomatik olarak daraltır.

Komutlar

Uzantılar, belirli komutları tanımlayıp bir anahtar kombinasyonuna bağlayabilir. Birini kaydedin veya "commands" alanının altındaki manifest'te daha fazla komut kullanabilirsiniz.

{
  "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 örneği uzantı, arka plan komut dosyasındaki commands.onCommand etkinliğini dinler ve işlevini kullanın.

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, özel olarak uzantısıyla çalışan bir anahtar bağlaması da oluşturabilir. Merhaba Uzantıları ö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 "execute_browser_action" öğesini şurada belirtebilir: arka plan komut dosyası eklemeden pop-up dosyasını açma komutlarını kullanın. Şunu kullanıyorsanız: page_action, "execute_page_action" ile değiştirilebilir. Tarayıcı ve uzantı komutları aynı uzantıda kullanılabilir.

Geçersiz kılma sayfaları

Bir uzantı Geçmiş, Yeni Sekme veya Yer İşaretleri web sayfasını geçersiz kılabilir ve özel HTML dosyası oluşturun. Pop-up gibi, özel mantık ve stil içerebilir, ancak satır içi JavaScript. Tek bir uzantının amacı, olası üç sayfadan yalnızca birinin geçersiz kılınmasıdır.

Manifest'te, "chrome_url_overrides" alanının altındaki bir geçersiz kılma sayfası kaydedin.

{
  "name": "Awesome Override Extension",
  ...

  "chrome_url_overrides" : {
    "newtab": "override_page.html"
  },
  ...
}

Bunları geçersiz kılarken "newtab" alanı, "bookmarks" veya "history" ile değiştirilmelidir. sayfalar.

<html>
  <head>
  <title>New Tab</title>
  </head>
  <body>
    <h1>Hello World</h1>
  <script src="logic.js"></script>
  </body>
</html>