كيفية إنشاء وإضافة زر في شريط أدوات التنقل في فايرفوكس [دليل]

اليوم ، نأتي دليل فايرفوكس ذلكيمكن لأي شخص متابعة لإنشاء زر مخصص في شريط أدوات التنقل. إلى جانب الأزرار المرئية في شريط أدوات التنقل ، هناك قائمة من الأزرار الأخرى ذات الوظائف المختلفة المتوفرة في Firefox والتي يمكن إضافتها في أي مكان على شريط الأدوات ويمكن تخصيصها وفقًا لاحتياجاتك. نظرًا لأنه يمكن تغيير موضع الزر وسلوكه دون الحاجة إلى معرفة إضافية ، يمكن للمرء بسهولة إنشاء امتداد جديد يتصرف وفقًا لتوجيهاته ، ويجلس في موضع محدد ، بينما يكون قابلاً للتخصيص بدرجة عالية. يغطي هذا المنشور كيفية إنشاء ملحق بسيط - زر شريط أدوات يوفر وظيفة بسيطة.

لتبدأ ، أولا تحتاج إلى معرفة ذلك ملحقات مجلد (واحد موجود في مجلد ملفات تعريف Firefox). سيجد مستخدمو Windows 7 و Windows Vista هذا المجلد هنا ؛

ومع ذلك ، إذا كنت تستخدم نظام التشغيل Windows XP ، فاكتب ٪معلومات التطبيق٪ في Windows Run console واضغط على Enter.

مرة واحدة في ملحقات تم فتح المجلد ، إنشاء مجلد جديد باسم [email protected] فيه.

افتح المجلد المنشأ حديثًا ، ثم أنشئ دليلًا جديدًا كروم, جنبا إلى جنب مع ملفين - chrome.manifest و install.rdf. سنقوم الآن بتحرير هذه الملفات في محرر نصوص ، ونحسب لك استخدام أي محرر مع دعم utf-8 ، مثل - Windows build-in Notepad.

أولا ، فتح chrome.manifest ملف وإدراج الأسطر التالية من رمز الحرف الأول. الشفرة الواردة أدناه تعمل أيضًا مع بريد Thunderbird ونوافذ الإنشاء ودفتر العناوين و Sunbird. ومع ذلك ، إذا كنت بحاجة إلى استخدام الزر فقط في Firefox ، فيمكن استبعاد أسطر التعليمات البرمجية الخاصة بـ Thunderbird و Sunbird.

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

بمجرد إدخال الرمز في الملف ، أغلقه بعد حفظ التغييرات. الآن تحرير install.rdf الملف ، تحتاج إلى إدراج أسطر التعليمات البرمجية التاليةفيه. يمكنك تغيير الوصف العام للزر ، ويمكن إضافة نص في الأسطر 6 و 7 و 8 من التعليمات البرمجية (يجب أن تكون مرفقة بعلامات اقتباس مزدوجة) ، ويمكنك إدخال اسم الزر والنص الوصفي واسم المنشئ.

<?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>

بمجرد تغيير الوصف ، احفظ التغييرات وأغلق الملف. تذكر المجلد الذي تم إنشاؤه حديثًا (كروم) ، حيث سنقوم بإنشاء 3 ملفات وإدراج 2 صور. أولا إنشاء 3 ملفات لها أسماء التالية ؛

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

الآن سوف نطبق التصميم على الزر ، هناكليس شيئًا معقدًا هنا ، فسنطبق فقط بعض التصميم الأساسي على تصميم الزر (حدد أبعاد الصورة وتأثير التحويم على الزر). إذا كنت معتادًا على تصميم ملف CSS (Cascading Style Sheet) ، فسيكون تغيير القيم والآثار أمرًا مهمًا ، ومع ذلك ، إذا كنت تسمع اسمه لأول مرة ، فما عليك سوى إدراج سطور الأنماط التالية من التعليمات البرمجية في button.css ملف ، بمجرد القيام به ، حفظ التغييرات وإغلاقه.

#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);}

