Chrome扩展如何访问跨域iframe内的元素？

你遇到的跨域错误是因为浏览器同源策略禁止主页面上下文（哪怕是Chrome扩展的Content Script）直接访问不同源iframe的contentDocument/contentWindow。正确的做法是让Content Script直接注入到目标iframe中，在iframe自身的上下文里操作DOM。

步骤1：确保Manifest配置正确 #

保持all_frames: true，如果知道目标iframe的域名，尽量精准配置matches以避免不必要的注入：

// manifest.json
"content_scripts": [
  {
    "matches": ["<all_urls>", "https://目标iframe域名.com/*"], // 替换为实际iframe域名
    "js": ["content.js"],
    "all_frames": true,
    "run_at": "document_idle"
  }
]

步骤2：修改Content Script逻辑 #

不需要从主页面去查找iframe，而是让Content Script在iframe上下文中直接查找目标元素：

// content.js
// 直接在当前上下文（可能是主页面或iframe）查找目标输入框
const manualScanInput = document.getElementById('manual-scan-input');

if (manualScanInput) {
  console.log("找到输入框: ", manualScanInput);
  // 这里可以直接操作输入框，例如：
  // manualScanInput.value = "自动填充内容";
  // manualScanInput.focus();
}

处理动态加载的元素 #

如果目标输入框是iframe加载后动态生成的，用MutationObserver监听DOM变化：

// content.js
function handleInputElement(input) {
  console.log("找到输入框: ", input);
  // 执行你的操作
}

function checkForInput() {
  const input = document.getElementById('manual-scan-input');
  if (input) {
    handleInputElement(input);
    observer.disconnect(); // 找到后停止监听
  }
}

// 初始检查
checkForInput();

// 监听DOM树变化，等待元素出现
const observer = new MutationObserver(checkForInput);
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: false
});

为什么原方法不行？ #

Chrome扩展的Content Script虽然拥有较高权限，但仍受浏览器同源策略限制：主页面的Content Script和跨域iframe属于不同的执行上下文，直接访问iframe.contentDocument会触发SecurityError。而通过all_frames: true配置，Content Script会被注入到所有框架（包括跨域iframe）中，此时脚本运行在iframe自身的上下文，自然可以访问其DOM。

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