Browser Extensions Development (Chrome & Edge) · レッスン

コンポーネント間の双方向メッセージング

メッセージパッシングを使ったリクエストとレスポンスのやり取りを通じて、拡張機能の各要素間でより複雑な双方向通信を実現します。

「コンポーネント間の双方向メッセージング」はCoddyKit上の無料Browser Extensions Development (Chrome & Edge)レッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはBrowser Extensions Development (Chrome & Edge)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Two-Way Messaging Intro

Welcome! In this lesson, you'll master two-way messaging, a powerful way for different parts of your browser extension to communicate effectively.

Unlike one-way messages, two-way messaging allows a sender to not only send a request but also to receive a specific response back from the receiver.

The Request-Response Model

Two-way communication follows a simple request-response model:

A component (e.g., a popup) sends a message (the request).
Another component (e.g., the background script) receives and processes it.
The receiving component then sends a message back (the response).
The original sender receives this response and acts on it.

Sending a Request with Callback

To send a request and expect a response, you use chrome.runtime.sendMessage() with an optional callback function. This callback will execute once the response is received.

Try running this example from a popup or 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);
    }
  }
);

Receiving & Responding (Sync)

The receiving component (often your background service worker) listens for messages using chrome.runtime.onMessage.addListener(). This listener receives the request, sender, and a special sendResponse function.

To send a synchronous response, simply call sendResponse() with your data. The message channel will then close.

/* 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
  }
);

Handling Async Responses

What if your response depends on an asynchronous operation, like fetching data from an API or local storage? If you call sendResponse() inside an async callback, the message channel might close before your response is ready.

To prevent this, return true from your onMessage.addListener callback. This tells Chrome to keep the channel open, allowing you to call sendResponse() later.

/* 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 to Content Script

You can also establish two-way communication directly between a popup and a content script running on the active tab. For this, the popup uses chrome.tabs.sendMessage(), specifying the tab ID.

The content script then uses chrome.runtime.onMessage.addListener(), just like a background script.

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

Content Script Responds

Here's how the content script on the web page would receive the message from the popup and send back the currently selected text.

Remember, the content script also uses chrome.runtime.onMessage.addListener() and can use 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
  }
);

Error Handling Tips

Robust error handling is crucial:

Check chrome.runtime.lastError: After sendMessage(), always check this property to catch errors like disconnected ports (e.g., if the receiving script isn't active).
Include status in response: Design your response objects with a status field (e.g., 'success', 'error') and an optional message or error field for details.
Handle undefined responses: The callback might be called with an undefined response if the receiver doesn't call sendResponse().

Best Practices for Two-Way

To ensure smooth and maintainable two-way messaging:

Define clear message types: Use a type or action field in your message objects (e.g., {type: "getData"}) to easily identify intent.
Keep messages simple: Pass only necessary, JSON-serializable data. Avoid complex objects or DOM elements.
Centralize listener logic: If possible, use a single onMessage.addListener in your background script and route requests based on their type.
Document message contracts: Clearly define what each message type expects and what response it returns.

Check Your Understanding

Test your knowledge of two-way messaging!

Recap & Next Steps

You've mastered two-way messaging!

You learned how to send requests using chrome.runtime.sendMessage() and receive responses via a callback.
You can now use chrome.runtime.onMessage.addListener() with sendResponse() to reply to messages, handling both synchronous and asynchronous scenarios.
You also saw how to enable communication between popups and content scripts using chrome.tabs.sendMessage().

Next, you'll explore how to persist data using the chrome.storage API, which often works hand-in-hand with messaging!

よくある質問

「コンポーネント間の双方向メッセージング」レッスンは無料ですか？

はい。「コンポーネント間の双方向メッセージング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Browser Extensions Development (Chrome & Edge)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

「コンポーネント間の双方向メッセージング」で何を学びますか？

メッセージパッシングを使ったリクエストとレスポンスのやり取りを通じて、拡張機能の各要素間でより複雑な双方向通信を実現します。ブラウザで直接実行するハンズオンコードでBrowser Extensions Development (Chrome & Edge)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Browser Extensions Development (Chrome & Edge)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのBrowser Extensions Development (Chrome & Edge)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「コンポーネント間の双方向メッセージング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このBrowser Extensions Development (Chrome & Edge)レッスンでコードを書いて実行できますか？

はい。すべてのBrowser Extensions Development (Chrome & Edge)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Browser Extensions Development (Chrome & Edge)に戻る