Chrome扩展Manifest V3中如何通过iframe的ID标签获取Frame ID以用于chrome.scripting.executeScript

Great question! The core problem here is that chrome.webNavigation.getAllFrames() doesn't provide access to DOM attributes like an iframe's id—it only returns frame metadata (URL, frameId, parentFrameId, etc.). To target a specific iframe by its ID, we need to bridge the gap between the DOM and Chrome's extension APIs.

Here's a step-by-step solution:

1. Understand the Workflow #

We'll first inject a small script into the main page frame to locate the target iframe in the DOM, then use a Chrome-specific API to get its corresponding frameId. Once we have that frameId, we can safely inject our desired script only into that iframe.

2. Updated Background Service Worker Code (background.js) #

Replace your existing code with this async/await-based implementation, which is cleaner and more reliable:

// Listen for when the page fully loads (so iframes are present in the DOM)
chrome.webNavigation.onCompleted.addListener(async (details) => {
  // Restrict to www.naver.com to avoid unnecessary operations
  if (!details.url.startsWith('https://www.naver.com/')) return;

  try {
    // Step 1: Inject a helper function into the main frame to get the target iframe's frameId
    const [frameIdResult] = await chrome.scripting.executeScript({
      target: { tabId: details.tabId, frameIds: [0] }, // Main frame always has frameId 0
      func: retrieveTargetFrameId,
      args: ['da_iframe_time'] // Pass your target iframe's ID here
    });

    const targetFrameId = frameIdResult.result;
    if (!targetFrameId) {
      console.log('Target iframe with ID "da_iframe_time" not found');
      return;
    }

    // Step 2: Inject your actual script into the target iframe
    await chrome.scripting.executeScript({
      target: { tabId: details.tabId, frameIds: [targetFrameId] },
      files: ['injectCode.js']
    });

    console.log(`Successfully injected into frame ID: ${targetFrameId}`);
  } catch (error) {
    console.error('Error during injection process:', error);
  }
});

// This function runs in the main page's context to find the iframe and get its frameId
function retrieveTargetFrameId(targetIframeId) {
  const targetIframe = document.getElementById(targetIframeId);
  if (!targetIframe) return null;

  // Use Chrome's webFrame API (only available in content scripts) to get the frameId
  return chrome.webFrame.getFrameId(targetIframe);
}

3. Critical Manifest.json Permissions #

Make sure your manifest.json includes these required permissions to make this work:

{
  "manifest_version": 3,
  "name": "Your Extension Name",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["webNavigation", "scripting"],
  "host_permissions": ["https://www.naver.com/*"]
}

Key Notes #

• Why onCompleted instead of onCommitted? onCommitted fires when navigation starts, but the page (and its iframes) might not be fully rendered yet. onCompleted ensures the DOM is ready, so we can reliably find the target iframe.
• chrome.webFrame.getFrameId(): This is a Chrome-exclusive API available only in content scripts. It directly maps a DOM iframe element to its internal frameId, which is exactly what we need.
• Async/Await: Using async/await replaces callback hell and makes error handling much simpler than nested callbacks.

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