Utveckling av webbläsartillägg (Chrome och Edge) · Lektion

Tvåvägsmeddelanden mellan komponenter

Lär er hantera mer komplex tvåvägskommunikation med meddelandeöverföring för förfrågnings–svar-interaktioner mellan tilläggets olika delar.

Lektion 2 av 411 steg

Tvåvägsmeddelanden mellan komponenter är en gratis lektion i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av webbläsartillägg (Chrome och Edge), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Introduktion till tvåvägsmeddelanden

Välkomna! I den här lektionen lär ni er tvåvägsmeddelanden, ett kraftfullt sätt för olika delar av ert webbläsartillägg att kommunicera effektivt.

Till skillnad från enkelriktade meddelanden gör tvåvägskommunikation det möjligt för en avsändare att inte bara skicka en begäran utan också ta emot ett specifikt svar från mottagaren.

Modellen med begäran och svar

Tvåvägskommunikation följer en enkel modell med begäran och svar:

En komponent (till exempel ett popup-fönster) skickar ett meddelande (begäran).
En annan komponent (till exempel background script) tar emot och bearbetar det.
Den mottagande komponenten skickar sedan ett meddelande tillbaka (svaret).
Den ursprungliga avsändaren tar emot svaret och agerar utifrån det.

Skicka en begäran med en callback

För att skicka en begäran och förvänta er ett svar använder ni chrome.runtime.sendMessage() med en valfri callback-funktion. Callback-funktionen körs när svaret har tagits emot.

Prova att köra det här exemplet från ett popup-fönster eller ett content script:

/* popup.js or content-script.js */
console.log("Sending request to background...");

chrome.runtime.sendMessage({type: "fetchSettings", key: "theme"},
  function(response) {
    if (chrome.runtime.lastError) {
      console.error("Error sending message:", chrome.runtime.lastError.message);
      return;
    }
    if (response && response.status === "success") {
      console.log("Received setting:", response.value);
    } else {
      console.error("Failed to get setting:", response.error);
    }
  }
);

Ta emot och svara (synkront)

Den mottagande komponenten (ofta er background service worker) lyssnar efter meddelanden med hjälp av chrome.runtime.onMessage.addListener(). Lyssnaren tar emot request, sender och en särskild funktion, sendResponse.

För att skicka ett synkront svar anropar ni helt enkelt sendResponse() med era data. Meddelandekanalen stängs sedan.

/* service-worker.js (background script) */
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Background received request:", request.type);

    if (request.type === "fetchSettings") {
      // Simulate fetching a setting synchronously
      const settings = {theme: "dark", notifications: true};
      const value = settings[request.key];

      if (value !== undefined) {
        sendResponse({status: "success", value: value});
      } else {
        sendResponse({status: "error", error: "Setting not found"});
      }
    }
    // No 'return true;' needed for synchronous response
  }
);

Hantera asynkrona svar

Vad händer om svaret beror på en asynkron åtgärd, till exempel att hämta data från ett API eller lokal lagring? Om du anropar sendResponse() i en asynkron callback kan meddelandekanalen stängas innan svaret är klart.

För att förhindra detta returnerar du true från din callback för onMessage.addListener. Då instrueras Chrome att hålla kanalen öppen, så att du kan anropa sendResponse() senare.

/* service-worker.js (background script) */
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.type === "fetchAsyncData") {
      console.log("Processing async request...");
      // Simulate an async data fetch
      setTimeout(() => {
        const data = {id: 'unique123', content: 'Fetched after delay'};
        sendResponse({status: "success", data: data});
      }, 500); // Wait 500ms

      return true; // IMPORTANT: Keeps the message channel open
    }
  }
);

Popup till innehållsskript

Du kan också upprätta tvåvägskommunikation direkt mellan en popup och ett innehållsskript som körs på den aktiva fliken. För detta använder popupen chrome.tabs.sendMessage() och anger flikens ID.

Innehållsskriptet använder sedan chrome.runtime.onMessage.addListener(), precis som ett bakgrundsskript.

