עזרה עם בניית תוסף כרום

[ivrtikshoret]

שלום וברכה
אשמח אם מישהו יוכל להסביר לי איך זה עובד
אני רוצה לעשות תוסף שכשנכנסים לשמה אפשר לדוגמא לבחור צבע ואז ללחוץ על שמור והדף בו אני נמצא בו עכשיו (לא ה popup) נצבע בצבע שבחרתי
לעשות את זה ב js זה ממש פשוט לדוגמא:
document.body.style.backgroundColor = 'orange';
אני יודע קצת איך לעבוד עם תוספים אני רק לא יודע איך אני יכול לגרום לזה שע"י ה popup אני יכול לעשות שינוים בדף בו אני נמצא עכשיו

[יוסף בן שמעון]

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

[צדיק תמים]

@יוסף-בן-שמעון אמר בעזרה עם בניית תוסף כרום:

אבל אפשר לשלוח הודעות מהפופאפ לדף ומהדף לפופאפ

איך עושים כזה דבר? או שזה משהו ייחודי לתוספים?

[יוסף בן שמעון]

@צדיק-תמים לא הבנתי את שאלתך

[צדיק תמים]

@יוסף-בן-שמעון כתבת לעשות ש"הדף יאזין להודעות מהפופאפ".
השאלה איך שולחים את ההודעה באמת (מהפופאפ לדף)?

[יוסף בן שמעון]

@צדיק-תמים עם האובייקט

chrome.extension.sendMessage

ומאזינים להודעות עם אובייקט

chrome.extension.onMessage.addListener

חפש בגוגל chrome extension send message between popup and page

[ivrtikshoret]

@יוסף-בן-שמעון אמר בעזרה עם בניית תוסף כרום:

@צדיק-תמים עם האובייקט

chrome.extension.sendMessage

ומאזינים להודעות עם אובייקט

chrome.extension.onMessage.addListener

חפש בגוגל chrome extension send message between popup and page

אתה יכול בבקשה להראות דוגמא מלאה?

[ivrtikshoret]

הסתדרתי מצורף דוגמא:

$("#theButton").on("click", function () {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(
      tabs[0].id,
      { greeting: "hello", color: $("#input_1").val() },
      function (response) {
      }
    );
  });
});

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.greeting === "hello") {
    document.body.style.backgroundColor = request.color;
    sendResponse({ farewell: "goodbye" });
  }
});