Bu, uzantılarda bulunan kullanıcı arayüzü öğelerinin bir kataloğudur. Her giriş şunları içerir:
- Öğenin bir resmi (varsa).
- Ne işe yaradığının bir açıklaması.
- İlgili arayüz öğeleri (varsa).
- Uygulama talimatlarının ve kod örneklerinin bağlantıları.
Bu öğeler, uzantı özelliklerini çağırmanın farklı yollarıdır. Bunların tümünü uygulamanız gerekmez. Hatta bazı kullanım alanlarında bunların hiçbiri kullanılmayabilir. Örneğin, daha kısa bir bağlantı, klavye kısayolu kullanarak görüntülenen URL üzerinde işlem yapabilir ve kısaltılmış bağlantıyı programatik olarak panoya yerleştirebilir.
İşlemler
İşlem, bir kullanıcı uzantınızın işlem simgesini tıkladığında gerçekleşen işlemdir. Bir işlem, İşlem API'sini kullanarak bir uzantı özelliğini başlatabilir veya kullanıcıların birden çok uzantı özelliğini çağırmasına olanak veren bir pop-up açabilir. Bir ipucu kullanarak kullanıcılara işlemin ne yaptığını anlatın.
![Hem sabitlenmiş hem de sabitlemesi kaldırılmış uzantı.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/pinned-unpinned.png?authuser=5&hl=tr)
İşlem oluşturmayı öğrenmek için İşlem uygulama bölümüne bakın veya işlem örneklerini inceleyin.
İşlem simgeleri
Bir uzantının temsil edilmesi için en az bir simge gerekir. Kullanıcılar bir işlemi çağırmak için simgeyi tıklar. Bu işlem ister Action API'yi kullanarak bir uzantı özelliğini çağırıyor ister bir pop-up açıyor olsun.
![Google sözlük uzantısının simgesi.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/icon.png?authuser=5&hl=tr)
Uzantı durumu veya kullanıcının işlem yapmasının gerekli olduğu bilgileri iletmek için simgeye burada "rozet" denen bir etiket de ekleyebilirsiniz.
İşlem oluşturmayı öğrenmek için İşlem uygulama bölümüne bakın veya işlem örneklerini inceleyin.
Rozetler
Rozetler, uzantı durumu gibi şeyleri veya kullanıcının işlem yapmasını gerektirdiğini belirtmek için işlem simgesinin üst kısmına yerleştirilen biçimlendirilmiş metin parçalarıdır. chrome.action.setBadgeText() yöntemini çağırarak rozet metnini ve chrome.action.setBadgeBackgroundColor() yöntemini çağırarak banner rengini ayarlayabilirsiniz.
![Rozetsiz ve rozetli bir uzantı simgesi.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/badges.png?authuser=5&hl=tr)
İşlem oluşturmayı öğrenmek için Bir işlemi uygulama bölümüne veya Su içme örneğine göz atın.
Komutlar
Komutlar, bir uzantı özelliğini çağıran tuş kombinasyonlarıdır. Manifest.json dosyasında tuş kombinasyonlarını tanımlayın ve bunlara Commands API'yi kullanarak yanıt verin.
Komut uygulamayı öğrenmek için API referansına veya chrome.commands
örneğine göz atın.
İçerik menüsü
Farenin alternatif tıklaması (genellikle sağ tıklama olarak adlandırılır) için bir içerik menüsü görüntülenir. İçerik Menüleri API'sını kullanarak içerik menülerini tanımlayın.
![İç içe yerleştirilmiş içerik menüsü.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/context-menu-nested.png?authuser=5&hl=tr)
Bir içerik menüsünü uygulamayı öğrenmek için içerik menüsü örneklerine bakın.
Çok amaçlı adres çubuğu
Chrome çok amaçlı adres çubuğunu kullanarak kullanıcılarla etkileşimde bulunabilirsiniz. Bir kullanıcı çok amaçlı adres çubuğuna uzantı tanımlı anahtar kelimeler girdiğinde uzantınız kullanıcının çok amaçlı adres çubuğunda ne göreceğini kontrol eder. manifest.json dosyasında anahtar kelimeleri tanımlayın ve bunlara Omnibox API'yi kullanarak yanıt verin.
![Tarayıcının çok amaçlı adres çubuğu.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/omnibox.png?authuser=5&hl=tr)
Çok amaçlı adres çubuğunu geçersiz kılmayı öğrenmek için çok amaçlı adres çubuğundan Tetikleyici işlemleri bölümüne veya hızlı API referansı örneğine bakın.
Sayfaları geçersiz kıl
Bir uzantı, aşağıdaki yerleşik Chrome sayfalarından birini geçersiz kılabilir:
- İzledikleriniz
- Yeni sekme
- Kitap Ayraçları
![Özel geçmiş sayfası örneği.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/custom-history.png?authuser=5&hl=tr)
Chrome sayfalarını geçersiz kılmayı öğrenmek için Chrome sayfalarını geçersiz kılma veya geçersiz kılma örneğine bakın.
Pop-up'lar
Pop-up, kullanıcıların birden fazla uzantı özelliğini çağırmasına olanak tanıyan bir pencere görüntüleyen işlemdir. Pop-up'lar yalnızca kullanıcı işlem simgesini tıklarsa açılabilir. Bir uzantı, pop-up'ını programatik olarak açamaz.
![Pop-up örneği.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/popup.png?authuser=5&hl=tr)
Pop-up oluşturmayı öğrenmek için Pop-up ekleme başlıklı makaleye bakın. Ayrıca işlem örneklerinden birindeki bir adımı da indirebilirsiniz.
Yan paneller
Yan panel, kullanıcıların web sayfalarıyla birlikte uzantı özelliklerini başlatmasına olanak tanır (resme bakın). Yan panel, tek bir sekmeye veya tüm bir pencereye eklenebilir. Yan panel, Side Panel API kullanılarak kontrol edilir.
![Kelimeyi tanımlayan sözlük uzantısı](https://developer.chrome.com/static/docs/extensions/develop/ui/image/dictionary-side-panel.png?authuser=5&hl=tr)
Yan panel oluşturmayı öğrenmek için yan panel kullanım alanlarına bakın veya yan panel örneklerini inceleyin.
İpuçları
İpucu, bir kullanıcı fareyle işlem simgenizin üzerine geldiğinde uzantınızın işleminin ne yaptığını göstermenin bir yoludur. Varsayılan olarak ipucu, uzantının adını gösterir.
![İşlem simgesi için örnek bir ipucu.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/tooltip.png?authuser=5&hl=tr)
İpucu eklemeyi öğrenmek için manifest dosyalarının "action"
anahtarının "default_title"
üyesini kullanın.
DevTools
DevTools Panels API'yi kullanarak özel panelleri (DevTools'da sekmeler) DevTools'a ekleyebilirsiniz. Diğer Geliştirici Araçları API'leri, pencereleri ve ağ trafiğini izlemenize olanak tanır. DevTools kaydedici panelini de özelleştirebilirsiniz. Chrome DevTools'un kendi Lighthouse paneli, bir DevTools uzantısı olarak hayata başladı.
Bildirimler
Bildirimler API'sı veya web platformları Bildirimler API'sı kullanarak bir kullanıcının sistem tepsisinde iletiler yayınlayın.
![Mac'te uzantı bildirimi.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/mac-os-notification.png?authuser=5&hl=tr)
Bildirimleri kullanmayı öğrenmek için Kullanıcıları bilgilendirme başlıklı makaleyi inceleyin.
Temalar
Tema, tarayıcının görünümünü değiştiren özel bir uzantı türüdür. Temalar normal uzantılar gibi paketlenir, ancak JavaScript veya HTML kodu içermezler.
![Örnek tema.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/themes.png?authuser=5&hl=tr)
Tema oluşturmayı öğrenmek için Temalar nedir? bölümüne bakın.
Kullanıcılarla etkileşim kurmanın diğer yolları
Bu bölümde, uzantınızın kullanıcılarla etkileşime girebileceği diğer yollar açıklanmıştır. Temel uzantılar için kesin olarak gerekli olmasa da uzantınızın önemli parçaları olabilir. Birçok kullanıcı için bu özelliklerden bazıları uzantıyı kullanmak için kesinlikle gereklidir.
Erişilebilirlik
Birçok kullanıcı için erişilebilirlik, tam anlamıyla kullanıcı arayüzüdür ve özellikleri, uzantınızla etkileşimde bulunmak için birincil araç olarak erişilebilirliğe ihtiyaç duymayanlar için genellikle yararlı olabilir. Uzantınızı erişilebilir hale getirme ile ilgili temel bilgileri öğrenin.
Uluslararası hale getirme
Kullanıcılarla kendi dillerinde konuşun. Arayüzü uluslararası hale getirme hakkında bilgi edinin.