求助：实现网页向Chrome扩展面板的单向通信并渲染消息

Hey there! Let's walk through how to set up one-way communication from a web page to your Chrome extension's panel, and render those messages in real time. I’ll break this down into actionable steps based on standard Chrome Extension best practices:

First, you need to update your manifest to enable external communication and set up core extension components. This is critical for letting web pages talk to your extension.

{
  "manifest_version": 3,
  "name": "Your Extension Name",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "externally_connectable": {
    "matches": ["<all_urls>"] // Replace with specific domains for production, e.g., "https://your-site.com/*"
  },
  "permissions": ["activeTab"]
}

• externally_connectable: Whitelists which websites can send messages to your extension. Use <all_urls> for testing only.
• background.service_worker: Acts as a middleman to relay messages between the web page and your popup (since popups only exist when open).

On your target web page, use Chrome's runtime API to send messages directly to your extension. You'll need your extension's unique ID (find this in Chrome's extension management page with developer mode enabled).

// Replace with your extension's actual ID
const EXTENSION_ID = "your_extension_unique_id_here";

// Helper function to send messages
function sendMessageToExtension(messageContent) {
  chrome.runtime.sendMessage(
    EXTENSION_ID,
    { type: "page_message", content: messageContent },
    (response) => {
      if (chrome.runtime.lastError) {
        console.log("Failed to send message:", chrome.runtime.lastError);
      } else {
        console.log("Message sent successfully!", response);
      }
    }
  );
}

// Example: Trigger send on button click
document.querySelector("#send-btn")?.addEventListener("click", () => {
  const input = document.querySelector("#message-input");
  if (input?.value) {
    sendMessageToExtension(input.value);
    input.value = "";
  }
});

• The type field helps your extension identify and handle this specific message type later.

The background service worker will listen for incoming messages from the web page, store them (in case the popup isn't open yet), and relay new messages to the popup when it's active.

// Store messages to persist them when the popup is closed
let storedMessages = [];

// Listen for messages from external web pages
chrome.runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
  if (message.type === "page_message") {
    console.log("Received message from page:", message.content);
    storedMessages.push(message.content);

    // Try to send the message directly to the popup if it's open
    chrome.runtime.sendMessage(
      { type: "new_message", content: message.content },
      () => {
        // Ignore errors here—they just mean the popup isn't open right now
      }
    );

    sendResponse({ status: "success", note: "Message received by extension" });
  }
  return true; // Keep the port open for async responses
});

// Listen for requests from the popup to fetch stored messages
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "get_messages") {
    sendResponse({ messages: storedMessages });
  }
});

Your popup will fetch stored messages when it loads, then listen for real-time updates from the background worker to render new messages immediately.

First, the popup HTML (popup.html):

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 320px; padding: 1rem; }
    .message-list { margin-top: 1rem; border-top: 1px solid #eee; padding-top: 1rem; }
    .message-item { padding: 0.5rem; margin-bottom: 0.5rem; background: #f8f9fa; border-radius: 4px; }
  </style>
</head>
<body>
  <h3>Web Page Messages</h3>
  <div class="message-list" id="messageContainer"></div>
  <script src="popup.js"></script>
</body>
</html>

Then the popup JavaScript (popup.js):

const messageContainer = document.getElementById("messageContainer");

// Helper to render a single message
function renderMessage(content) {
  const messageEl = document.createElement("div");
  messageEl.className = "message-item";
  messageEl.textContent = content;
  messageContainer.appendChild(messageEl);
}

// Fetch stored messages when the popup loads
chrome.runtime.sendMessage({ type: "get_messages" }, (response) => {
  if (response?.messages) {
    response.messages.forEach(renderMessage);
  }
});

// Listen for real-time new messages from the background
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === "new_message") {
    renderMessage(message.content);
  }
});

1. Load your unpacked extension in Chrome (enable developer mode in extensions settings, then click "Load unpacked").
2. Open a web page included in your externally_connectable matches.
3. Trigger the message send function (via button click or console).
4. Open your extension's popup—you’ll see the messages rendered instantly!

内容的提问来源于stack exchange，提问作者Joe Cho