Firefox Navigasyon Araç Çubuğunda Düğme Nasıl Oluşturulur ve Eklenir [Rehber]

Bugün, bir Firefox rehberi getiriyoruz.Herkes gezinme araç çubuğunda özel bir düğme oluşturmak için takip edebilir. Gezinme araç çubuğundaki görünür düğmelerle birlikte, Firefox'ta sağlanan ve araç çubuğundaki herhangi bir yere eklenebilen ve ihtiyaçlarınıza göre özelleştirilebilen farklı işlevlere sahip diğer düğmelerlerin bir listesi vardır. Düğmenin konumu ve davranışı herhangi bir ek bilgi gerektirmeden değiştirilebildiği için, yönlendirilebilir şekilde davranan, tanımlanmış bir konumda oturan ve özelleştirilebilir bir şekilde kolayca yeni bir uzantı oluşturabilirsiniz. Bu gönderi, basit bir işlevsellik sağlayacak bir araç çubuğu düğmesi olan basit bir uzantının nasıl oluşturulduğunu kapsar.

Başlamak için önce öğrenmeniz gerekir. uzantılar klasör (Firefox Profilleri klasöründe bulunan). Windows 7 ve Windows Vista kullanıcıları bu klasörü burada bulacaklar;

Ancak, Windows XP kullanıyorsanız, %Uygulama verisi% Windows'ta konsolu çalıştırın ve Enter tuşuna basın.

Bir kere uzantılar klasör açıldığında, adına göre yeni bir klasör oluşturun. [email protected] içinde.

Yeni oluşturulan klasörü açın ve yeni bir dizin oluşturun. krom, iki dosya ile birlikte chrome.manifest ve install.rdf. Şimdi bu dosyaları metin düzenleyicide düzenleyeceğiz, Windows yerleşik Not Defteri gibi utf-8 desteğine sahip herhangi bir düzenleyiciyi kullanmanızı rica ediyoruz.

İlk önce aç chrome.manifest dosya ve aşağıdaki kod satırlarını ekleyin. Aşağıda verilen kod, Thunderbird posta, oluşturma ve adres defteri pencereleri ve Sunbird için de işlevseldir. Bununla birlikte, yalnızca Firefox'ta düğmeyi kullanmanız gerekirse, Thunderbird ve Sunbird için kod satırları hariç tutulabilir.

content custombutton chrome/
style chrome://global/content/customizeToolbar.xul chrome://custombutton/content/button.css
# Firefox
overlay    chrome://browser/content/browser.xul chrome://custombutton/content/button.xul
# Thunderbird mail
overlay    chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul
# Thunderbird compose
overlay    chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul
# Thunderbird address book
overlay    chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul
# Sunbird
overlay    chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul

Kod dosyaya eklendikten sonra, değişiklikleri kaydettikten sonra kapatın. Şimdi düzenle install.rdf Dosyaya, aşağıdaki kod satırlarını eklemeniz gerekir.içinde. Düğme genel açıklamasını değiştirebilir, kodun 6, 7 ve 8. satırlarına metin eklenebilir (çift tırnak işareti içine alınmalıdır), düğmenin adını, açıklayıcı metni ve içerik oluşturucu adını girebilirsiniz.

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest"
em:name="AT"
em:description="AddictiveTips"
em:creator="Usman"
em:id="[email protected]"
em:version="1.0"
em:homepageURL="http://developer.mozilla.org/en/docs/Custom_Toolbar_Button"
em:iconURL="chrome://custombutton/content/icon.jpg" >
<em:targetApplication><!-- Firefox -->
<Description
em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
em:minVersion="1.4"
em:maxVersion="99" />
</em:targetApplication>
<em:targetApplication><!-- Thunderbird -->
<Description
em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}"
em:minVersion="1.4"
em:maxVersion="99" />
</em:targetApplication>
<em:targetApplication><!-- Sunbird -->
<Description
em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}"
em:minVersion="0.2.9"
em:maxVersion="99" />
</em:targetApplication>
<em:file>
<Description
about="urn:mozilla:extension:custombutton"
em:package="content/custombutton/" />
</em:file>
</Description>
</RDF>

Açıklamayı değiştirdikten sonra, değişiklikleri kaydedin ve dosyayı kapatın. Yeni oluşturulan klasörü hatırla (krom), 3 dosya yaratacağız ve 2 resim ekleyeceğiz. İlk önce aşağıdaki isimde 3 dosya oluşturun;

• button.css
• button.xul
• button.js

