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

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" });
  }
});