如何实现浏览器扩展HTML页面背景完全透明

开发浏览器扩展时，扩展弹窗会存在浏览器默认渲染的白色小框，需要在写入业务HTML代码前将弹窗背景设置为完全透明，以下是可直接复用的实现方案：

初始状态 #

默认白框效果 #

初始HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
  </head>
<body>
  <script type="text/javascript" src="./script.js" ></script>
</body>
</html>

初始CSS代码（存在问题，无法消除白框） #

* {
  padding:0;
  margin:0;
  vertical-align:baseline;
  list-style:none;
  border:0
}

html {
  background: transparent;
}

调整后可生效代码 #

调整后效果 #

修正后CSS代码 #

/* 必须同时给html、body设置透明，仅设置html不生效 */
html, body {
  /* 要完全透明可直接写background: transparent; 或 rgba(0,0,0,0) */
  /* 用0.01的alpha值是为了规避部分Chromium内核浏览器全透明时的点击穿透、渲染异常bug，视觉上无感知 */
  background: rgba(0, 0, 0, 0.01);
}

/* 业务容器示例，可实现毛玻璃效果 */
div {
  width: 300px;
  height: 300px;
  background: rgba(0, 0, 0, 0.1);
  /* border-radius: 16px; */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(11.6px);
  -webkit-backdrop-filter: blur(11.6px);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

调整后HTML代码（新增业务容器） #

<!-- 新增业务容器div -->
<div>
    TESTE
</div>

核心注意点 #

• 浏览器扩展弹窗的默认白底是浏览器自身给弹窗根层加的默认样式，仅给html标签设置透明无法覆盖，必须同时选中html和body标签设置透明属性才能完全消除白框
• 若不需要毛玻璃效果，删除业务容器的backdrop-filter相关属性即可，背景会保持完全透明
• 部分低版本浏览器不支持backdrop-filter属性，可根据业务需求判断是否需要加降级样式

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