Chrome扩展注入iframe无法获取元素：点击关闭按钮返回null

核心问题是iframe内部脚本的上下文隔离：extension_bar.js运行在iframe自身的文档环境中，它的document对象指向的是iframe_content.html的DOM，而非注入iframe的宿主页面DOM。因此用document.getElementById('extension-iframe')找不到宿主页面里的iframe元素。

以下两种简单直接的方法可以解决问题：

方法1：通过window.frameElement获取当前iframe自身 #

每个iframe内部的window.frameElement会直接指向它在父页面中的DOM元素，无需去父文档查找。修改extension_bar.js如下：

document.addEventListener('DOMContentLoaded', function () {
  const closeIcon = document.getElementById('close-icon');

  closeIcon.addEventListener('click', () => {
    // 获取当前iframe在父页面中的元素
    const iframe = window.frameElement;
    if (iframe) {
      iframe.remove();
      console.log('Iframe removed');
    }
  });
});

方法2：访问父页面的文档对象 #

如果需要操作父页面的其他元素，可以用window.parent.document访问宿主页面的DOM：

document.addEventListener('DOMContentLoaded', function () {
  const closeIcon = document.getElementById('close-icon');

  closeIcon.addEventListener('click', () => {
    // 访问父页面的document
    const iframe = window.parent.document.getElementById('extension-iframe');
    if (iframe) {
      iframe.remove();
      console.log('Iframe removed');
    }
  });
});

注：由于iframe是扩展自身注入的，Chrome扩展允许这种跨上下文访问，不会触发同源策略限制。

修改后点击关闭图标，控制台会输出"Iframe removed"，同时iframe会从宿主页面中消失。

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