תוסף בכרום.

[יאנג בוי]

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

[dovid]

@יאנג-בוי זה לא פקודה.
אתה צריך לכתוב קובץ בשם manifest.json עם תוכן כזה:

  {
    "name": "XYZ",
    "version": "1.0",
    "description": "XYZ XYZ",
    "manifest_version": 2,
    "background": {
         "scripts": [
              "your_code.js"
          ],
    }
  }

בשורה של your_code תחליף לשם של הקובץ של הקוד הקיים שלך.
בתוך הקוד שלך תירשם להאזין לקליק על התוסף על ידי הקוד הבא:

chrome.pageAction.onClicked.addListener(function(tab){
  //פה הקוד למתי שלוחצים
});

[יאנג בוי]

@dovid לא עבד לי... עשיתי בדיוק כמו שכתבת ובלחיצה על התוסף קורה כלום...

[dovid]

@יאנג-בוי נראה לי הכי טוב שתילך למדריך פה: https://developer.chrome.com/extensions/getstarted
תעשה צעד צעד עד שאתה נתקע.
ככה נקבל בעיה יותר ממוקדת מאשר "לא עובד" כשאין לנו מושג אודות אודות אותו "עובד"...

[dovid]

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

[יאנג בוי]

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

[dovid]

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

יריץ קוד בדף בו הנך גולש אם אתה לוחץ עליו

זה לא "סתם פעולה" כמו console.log.
ראשית את הקוד שלך אתה צריך לפצל לשניים, אחד להשאיר לbackground עם הקוד שהבאתי לאירוע לחיצה:

    chrome.pageAction.onClicked.addListener(function(tab){
        chrome.tabs.executeScript(null, { file: "content.js" });
    });

והשני תקרא לו בהתאם למה שכתוב פה בקוד content (כמובן תוכל לשנות בהתאמה).
תצטרך גם לשנות את המניפסט להוסיף הרשאות:

 {
    "name": "XYZ",
    "version": "1.0",
    "description": "XYZ XYZ",
    "manifest_version": 2,
    "permissions": ["activeTab"]
    "background": {
         "scripts": [
              "your_code.js"
          ],
    }
  }

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

[יאנג בוי]

ok תודה.
דבר ראשון שכחת להוסיף פסיק אחרי השורה החדשה במניפסט.
עשיתי ככל אשר ציוויתני,
שתי שגיאות הופיעו על כותרת זהה, בשתי קובצי הJS.
כותרת השגיאה הייתה Uncaught TypeError: Cannot read property 'onClicked' of undefined.
כאילו הוא לא מוצא למרות שזה כתוב (בראשון)
ולא מוצא כי זה לא כתוב (בשני).
שוב תודה ענקית.

[יאנג בוי]

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

[dovid]

@יאנג-בוי הקוד של הonClick צריך להיות בדף הרקע (background).
והקוד המוזרק צריך להיות בקובץ האחר, זה שלא מוזכר במניפסט.

[יאנג בוי]

@dovid זה מה שנעשה.

[dovid]

@יאנג-בוי מעניין. תנסה להוסיף במניפסט

"browser_action": {}

ככה אני רואה פה https://stackoverflow.com/a/38338182/1271037

[יאנג בוי]

@dovid זה כבר קיים אצלי, (כמשתנה לפני סמל התוסף) בכ"ז ניסיתי למחוק את הקיים ולהביא א"ז וכלום.