Şimdi butona stil uygulayacağız.Burada karmaşık bir şey değil, yalnızca düğme tasarımına temel bir stil uygulayacağız (görüntü boyutlarını tanımlayın ve düğmenin üzerine getirin. Bir CSS dosyası tasarlama konusunda bilgi sahibi iseniz (Cascading Style Sheet), değerleri ve efektleri değiştirmek bir cinch olacaktır, ancak adını ilk kez duyuyorsanız, aşağıdaki stil kod satırlarını girmeniz yeterlidir. button.css Bir kez yapılır, değişiklikleri kaydedin ve kapatın.

#custom-button-1,
#wrapper-custom-button-1
{list-style-image: url("chrome://custombutton/content/button-1.jpg");}
/* common style for all custom buttons */
.custombutton                    {-moz-image-region: rect( 0px 24px 24px  0px);}
.custombutton:hover       {-moz-image-region: rect(24px 24px 48px  0px);}
[iconsize="small"] .custombutton
{-moz-image-region: rect( 0px 40px 16px 24px);}
[iconsize="small"] .custombutton:hover
{-moz-image-region: rect(24px 40px 40px 24px);}

Şimdi aç button.xul Bir metin editöründe dosya ve aşağıdaki satırları ekleyinKodun Thunderbird ve Sunbird için de kod sağladığımızı unutmayın, bu kılavuzu yalnızca Firefox için takip ediyorsanız, Thunderbird ve Sunbird ile ilgili satırları hariç tutabilirsiniz.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css"
href="chrome://custombutton/content/button.css"?>
<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript"
src="chrome://custombutton/content/button.js"/>
<!-- Firefox -->
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Thunderbird mail -->
<toolbarpalette id="MailToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Thunderbird compose -->
<toolbarpalette id="MsgComposeToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Thunderbird address book -->
<toolbarpalette id="AddressBookToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Sunbird -->
<toolbarpalette id="calendarToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- button details -->
<toolbarbutton id="custom-button-1"
label="Custom"
tooltiptext="My custom toolbar button"
oncommand="CustomButton[1]()"
class="toolbarbutton-1 chromeclass-toolbar-additional custombutton"
/>
</overlay>

Şimdi isimleri olan iki resim dosyası eklemeniz gerekiyor. button-1.jpg ve Icon.jpg sırasıyla 40 × 48 ve 48 × 48 boyutlarında olanen iyi sonuçları al. Ancak, 48 piksel genişlik ve uzunluk bilgisini aşmayan herhangi bir boyutta görüntüler oluşturabilirsiniz. Aşağıda kullandığımız düğme resimlerini görebilirsiniz - button-1.jpg Resim, ilgili boyutlarda (büyük ve küçük) araç çubuğu düğmesi içindir ve her iki varsayılan görüntünün altında da vurgulu efekt görülebilir. Icon.jpg Resim ana uzantı simge resmini gösterir (Firefox eklenti galerisinde göreceğiniz resim)

button-1.jpg

Icon.jpg

Oluşturulduktan sonra 5. dosyaya gidin - button.js. Bu JavaScript dosyası çok büyük önem taşıyor,düğmenin ana işlevini tanımlayacağı gibi. İşlevselliği sınamak için bir mesaj isteyen veya önceden ne istediğinizi yapmak için önceden yazılmış bir komut dosyası ekleyebilirsiniz. Ayrıca, özellikle birinin gereksinimlerini yerine getirmek için düzenlenmiş birçok komut dosyası vardır, burada bazı basit ama kullanışlı komut dosyalarını da inceleyebilirsiniz. Bu kılavuz ilköğretim kullanıcılar için olduğu için, belirtilen web sitesini açacak basit bir yer imi öğesi oluşturacağız. Aç button.js yer işareti düğmesi oluşturmak için aşağıdaki kod satırlarını ekleyin ve ekleyin (Firefox araç çubuğunda gösterilmek üzere).

CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}

Şimdi gitmeye hazırsın, kontrol etmeni istiyoruz.Söz konusu dosyalara eklediğiniz kodu girin ve görüntü boyutlarını tekrar doğrulayın. Yeni oluşturulan uzantıyı yüklemek için, çalışan tüm Firefox örneklerini kapatın ve ardından başlatın. Her şey yolunda giderse, muhtemelen eklentinin başarıyla kurulduğunu belirten yeni bir eklenti yükleme istemi görüyorsunuz.

Yeni oluşturulan düğmenin gezinti araç çubuğunda görünmesini sağlamak için, Görünüm menüsünden Araç Çubukları alt menüsünde, Özelleştir'i tıklayın.

Özelleştir Araç Çubuğu iletişim kutusu nereden görünecekYeni oluşturulan düğmeyi gezinti araç çubuğunun üzerine sürüklemeniz gerekir. Taktıktan sonra, konumunu istediğiniz yere sürükleyerek de değiştirebilirsiniz.

Şimdi JavaScript dosyasına eklenen işlevselliği doğrulamak için düğmeye tıklamanız yeterli.

Ortaya çıkan düğmenin işlevikullanıcı tanımlı, bu yüzden ne kadar işlevlerini kalibre edebileceğini kendi yeteneklerine kalmış. Acemi kullanıcılar kısayollar oluşturabilir, uygulamalar bağlayabilir, yer imleri tasarlayabilirken, ortalama ve uzmanlık düzeyi arasında belirsiz olan kullanıcılar kesinlikle bundan daha fazla faydalanabilir ve ana JavaScript dosyasına gerekli işlevleri ekleyebilir.