Chrome扩展：如何在内容脚本中访问扩展内iframe的元素？

问题背景 #

在Manifest V3版本的Chrome扩展中，我通过内容脚本向任意网页插入了加载扩展内部foo.html的iframe，但尝试访问该iframe的contentDocument时始终返回null，触发Uncaught TypeError: Cannot read properties of null (reading 'getElementById')错误。确认iframe已完全加载，判断是跨域限制导致。实际需求是提取当前网页内容处理后，更新iframe内的div元素。

原因分析 #

Manifest V3中，内容脚本运行在隔离世界中，它的上下文与网页本身、扩展内部iframe的上下文相互隔离。即使iframe加载的是扩展自身资源，内容脚本也无法直接访问其contentDocument——浏览器会将扩展iframe视为独立源，与当前网页源不同，从而触发跨域安全限制。

解决方案：消息通信机制 #

利用Chrome扩展的消息API（chrome.runtime.sendMessage/chrome.runtime.onMessage）实现内容脚本与iframe的通信：内容脚本负责提取和处理网页内容，将数据发送给iframe；iframe内的脚本接收消息后，直接操作自身DOM完成更新。

修改后的代码示例 #

1. 更新foo.html，添加消息监听脚本

<!DOCTYPE html>
<html lang="en">
<body>
<div id="foo">WAITING</div>
<script>
// 监听来自内容脚本的更新消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'UPDATE_IFRAME_CONTENT') {
    // 直接操作iframe内的DOM
    document.getElementById('foo').textContent = message.processedContent;
    // 可选：回复消息确认操作完成
    sendResponse({ status: 'updated' });
  }
});
</script>
</body>
</html>

2. 修改content.js，实现内容提取与消息发送

(function() {
  const frame = document.createElement('iframe');
  frame.id = 'foo';
  frame.src = chrome.runtime.getURL('foo.html');
  frame.style.width = '100px';
  frame.style.height = '100px';
  frame.style.position = 'fixed';
  frame.style.zIndex = '99999';
  frame.style.top = '0';
  frame.style.left = '0';
  document.body.appendChild(frame);
})();

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.shiftKey && event.code === 'KeyY') {
    // 1. 提取网页内容（示例：获取网页标题，可根据实际需求替换）
    const rawPageContent = document.title;
    // 2. 处理内容（这里是示例逻辑，实际可替换为业务处理）
    const processedContent = `处理完成：${rawPageContent}`;
    
    // 3. 向iframe发送消息
    chrome.runtime.sendMessage({
      type: 'UPDATE_IFRAME_CONTENT',
      processedContent: processedContent
    }, (response) => {
      if (chrome.runtime.lastError) {
        console.error('消息发送失败:', chrome.runtime.lastError);
      } else {
        console.log('iframe内容已更新', response);
      }
    });
  }
});

额外说明 #

• 如果需要更复杂的双向交互（比如iframe向内容脚本发送数据），可以使用chrome.runtime.connect建立长连接，替代一次性的消息发送。
• 若iframe的脚本是外部文件（如foo.js），需在manifest.json的web_accessible_resources中添加该文件的配置，确保能被iframe正常加载。

内容的提问来源于stack exchange，提问作者Marcin Barczyński