Chrome扩展：实现后台、内容脚本与弹窗间的消息传递

Alright, let's walk through how to fully wire up message passing between your background script, content scripts, and popup in a Chrome Extension, building on the code snippets you already have. I'll break this down into clear, actionable parts so you can see exactly how each component communicates.

1. First, clarify each script's role #

• Background Script (background.js)：Runs persistently in the background, handles global logic and state management
• Content Script (content.js)：Injected into web pages, interacts with the page DOM, and communicates with the background
• Popup Script (popup.js)：Loaded when the extension icon is clicked, serves as the user interaction entry point, and talks to both background and content scripts

2. Complete the long-lived connection (Port) implementation #

You already started using chrome.runtime.connect for persistent bidirectional communication (great for real-time sync or multiple back-and-forth messages). Let's fill in the gaps for all ends:

Background Script (background.js) #

// Listen for connection requests from content scripts or popup
chrome.runtime.onConnect.addListener((port) => {
  // Validate the connection name to avoid unwanted connections
  if (port.name === 'knock') {
    console.log('Long-lived connection established:', port);

    // Listen for messages sent through this port
    port.onMessage.addListener((msg) => {
      console.log('Background received port message:', msg);
      
      // Example: Send a reply back through the same port
      port.postMessage({ reply: 'Got your message! Content: ' + msg.content });
    });

    // Handle connection disconnects (e.g., when the tab closes or popup closes)
    port.onDisconnect.addListener(() => {
      console.log('Long-lived connection disconnected');
    });
  }
});

Content Script (content.js) #

You already have some code here—let's extend it to handle incoming messages and send outgoing ones properly:

// Establish a long-lived connection to the background
const port = chrome.runtime.connect({ name: 'knock' });

// Listen for replies from the background
port.onMessage.addListener((msg) => {
  console.log('Content script received background reply:', msg);
});

// Example: Send a message to the background through the port
port.postMessage({ content: 'Hey background, this is the content script!' });

// Keep your existing one-time message listener for single request/response flows
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log('Content script received one-time message:', message);
  console.log('Message sender:', sender);
  
  // Send a response back (return true if you're handling async operations here)
  sendResponse({ status: 'One-time message received successfully' });
});

Popup Script (popup.js) #

The popup can use both long-lived ports and one-time messages—here's how to set that up:

// Establish a long-lived connection to the background
const popupPort = chrome.runtime.connect({ name: 'knock' });

// Listen for replies from the background
popupPort.onMessage.addListener((msg) => {
  console.log('Popup received background reply:', msg);
});

// Example: Send a message when a button in the popup is clicked
document.getElementById('send-port-btn').addEventListener('click', () => {
  popupPort.postMessage({ content: 'Hey background, this is the popup!' });
});

// Example: Send a one-time message (ideal for single request/response)
document.getElementById('send-single-btn').addEventListener('click', () => {
  chrome.runtime.sendMessage(
    { type: 'popup_single_msg', content: 'This is a one-time message from the popup' },
    (response) => {
      console.log('Popup received one-time reply:', response);
    }
  );
});

3. One-time message passing (for single request/response) #

One-time messages are simpler for cases where you don't need a persistent connection (like fetching a single piece of state from the background). Let's add the necessary listeners and senders:

Background Script (background.js) #

Add this to handle one-time messages:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log('Background received one-time message:', message);
  
  // Use a type field to handle different message types cleanly
  switch(message.type) {
    case 'content_single_msg':
      sendResponse({ reply: 'Background got your one-time message from the content script' });
      break;
    case 'popup_single_msg':
      sendResponse({ reply: 'Background got your one-time message from the popup' });
      break;
    default:
      sendResponse({ error: 'Unknown message type' });
  }
  
  // Important: Return true if you're doing async work (like API calls) here
  // This keeps the sendResponse channel open until your async operation finishes
  // Example:
  // fetch('https://api.example.com/data')
  //   .then(res => res.json())
  //   .then(data => sendResponse({ data }))
  // return true;
});

Content Script (content.js) #

Add this to send a one-time message:

// Send a one-time message to the background
chrome.runtime.sendMessage(
  { type: 'content_single_msg', content: 'This is a one-time message from the content script' },
  (response) => {
    console.log('Content script received one-time reply:', response);
  }
);

4. Direct popup-to-background access (special case) #

Since the popup shares the extension's context with the background script, you can directly access the background's global variables and functions if needed:

// In popup.js
chrome.runtime.getBackgroundPage((backgroundPage) => {
  // Call a global function defined in background.js
  backgroundPage.handlePopupAction();
  // Access a global variable from background.js
  console.log('Background global state:', backgroundPage.globalState);
});

5. Key things to remember #

• Permissions: Make sure your manifest.json includes required permissions like "activeTab" (for injecting content scripts), "scripting" (Chrome 88+ for dynamic script injection), or "storage" (if you need to persist state).
• Async Handling: When using sendResponse with async operations, always return true to keep the response channel open—otherwise Chrome will close it immediately.
• Connection Cleanup: Listen for port.onDisconnect to handle unexpected connection drops (like when a tab or popup closes).
• Message Typing: Always include a type field in your messages to avoid mixing up different message flows—this makes your code much easier to maintain.

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