Chrome 66.0更新后扩展popup.html无法正常显示问题求助

我之前也碰到过类似的Chrome版本兼容问题，结合Chrome 66.x的更新细节和你的描述，大概率是这几个原因导致的：

1. Popup尺寸计算逻辑的兼容性变化 #

Chrome 66对popup的自动尺寸计算规则做了调整——在65及更早版本中，即使popup的HTML/CSS没有明确设置宽高，浏览器会根据内容自动撑开窗口；但66版本对无明确尺寸的popup处理更严格，一旦内容加载出现延迟或渲染异常，就会被错误计算成极小的空白块。

解决办法：给popup的根元素明确设置最小宽高，避免尺寸塌陷：

/* 在popup的CSS文件中添加 */
body {
  min-width: 300px;
  min-height: 400px;
  margin: 0; /* 去掉默认边距避免额外尺寸偏差 */
}

2. Content Security Policy (CSP) 限制收紧 #

你提到manifest里有content_security_policy配置，Chrome 66加强了CSP的执行力度，之前允许的某些内联脚本/样式在新版本中会被严格拦截，导致popup核心内容无法渲染，进而触发尺寸塌陷。

检查与解决：

• 如果你用了内联脚本（比如<script>...</script>），确认CSP是否添加了'unsafe-inline'（manifest v2允许此配置，v3不推荐）
• 尽量把内联样式移到外部CSS文件，若必须保留内联样式，需在CSP的style-src中添加'unsafe-inline'
  示例兼容配置：

"content_security_policy": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"

3. DOM加载时机的兼容性问题 #

Chrome 66可能改变了popup的DOM加载触发顺序，若你的代码依赖DOMContentLoaded或window.onload的旧有触发时机，可能导致内容还未渲染就被浏览器计算了尺寸，最终出现空白小方块。

解决办法：确保脚本在DOM完全加载后执行，或用defer属性加载外部脚本避免阻塞渲染：

<!-- 在popup.html中修改脚本引入方式 -->
<script src="popup.js" defer></script>

4. Chrome 66的特定版本Bug #

Chrome 66刚发布时确实存在一些popup相关的已知Bug，比如动态内容（异步加载数据）场景下的窗口尺寸计算错误，会导致popup闪过后收缩成空白块。

临时修复方案：在内容渲染完成后手动触发窗口尺寸重算：

// 在popup.js中添加
setTimeout(() => {
  window.resizeTo(document.body.scrollWidth, document.body.scrollHeight);
}, 100); // 延迟100ms确保内容已渲染

建议先从明确设置popup宽高入手排查，这是该问题最常见的解决方向；若无效再依次检查CSP配置和脚本加载时机。

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