היום אנו מביאים מדריך לפיירפוקסכל אחד יכול לעקוב אחר יצירת כפתור בהתאמה אישית בסרגל הכלים של הניווט. לצד כפתורים גלויים בסרגל הכלים של הניווט, יש רשימה של כפתורים אחרים עם פונקציות שונות המסופקות בפיירפוקס שניתן להוסיף בכל מקום בסרגל הכלים וניתן להתאים אותם לפי הצרכים שלך. מכיוון שניתן לשנות את מיקום הכפתור ואת התנהגותו ללא צורך בידע נוסף, ניתן לבנות בקלות סיומת חדשה שמתנהגת ככוונה, יושבת במצב מוגדר, תוך התאמה אישית רבה. פוסט זה מכסה כיצד ליצור תוסף פשוט - כפתור סרגל כלים שיספק פונקציונליות פשוטה.
כדי להתחיל, ראשית עליך לברר זאת הרחבות תיקיה (אחת השוכנת בתיקיית פרופילי Firefox). משתמשי Windows 7 ו- Windows Vista ימצאו כאן תיקיה זו;
ג: משתמשים << שם משתמש >> AppDataRoamingMozillaFirefoxProfiles << שם פרופיל >> תוספים
עם זאת, אם אתה משתמש ב- Windows XP, הקלד % AppData% במסוף הפעלה של Windows ולחץ על Enter.
כעת פתח את תיקיית Firefox ואז פרופילים -> <שם פרופיל> -> תיקיית תוספים
פעם ה הרחבות תיקיה נפתחת, צור תיקיה חדשה בשם [email protected] init.
פתח את התיקיה החדשה שנוצרה, וצור תיקיה חדשה, כלומר כרום, יחד עם שני קבצים - chrome.manifest ו install.rdf. כעת נערוך קבצים אלה בעורך טקסטים, אנו מעריכים שתשתמש בכל עורך עם תמיכה ב- utf-8, כמו - פנקס רשימות מובנה של Windows.
ראשית, פתוח chrome.manifest קובץ והוסף שורות קוד אחר זה. הקוד המופיע למטה הוא גם פונקציונלי לחלונות דואר, לחיבור וספרי כתובות של Thunderbird, וגם עבור Sunbird. עם זאת, אם עליך להשתמש בכפתור רק בפיירפוקס, ניתן לשלול שורות קוד עבור 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 (גיליון סגנון מדורגים), שינוי ערכים ואפקטים יהיה נקודה, עם זאת, אם אתה שומע את שמו בפעם הראשונה, פשוט הכנס את שורות הקוד הבאות ב 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 בהתאמה לקבל את התוצאות הטובות ביותר. עם זאת, ניתן ליצור תמונות בכל גודל שלא יעלה על רוחב 48 פיקסלים. למטה תוכלו לראות את תמונות הכפתור בהן אנו משתמשים - button-1.jpg התמונה מיועדת ללחצן סרגל הכלים בגדלים המתאימים (גדולים כקטנים) וניתן לראות אפקט ריחוף מתחת לגדלי תמונות ברירת המחדל של שתי תמונות. Icon.jpg תמונה מתייחסת לתמונת סמל התוסף הראשי (זו שתראה בגלריית התוספים של Firefox)
button-1.jpg
Icon.jpg
לאחר יצירתם, עבור לקובץ החמישי - button.js. לקובץ JavaScript זה יש חשיבות רבה,שכן הוא יגדיר את הפונקציונליות העיקרית של הכפתור. אתה יכול להוסיף סקריפט לדוגמה שמבקש הודעה כדי לבדוק את הפונקציונליות או ללכת על סקריפט מקדים לעשות כל מה שתרצה. כמו כן, ישנם סקריפטים רבים אשר נועדו במיוחד למלא את הדרישות של אחד מהם, תוכלו גם לבדוק סקריפטים פשוטים אך שימושיים כאן. מכיוון שמדריך זה מיועד למשתמשים ברמה היסודית, אנו ניצור פריט סימניה פשוט שיפתח את האתר שצוין. פתח את ה button.js קובץ והוסף שורות קוד הבאות ליצירת כפתור סימניה (להצגה בסרגל הכלים של פיירפוקס).
CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}עכשיו אתה טוב ללכת, אנו מעריכים שתבדוק אתקוד שהוספת לקבצים שצוינו ואמת שוב את מידות התמונה. כדי להתקין את התוסף החדש שנוצר, סגור את כל המופעים הפועלים של Firefox ואז הפעל אותו. אם הכל התנהל כשורה, סביר להניח שתראה הנחיית התקנה חדשה לתוספות, שתצביע על כך שההרחבה הותקנה בהצלחה.
כדי לגרום ללחצן שנוצר לאחרונה להופיע בסרגל הכלים של הניווט, מתפריט תצוגה, תחת תפריט המשנה סרגלי כלים, לחץ על התאמה אישית.
התאמה אישית של תיבת הדו-שיח של סרגל הכלים תופיע, מאיפהעליך לגרור את הכפתור החדש שנוצר מעל סרגל הכלים של הניווט. לאחר הכניסה, תוכלו גם לשנות את מיקומו על ידי גרירתו לכל מקום שתרצו.
עכשיו פשוט לחץ על הכפתור כדי לאמת את הפונקציונליות שהוכנסה לקובץ JavaScript.
הפונקציונליות של הכפתור שנוצר היאמוגדר על ידי המשתמש, כך שתוכל לכוון את הפונקציות שלו בכישוריך. משתמשים מתחילים יכולים ליצור קיצורי דרך, לקשר אפליקציות, לעצב סימניות בעוד שמשתמשים בלימבו בין רמת ממוצע למומחים יכולים בהחלט לעשות בהם שימוש רב יותר ולהוסיף פונקציונליות נדרשת בקובץ JavaScript הראשי.
הערות