/* popup.js */
console.log("Sending message to active tab...");

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  if (tabs.length > 0) {
    chrome.tabs.sendMessage(tabs[0].id, {action: "getSelection"},
      function(response) {
        if (chrome.runtime.lastError) {
          console.error("Error from content script:", chrome.runtime.lastError.message);
          return;
        }
        if (response && response.selectedText) {
          console.log("Selected text:", response.selectedText);
        } else {
          console.log("No text selected.");
        }
      }
    );
  }
});

Innehållsskriptet svarar

Så här tar innehållsskriptet på webbsidan emot meddelandet från popupen och skickar tillbaka den text som för närvarande är markerad.

Kom ihåg att innehållsskriptet också använder chrome.runtime.onMessage.addListener() och kan använda sendResponse().

/* content.js */
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Content script received action:", request.action);

    if (request.action === "getSelection") {
      const selectedText = window.getSelection().toString();
      sendResponse({selectedText: selectedText});
    }
    // For synchronous response, no 'return true;' is needed
  }
);

Tips för felhantering

Robust felhantering är avgörande:

Kontrollera chrome.runtime.lastError: Efter sendMessage() ska du alltid kontrollera denna egenskap för att fånga fel som frånkopplade portar (till exempel om det mottagande skriptet inte är aktivt).
Inkludera status i svaret: Utforma dina svarsobjekt med ett status-fält (till exempel 'success', 'error') och ett valfritt message- eller error-fält för detaljer.
Hantera odefinierade svar: Callbacken kan anropas med ett odefinierat svar om mottagaren inte anropar sendResponse().

Bästa praxis för tvåvägskommunikation

Följ dessa riktlinjer för smidig och underhållbar tvåvägskommunikation:

Definiera tydliga meddelandetyper: Använd ett type- eller action-fält i dina meddelandeobjekt (till exempel {type: "getData"}) för att enkelt identifiera avsikten.
Håll meddelanden enkla: Skicka endast nödvändiga data som kan serialiseras till JSON. Undvik komplexa objekt och DOM-element.
Samla lyssnarlogiken: Använd om möjligt en enda onMessage.addListener i ditt bakgrundsskript och dirigera förfrågningar utifrån deras type.
Dokumentera meddelandekontrakt: Definiera tydligt vad varje meddelandetyp förväntar sig och vilket svar den returnerar.

Kontrollera dina kunskaper

Testa dina kunskaper om tvåvägskommunikation!

Besvara frågan i den interaktiva lektionen

Sammanfattning och nästa steg

Du behärskar nu tvåvägskommunikation!

Du har lärt dig att skicka förfrågningar med chrome.runtime.sendMessage() och ta emot svar via en callback.
Du kan nu använda chrome.runtime.onMessage.addListener() tillsammans med sendResponse() för att svara på meddelanden och hantera både synkrona och asynkrona scenarier.
Du har också sett hur du kan aktivera kommunikation mellan popuper och innehållsskript med chrome.tabs.sendMessage().

Härnäst ska du utforska hur du sparar data med API:t chrome.storage, som ofta används tillsammans med meddelanden!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Tvåvägsmeddelanden mellan komponenter” gratis?

Ja – hela texten till ”Tvåvägsmeddelanden mellan komponenter” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av webbläsartillägg (Chrome och Edge), kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Tvåvägsmeddelanden mellan komponenter”?

Lär er hantera mer komplex tvåvägskommunikation med meddelandeöverföring för förfrågnings–svar-interaktioner mellan tilläggets olika delar. Ni övar på Utveckling av webbläsartillägg (Chrome och Edge) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av webbläsartillägg (Chrome och Edge)?

Du behöver inga förkunskaper. Utbildningen i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Tvåvägsmeddelanden mellan komponenter”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av webbläsartillägg (Chrome och Edge)-lektionen?

Ja. Varje Utveckling av webbläsartillägg (Chrome och Edge)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Mönster för enkelriktad meddelandekommunikation
Tvåvägsmeddelanden mellan komponenter
Använda Chrome Storage API
Synkroniserad eller lokal lagring och kvoter

← Tillbaka till Utveckling av webbläsartillägg (Chrome och Edge)