Chrome扩展内容脚本中如何获取根HTML元素适配Angular侧边栏？

问题根源 #

你之前尝试用document.html获取HTML根元素是错误的，DOM标准中获取HTML根元素的正确方式是document.documentElement，也可以用document.querySelector('html')。

修改后的代码实现 #

content.js

function injectAngularApplication() {
  var angularApplicationIframe = document.createElement('iframe');
  angularApplicationIframe.src = chrome.runtime.getURL('index.html');
  angularApplicationIframe.id = 'angularApplication';
  angularApplicationIframe.allow = 'clipboard-read; clipboard-write';
  angularApplicationIframe.className = 'angular_application_iframe';

  document.body.appendChild(angularApplicationIframe);

  // 获取HTML根元素
  const htmlElement = document.documentElement;
  
  // 统一设置HTML和Body的盒模型，避免布局计算偏差
  htmlElement.style.boxSizing = 'border-box';
  document.body.style.boxSizing = 'border-box';
  
  // 调整HTML根元素样式，适配侧边栏
  htmlElement.style.width = '70%';
  htmlElement.style.marginRight = '30%';
  // 让Body占满HTML宽度，取消自身边距设置
  document.body.style.width = '100%';
  document.body.style.marginRight = '0';
}

content.css

/* 全局样式重置，解决页面原有样式冲突 */
html, body {
  box-sizing: border-box;
  overflow-x: hidden; /* 消除横向滚动条 */
}

.angular_application_iframe {
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    border: none;
    z-index: 9999;
    resize: horizontal;
    position: fixed;
}

优化说明 #

1. 正确获取HTML元素：document.documentElement是DOM规范定义的获取HTML根节点的属性，所有现代浏览器都支持，替代错误的document.html。
2. 盒模型统一：设置box-sizing: border-box确保元素宽度包含内边距和边框，避免布局宽度计算错误。
3. 层级样式控制：将侧边栏的边距控制转移到HTML根元素，避免Gmail等页面对Body样式的特殊设置导致内容无法压缩。
4. 滚动条处理：添加overflow-x: hidden防止页面出现不必要的横向滚动条。

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