Chrome扩展：popup.html与content.js双向消息传递及DOM访问问题

Got it, let's sort out this message passing issue and get you set up with DOM modification for your Manifest v2 Chrome extension. Here's a complete, minimal working example you can expand on later:

1. Full Manifest v2 Configuration #

First, let's finish and correct your manifest to ensure content scripts are injected properly and we have the right permissions:

{
  "manifest_version": 2,
  "name": "Extension",
  "description": "Description",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // Replace with specific sites like "https://example.com/*" if needed
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab"]
}

The content_scripts section ensures content.js gets injected into pages matching your specified URLs, and activeTab lets us access the current open tab for messaging.

2. Popup Files (HTML + JS) #

popup.html #

A simple popup with a button to trigger messages and a display area for responses:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 200px; padding: 10px; margin: 0; }
    button { width: 100%; padding: 8px; margin: 8px 0; cursor: pointer; }
    #responseArea { margin-top: 10px; padding: 8px; border: 1px solid #eee; }
  </style>
</head>
<body>
  <button id="sendBtn">Send Message to Content</button>
  <div id="responseArea">Waiting for response...</div>

  <script src="popup.js"></script>
</body>
</html>

popup.js #

Handles sending messages to content.js and listening for replies from it:

// Send message to content.js when button is clicked
document.getElementById('sendBtn').addEventListener('click', () => {
  // Get the current active tab in the current window
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const activeTab = tabs[0];
    
    // Send message to content.js
    chrome.tabs.sendMessage(activeTab.id, {
      type: 'POPUP_TO_CONTENT',
      data: 'Hello from Popup!'
    }, (response) => {
      // Handle errors (e.g., content.js not loaded yet)
      if (chrome.runtime.lastError) {
        document.getElementById('responseArea').textContent = `Error: ${chrome.runtime.lastError.message}`;
        return;
      }
      // Display content.js's reply
      document.getElementById('responseArea').textContent = `Content replied: ${response.data}`;
    });
  });
});

// Listen for messages from content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'CONTENT_TO_POPUP') {
    document.getElementById('responseArea').textContent = `Content sent: ${message.data}`;
    // Send a reply back to content.js
    sendResponse({data: 'Got your message, Popup here!'});
  }
});

Note: Always check chrome.runtime.lastError — this is probably why you saw undefined before: if content.js isn't loaded in the tab yet, the message fails silently without this check.

3. content.js (DOM Manipulation + Messaging) #

This script runs in the page's context, so you can modify the DOM freely and communicate with the popup:

// Listen for messages from the popup
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'POPUP_TO_CONTENT') {
    console.log('Received from popup:', message.data);
    
    // Example DOM modifications
    // 1. Change the page title
    document.title = 'Modified by My Extension!';
    // 2. Add a floating notification to the page
    const notification = document.createElement('div');
    notification.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      background: #4CAF50;
      color: white;
      padding: 12px 20px;
      border-radius: 4px;
      z-index: 99999;
      font-family: Arial;
    `;
    notification.textContent = message.data;
    document.body.appendChild(notification);
    
    // Remove the notification after 3 seconds
    setTimeout(() => notification.remove(), 3000);
    
    // Send a reply back to the popup
    sendResponse({data: 'Hello from Content! I just modified the DOM.'});
  }
});

// Optional: Send a message to the popup when the page loads
window.addEventListener('load', () => {
  chrome.runtime.sendMessage({
    type: 'CONTENT_TO_POPUP',
    data: 'Page finished loading, content script ready!'
  }, (response) => {
    console.log('Popup replied:', response.data);
  });
});

Here we're directly modifying the page's DOM (changing title, adding a floating div) and sending/receiving messages with the popup.

4. background.js (Optional) #

You can leave this empty if you don't need background processing, or add a simple logger for debugging:

// Optional: Log all messages passing through the extension
chrome.runtime.onMessage.addListener((message, sender) => {
  console.log(`Background received message:`, message, `from:`, sender);
});

Common Fix for Your Original "undefined" Issue #

The most likely reason you saw undefined is:

• You didn't wait for the tab to be ready (or content.js wasn't injected yet)
• You didn't handle chrome.runtime.lastError, so the error was hidden and the response came back as undefined
• You forgot to specify content_scripts in the manifest, so content.js never loaded in the page

Just refresh the target page after installing the extension to ensure content.js is injected, and the messaging should work as expected.

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