כיצד ליצור טקסט חיפוש Bookmarklet עם

סימניות הם יישומי כי ניתן לגשת כמו סימניות דפדפן. הם משמשים כדי לאפשר למשתמשים לבצע פעולות שונות על דפי אינטרנט. לדוגמה, זה סימניה על ידי FontShop היא לתצוגה מקדימה של גופני גופנים FontShop על כל דף אינטרנט.

במאמר זה, אנחנו הולכים לראות כמה מהירה וקלה היא לרקום סימניה על ידי יצירת אחד כזה מבצע wikiwand (ויקיפדיה טובה יותר) לחפש עבור טקסט שנבחר בכל דף אינטרנט.

כיצד פועלים הסימניות

URI של סימניה משתמש javascript: פרוטוקול זה מציין את זה המורכב קוד. כאשר אתה לוחץ על סימניה, אתה יכול הפעלה בדף אינטרנט ובביצוע משימות, כגון שינוי המראה של דף, הפניה מחדש לדף אחר או הצגת מידע חדש עליו.

מאז סימניות הם בעצם סטים של קוד JavaScript, הם קל ליצור עם קצת ידע JavaScript, או לשימוש אישי או להציע את זה למשתמשים שלך, כגון וורדפרס עושה עם העיתונות שלה זה סימנייה.

התחל בעבודה עם קוד JavaScript

ה מבנה כתובת האתר Wikiwand משתמש עבור מאמר באנגלית הוא https://www.wikiwand.com/en/articleTitle. אנחנו צריכים לכתוב סקריפט שקופץ לדף Wikiwand של איזו כתובת אתר מסתיים בחוט שהמשתמש בחר זה עתה - הטקסט הנבחר יצטרך להיות במקום כותרת המאמר.

ראשית, אנחנו לקבל את הטקסט המשתמש בחר בדף עם הקוד הבא:

 getSelection (). toString () 

אנחנו צריכים ללהק את האובייקט חזר על ידי getSelection () כמחרוזת באמצעות toString () שיטה, כדי לעשות את זה פלט את הטקסט שנבחר.

הבא, אנחנו צריכים לבצע ביקור אל דף המאמר של Wikiwand. אנו נשיג זאת באמצעות הלוגיקה הבאה, היכן newURL יהיה ה כתובת האתר של דף המאמר של Wikiwand (שיכיל את המחרוזת שנבחרה בסוף):

 location.href = NEWURL 

כאשר אנו שמים את שני קטעי הקוד האלה ביחד, אנחנו בסופו של דבר עם הסקריפט הבא:

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

עכשיו אנחנו רק צריכים להוסיף את javascript: פרוטוקול לחזית, ויש לנו את קוד סופי נשתמש בסימניה שלנו:

 / / להוסיף שורה אחת ללא שורה מעברי javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection () .StString (). החלף (/ \ n / g, '% 20' ) 

אופציונלי החלף (/ \ n / g, '% 20') בסופו של דבר מחליף כל תו קו חדש (\ n) בטקסט עם תו רווח יחיד (% 20).

קוד JavaScript מוכן. שים לב כי הקוד צריך להיות ממוקם בשורה אחת ללא הפסקות שורה, שכן מאוחר יותר זה יהיה נוסף לשדה קלט טקסט.

צור את הסימנייה

פתח את חלון הסימניות של הדפדפן ו הוסף סימנייה חדשהYou

• Firefox: הקש Ctrl + Shift + B / cmd + shift + B, לחץ באמצעות לחצן העכבר הימני על "סרגל הכלים של סימניות" ובחר "סימנייה חדשה".
• Chrome: הקש על Ctrl + Shift + O / cmd + alt + B, לחץ לחיצה ימנית על "סרגל הסימניות" ובחר "הוסף דף ... & quot.

בשדה כתובת האתר להעתיק ולהדביק את קוד מלפני. לאחר סימניה נוצר הוא מוכן לשימוש; עבור אל כל דף אינטרנט, בחר מילה אתה רוצה לחפש ב Wikiwand, ו לחץ על הסימניה - הדף Wikiwand המאמר ייפתח בבת אחת.

גישה מהירה

במקום להגיע לתפריט הסימניות בכל פעם שאתה צריך את הסימניה, אתה יכול לבחור להציג אותו ישירות בדפדפן שלך לגישה מהירה.

• Firefox: לחץ על "תצוגה> סרגלי כלים" בשורת התפריטים העליונה, ובחר "סימניות סרגל כלים".
• Chrome: לחץ על Ctrl + Shift + B / cmd + shift + B.

צור קישור לסימנייה

תוכל להוסיף את הסימניה שלך לאתר אינטרנט כקישור כמו כן, אשר המבקרים יכול סימניה על ידי פשוט גרור ושחרר את הקישור לסרגל הכלים של הסימניות, או לחיצה ימנית על הקישור ובחירת האפשרות לסימנייה.

כדי להפוך את הסימניות שלך להיפר-קישור, צור תג HTML עם סקריפט סימנייה כמו הערך שלה href תכונהYou

   Wikiwand חיפוש  

כיצד לאחסן סימניות בנפרד

אתה יכול גם השתמש בקובץ JavaScript נפרד כדי לאחסן את קוד הסימנייה, שהוא כנראה לא הכרחי אם יש לך סקריפט קצר - כמו זה שראינו זה עתה במדריך זה - אבל יכול לבוא שימושי כאשר קוד JavaScript ארוך מדי להעתיק ולהדביק אותו לסרגל הסימניות של הדפדפן שלך.

הקובץ myscript.js רצון הבית הראשי קוד JavaScript עבור הסימניה, ועליך להוסיף את הקוד הבא ככתובת האתר של הסימנייה (או אל סרגל הסימניות של הדפדפן, או בערך של href תכונה בקובץ HTML):

 / / להוסיף שורה אחת ללא שורה מעברי javascript: (() => עם (מסמך) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

קטע הקוד שלמעלה הוא עטוף בפונקציה עצמית של החצים, ומשתמש בתכונות של ECMAScript 6, כגון תן מילת מפתח, כדי להקטין את אורך הקוד. זה מוסיף > תג המצביע על myscript.js קובץ post של המסמך כאשר המשתמש לוחץ על הסימניה (שים לב כי ייתכן שיהיה עליך להשתמש נתיב מוחלט עבור myscript.js קובץ).