Kullanıcı arayüzü bileşenleri

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.

Şekil 1: Sabitlenmiş (sol) ve sabitlemesi kaldırılmış (sağ) uzantılar.

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

Şekil 2: Google sözlük uzantısı simgesi (kırmızı).

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.

Şekil 3: Rozetsiz (solda) ve rozetli (sağ) bir uzantı simgesi.

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

Şekil 4: İçerik menüsü ve iç içe yerleştirilmiş bir alt menü.

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.

Şekil 5: Tarayıcının çok amaçlı adres çubuğu.

Ç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ı

Şekil 6: Özel geçmiş sayfası örneği.

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.

Şekil 7: Pop-up örneği.

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.

Şekil 8: "Uzantılar" kelimesini tanımlayan sözlük uzantısı.

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.

Şekil 9: İşlem simgesi için örnek bir ipucu.

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

Şekil 10: Mac'te bir uzantı bildirimi.

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.

Şekil 11: Örnek tema.

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.