Alright, let's tackle your two Chrome extension development questions one by one—super common scenarios, so I'll break them down with practical examples:

Chrome extensions have several built-in mechanisms to handle communication between different parts of your extension (like popups, options pages, content scripts, and the background script). Here are the most widely used ones:

• One-time request-response with chrome.runtime.sendMessage
  Perfect for quick, one-off interactions (e.g., a popup asking the background for stored data). It's simple and supports callback-based responses.
  Example (Popup script):

  // popup.js
  chrome.runtime.sendMessage({ action: "fetchUserSettings" }, (response) => {
    console.log("Got settings from background:", response.settings);
  });
  

  Example (Background script listener):

  // background.js
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "fetchUserSettings") {
      chrome.storage.local.get("userSettings", (result) => {
        sendResponse({ settings: result.userSettings });
      });
      // Return true to indicate we'll send a response asynchronously
      return true;
    }
  });
  

• Persistent long-lived connections with chrome.runtime.connect
  Use this when you need ongoing two-way communication (e.g., a real-time status update between a page and the background).
  Example (Options page script):

  // options.js
  const connection = chrome.runtime.connect({ name: "options-background" });
  connection.postMessage({ action: "enableRealTimeSync" });
  
  // Listen for updates from background
  connection.onMessage.addListener((message) => {
    if (message.type === "syncUpdate") {
      console.log("Sync status changed:", message.status);
    }
  });
  

  Example (Background script listener):

  // background.js
  chrome.runtime.onConnect.addListener((port) => {
    if (port.name === "options-background") {
      port.onMessage.addListener((msg) => {
        if (msg.action === "enableRealTimeSync") {
          // Start sync logic, then send updates back
          port.postMessage({ type: "syncUpdate", status: "active" });
        }
      });
    }
  });
  

• Tab-specific communication with chrome.tabs.sendMessage
  This is for sending messages to content scripts running inside specific browser tabs (since content scripts live in the web page's context, not the extension's).
  Example (Background script sending to a tab):

  // background.js
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, { action: "highlightKeywords" }, (response) => {
      console.log("Highlighted count:", response.count);
    });
  });
  

  Example (Content script listener):

  // content.js
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "highlightKeywords") {
      const keywords = document.querySelectorAll(".keyword");
      keywords.forEach(el => el.style.backgroundColor = "yellow");
      sendResponse({ count: keywords.length });
    }
  });
  

• Shared storage for non-realtime data
  If you just need to share data (not trigger functions), use the chrome.storage API. All extension contexts can read/write to chrome.storage.local (device-specific) or chrome.storage.sync (synced across user's devices).
  Example (Saving data from popup):

  chrome.storage.local.set({ theme: "dark" }, () => {
    console.log("Theme saved");
  });
  

  Example (Reading data from background):

  chrome.storage.local.get("theme", (result) => {
    console.log("Current theme:", result.theme);
  });
  

To let your extension's pages (popup, options, etc.) call functions in background.js, you need to understand these key concepts:

• Background script context isolation
  The background script runs in a separate, isolated context (a service worker in Manifest V3, a hidden page in Manifest V2). It's not part of any extension page, so you can't directly reference its functions—you need a communication layer.

• Runtime Messaging (primary method)
  As covered in the first question, sendMessage and connect are the standard ways to trigger background functions. You send a message with an action identifier, the background listens for that action, runs the corresponding function, and sends back a response. This works for all extension contexts, including content scripts.

• Direct background page access (Manifest V2 only)
  In Manifest V2, you can use chrome.runtime.getBackgroundPage() to get the background page's window object, then call its global functions directly. This is simpler but only works for extension pages (not content scripts), and it's not supported in Manifest V3 (since service workers don't have a window object).
  Example:

  // popup.js (Manifest V2)
  chrome.runtime.getBackgroundPage((backgroundWindow) => {
    // Call a global function defined in background.js
    const apiData = backgroundWindow.fetchExternalAPIData();
    console.log("API data:", apiData);
  });
  

• Manifest V3 vs V2 differences
  If you're using Manifest V3, the background is a service worker (not a persistent page). This means:

  • No getBackgroundPage() support—stick to messaging.
  • Service workers are event-driven and can be terminated when idle, so any state needs to be saved to chrome.storage or IndexedDB (don't rely on in-memory variables).
  • Use chrome.runtime.sendMessage or chrome.runtime.connect for all function calls.

• Serializable data only
  When sending messages, you can only pass JSON-serializable data (strings, numbers, objects, arrays)—you can't send functions directly. So you'll need to trigger the function execution in the background via a message, then send back the result.

• Permission configuration
  Make sure your manifest.json includes the necessary permissions for your use case. For example:

  {
    "permissions": ["storage", "tabs", "scripting"],
    "background": {
      "service_worker": "background.js" // Manifest V3
      // Manifest V2: "scripts": ["background.js"], "persistent": false
    }
  }
  

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