如何通过JavaScript在Chrome中实现“查看框架源”及监控跨域iframe URL变化？

Alright, let's break this down for you—since you're dealing with cross-origin iframes, the basic iframe.src check won't work here, and you already know why: the same-origin policy blocks parent pages from accessing most data in cross-domain iframes. But lucky for you, Chrome has some tools we can leverage to get around this, specifically extensions and the DevTools Protocol. Let's dive in.

Chrome extensions have elevated permissions that let them bypass same-origin restrictions for monitoring iframe navigation. Here's how to build a simple one:

Step 1: Create the Manifest File #

First, make a folder for your extension and add a manifest.json file with the required permissions:

{
  "manifest_version": 3,
  "name": "Cross-Origin Iframe Monitor",
  "version": "1.0",
  "permissions": ["webNavigation", "tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>"] // Or restrict to specific domains you care about
}

Step 2: Write the Background Service Worker #

Create a background.js file to listen for iframe navigation events:

// Listen for when any frame finishes loading
chrome.webNavigation.onCompleted.addListener((details) => {
  // Frame ID 0 is the main page; non-zero IDs are iframes
  if (details.frameId !== 0) {
    console.log(`🚨 Iframe URL Updated: ${details.url}`);
    // Get parent tab info to locate the iframe context
    chrome.tabs.get(details.tabId, (tab) => {
      console.log(`Parent Tab URL: ${tab.url}, Iframe Frame ID: ${details.frameId}`);
    });
  }
}, { url: [{ urlMatches: '.*' }] }); // Adjust the URL filter to target specific sites

Step 3: Load the Extension in Chrome #

• Open chrome://extensions/
• Toggle on "Developer mode" (top-right corner)
• Click "Load unpacked" and select your extension folder

Once loaded, this extension will log every cross-origin iframe's URL change and its parent tab context directly to the extension's background console (you can access this via the "Inspect views" link on the extension's card in chrome://extensions/).

If you just need to inspect iframe URLs for debugging purposes, you can use the Chrome DevTools Protocol (CDP) directly in the browser's console:

// Fetch the full frame tree of the current tab
await chrome.debugger.sendCommand(
  { tabId: chrome.devtools.inspectedWindow.tabId },
  "Page.getFrameTree"
).then((result) => {
  // Recursively log all iframes
  const logFrames = (frame) => {
    if (frame.id !== result.frameTree.frame.id) { // Skip main page
      console.log(`Iframe URL: ${frame.url}, Frame ID: ${frame.id}`);
    }
    if (frame.childFrames) frame.childFrames.forEach(logFrames);
  };
  logFrames(result.frameTree.frame);
});

Note: This requires the page to be in debug mode, and you'll need to enable the "Debugger" permission in the DevTools settings if prompted. It's great for quick checks but not ideal for ongoing monitoring.

You noticed iframe.src doesn't update—this is because:

• For SPAs using client-side routing (hash or history API), the iframe's src never changes, even though the internal URL does.
• For cross-domain navigations, the same-origin policy blocks the parent page from accessing iframe.contentWindow.location, so the src property stays stuck on the initial URL.

If you have access to modify the code inside the iframe, the cleanest solution is to use postMessage to send URL updates to the parent page:

// Inside the iframe
window.addEventListener('popstate', () => {
  window.parent.postMessage({ type: 'IFRAME_URL_CHANGE', url: window.location.href }, '*');
});

// Inside the parent page
window.addEventListener('message', (event) => {
  if (event.data.type === 'IFRAME_URL_CHANGE') {
    console.log('Iframe URL updated to:', event.data.url);
  }
});

This is the most secure cross-domain approach since it relies on explicit communication between the two contexts.

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