الآن فتح button.xul ملف في محرر نص وإدراج الأسطر التاليةمن التعليمات البرمجية. تذكر أننا نقدم رمزًا لـ Thunderbird & Sunbird أيضًا ، إذا كنت تتبع هذا الدليل فقط لـ Firefox ، فيمكنك استبعاد الخطوط المتعلقة بـ Thunderbird & Sunbird.

<?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>

أنت الآن بحاجة إلى إدراج ملفين للصور لهما أسماء button-1.jpg و Icon.jpg مع أبعاد 40 × 48 و 48 × 48 على التوالي لالحصول على أفضل النتائج. ومع ذلك ، يمكنك إنشاء صور من أي حجم لا يتجاوز عرض 48px وطول الحكمة. أدناه يمكنك مشاهدة الصور التي نستخدمها - button-1.jpg الصورة مخصصة لزر شريط الأدوات ذي الأحجام الخاصة (الكبيرة والصغيرة) ويمكن رؤية تأثير التحويم أسفل أحجام الصورتين الافتراضية. Icon.jpg تشير الصورة إلى صورة أيقونة الامتداد الرئيسية (الصورة التي ستراها في معرض إضافات Firefox)

button-1.jpg

Icon.jpg

بمجرد الإنشاء ، انتقل إلى الملف الخامس - button.js. يحمل ملف JavaScript هذا أهمية كبيرة ،لأنها ستحدد الوظيفة الرئيسية للزر. يمكنك إضافة نموذج نصي يطالب رسالة باختبار الوظيفة أو الانتقال إلى البرنامج النصي المتقدم للقيام بكل ما تريد. هناك أيضًا العديد من البرامج النصية المفتعلة خصوصًا لتلبية متطلبات الشخص ، يمكنك أيضًا الاطلاع على بعض النصوص البرمجية البسيطة ولكنها مفيدة هنا. نظرًا لأن هذا الدليل مخصص للمستخدمين على مستوى المرحلة الابتدائية ، فسنقوم بإنشاء عنصر إشارة مرجعية بسيط سيفتح موقع الويب المحدد. افتح ال button.js ملف وإدراج أسطر التعليمات البرمجية التالية لإنشاء زر إشارة مرجعية (لإظهاره على شريط أدوات Firefox).

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

الآن من الجيد أن تذهب ، فنحن نحسب لك التحقق من ذلكالرمز الذي أدخلته في الملفات المذكورة وتحقق من أبعاد الصورة مرة أخرى. لتثبيت الامتداد الذي تم إنشاؤه حديثًا ، أغلق جميع مثيلات Firefox قيد التشغيل ثم قم بتشغيله. إذا سارت الأمور على ما يرام ، فمن المحتمل أن ترى موجه تثبيت وظيفة إضافية جديدًا ، مما يشير إلى أنه تم تثبيت الامتداد بنجاح.

لجعل الزر الذي تم إنشاؤه حديثًا يظهر في شريط أدوات التنقل ، من القائمة عرض ، ضمن القائمة الفرعية لأشرطة الأدوات ، انقر فوق تخصيص.

سيظهر مربع حوار تخصيص شريط الأدوات ، من أينيجب عليك سحب الزر الذي تم إنشاؤه حديثًا عبر شريط أدوات التنقل. بمجرد إدخالها ، يمكنك أيضًا تغيير موضعها بسحبها إلى أي مكان تريد.

الآن فقط انقر فوق الزر للتحقق من الوظيفة المدرجة في ملف JavaScript.

وظيفة الزر الناتج هيالمعرفة من قبل المستخدم ، لذلك فإن الأمر يتوقف على مهاراتك كم يمكنك معايرة وظائفها. يمكن للمستخدمين المبتدئين إنشاء اختصارات وتطبيقات الارتباطات وتصميم الإشارات المرجعية ، بينما يمكن للمستخدمين الذين هم في طي النسيان بين المستوى المتوسط ​​والخبير الاستفادة بشكل أكبر من ذلك وإضافة الوظائف المطلوبة في ملف JavaScript الرئيسي.