如何修改Chrome扩展popup.html的背景形状或设置为透明？

要实现Popup背景透明或自定义形状，仅设置body{background: none}不够，因为Chrome的Popup容器及HTML元素有默认样式，需按以下步骤调整：

1. 重置基础样式（关键） #

修改styles.css，给html和body设置透明背景并清除默认边距，避免默认样式干扰：

html, body {
  background: transparent;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 防止内容溢出出现滚动条 */
}

2. 自定义Popup形状与内容样式 #

根据需求调整.outside-frame的样式，比如实现圆角或圆形Popup：

示例1：圆角Popup #

.outside-frame{
  background-color: rgb(32, 32, 32);
  width: 220px;
  padding: 15px;
  border-radius: 12px; /* 自定义圆角大小 */
  color: #fff;
}

示例2：圆形Popup #

.outside-frame{
  background-color: rgb(32, 32, 32);
  width: 200px;
  height: 200px;
  border-radius: 50%; /* 圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

3. 修正Popup.html的冗余代码 #

移除body标签的background="none"属性（CSS样式优先级更高，无需重复设置），同时把错误的<dir>标签换成标准<div>：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ellipses</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="outside-frame">
        <div class="inside-frame">
            <h1>hello</h1>
        </div>
    </div>
</body>
</html>

4. Manifest.json无需额外修改 #

当前Manifest v3配置已满足需求，无需添加额外权限。

完成以上修改后，重新加载Chrome扩展即可看到透明背景的自定义形状Popup。

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