חזרה

משכפל הטאבים - תוסף לדפדפן

משכפל הטאבים - תוסף לדפדפן

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

שלום ושבוע טוב..

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

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

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

כל תוסף דפדפן מתחיל בקובץ מניפסט manifest בפורמט נתונים - JSON. כל הפרמטרים שאמורים ליידע את הדפדפן על התוסף, כולל מה הוא עושה, אילו הרשאות הוא מבקש, איך קוראים לו ומטא-דטה כזה וכו' - הכל במניפסט. את כל הפרמטרים אפשר לראות כאן, וללחוץ על כל אחד מהם כדי לראות את הפירוט.

הנה תוכן המניפסט של התוסף שלי:

{
  "manifest_version": 2,
  "name": "duplicator",
  "version": "0.0.2",
  "author": "chv - netfree user & netfree fan",
  "description": "click the button to duplicate current tab",
  "icons": {
    "24": "icons/dup24.png",
    "48": "icons/dup48.png",
    "96": "icons/dup96.png"
  },

  "developer": {
    "name": "chv",
    "url": "https://blog.chv.ovh"
  },

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": "icons/dup24.png",
    "default_title": "Duplicate active tab"
  },

  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
          "default": "Ctrl+Alt+D"
      }
    }
  },

  "permissions": [
    "activeTab",
    "tabs"
  ]
}

השורה הראשונה מבהירה לדפדפן להתייחס למניפסט כאל מניפסט מהגרסה החדשה (לא כ"כ חדשה).
לאחר מכן, שם, גרסה של התוסף, הסבר קצר עליו ושם היוצר.
אחרי זה מפורטים קבצי האייקונים של התוסף, בגדלים שונים. צריך לשים לב לא לשים אייקונים בגודל של יותר מ-128X128 פיקסלים, כי זה יגרום לכם לשגיאות ולכאב ראש.

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

כאן מגיע הקטע שבו מצהירים על הקבצים שירוצו ברקע. ברקע - בתוסף - הכוונה לקבצים\סקריפטים שרצים בפני עצמם ולא קשורים לדף מסויים, ולא רצים בשום דף שהיוזר גולש בו. כלומר לא מכניסים שום תוכן לשום דף של היוזר.
ההיפך מקבצי הרקע זה קבצי התוכן - content_scripts - שהם בעצם קבצים שאתם קובעים שהתוסף יריץ אותם על טאבים ויכניס את הקוד לתוכם. למקטע זה מכניסים גם הגדרות של - על איזה כרטיסיות ירוץ וכו'.
כמו שאתם רואים - פשוט נוקבים בשם קובץ ה-javascript (JS) - מתיקיית התוסף.

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

הקטע commands קשור לקיצורי דרך, מבהירים על מה יהיה אחראי קיצור הדרך (במקרה שלנו - הפעלה של ה-browser_action - לחיצה על התוסף) ומה הוא יהיה.

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

עד כאן המניפסט.
נעבור לקובץ ה-background.js:

chrome.browserAction.onClicked.addListener(function () {
  chrome.tabs.query({ currentWindow: true, active: true }, (tabs) => {
    browser.tabs.duplicate(tabs[0].id);
  });
});

window.onload = function () {
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    chrome.browserAction.setIcon({
      path: "icons-dark/dup24dark.png",
    });
  }
};

נתחיל עם הקטע הראשון. אנחנו מצמידים listener - ("מאזין") זה בעצם תהליך שרץ ומחכה לאירוע (event) מסוים. כאן אנחנו מוסיפים מאזין (addListener) לאירוע - browserAction.onClicked - כלומר כאשר ה-browserAction הזכור - נלחץ.

כאשר יקרה האירוע הנ"ל - תבוצע הפונקציה (function) הבאה:

chrome.tabs.query - מבקשים מהדפדפן מידע על טאבים שבדפדפן, כרגע מסננים את התוצאות רק לטאבים שהם - current window - בחלון הנוכחי, ו-active - טאב פעיל, כלומר זה שהיוזר יושב עליו כרגע. את המידע הזה אנחנו משרשרים לאובייקט שנקרא לו tabs, האובייקט הזה הוא כרגע מערך של טאבים (המערך מכיל רק ערך אחד, כי סיננו רק את הטאבים הפעילים, וזה אפשרי רק לטאב אחד. אבל עדיין נצטרך להתייחס אל זה כמערך, ולנקוב במיקום של הערך בתוכו. כרגע [0], כי יש רק אחד).

מיד אנחנו מריצים על הערך הנ"ל את הפקודה browser.tabs.duplicate שמשכפלת את הטאבים שמבארים לה (לפי ID של הטאב).

עד כאן הפעולה הפשוטה של השכפול.

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

זהו!

זה היה תוסף ממש בסיסי, ואני משאיר כאן למטה מ"מ לכל הפונקציות שהוזכרו בו.

אפשר למצוא את התוסף בגלריית התוספים של פיירפוקס - כאן, וגם בגיטהב כאן אפשר להעיר הערות, כמיטב המסורת.
בתוצאה התיקייה של התוסף מורכבת ככה:

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

תודה שקראתם! מקווה שנהניתם. יש כאן עוד פוסטים.. תסתכלו למטה 👇

מ"מ:

צריך לשים לב שבפיתוח תוספים לכרום - המילה browser צריכה להיות מוחלפת ב-chrome. מאידך פיירפוקס יזרום בין אם תכתבו browser ובין אם תכתבו chrome. דפדפן נחמד, לא?

אם יש לכם איזו שאלה ❔✨ או כל תגובה 💬, הארה 💡 והערה ❕ שהיא על הפוסט - אשמח מאוד! אם תכתבו אותה בהערות כאן למטה
פשוט להתחבר עם חשבון גיטהב ולהגיב 🎉
חזרה למעלה