开发Chrome扩展时popup窗口未显示指向扩展图标的提示箭头

Popup指向扩展图标的小箭头功能并没有被官方移除，日常碰到的无箭头情况，本质是Chrome版本迭代后调整了箭头的触发和显示逻辑，不符合触发条件时就会自动隐藏。

无箭头的常见触发原因 #

• 触发路径不满足要求：只有直接点击浏览器常驻工具栏上的扩展图标打开Popup时，才会显示指向箭头。如果是从拼图形状的扩展溢出二级菜单里点击图标打开、或者通过快捷键、右键菜单、浏览器命令触发打开Popup，Chrome默认不会显示指向箭头。
• 尺寸不符合默认适配规则：从Chrome 117正式版开始，Popup的箭头改成了动态显示逻辑——如果Popup设置的尺寸过大（比如高度超过屏幕1/3、宽度超过480px），或者内容撑得太满，Chrome会自动隐藏箭头，避免箭头和Popup内容产生视觉遮挡。
• 样式干扰：如果给Popup的根元素设置了全局position: fixed、自定义外边距过大，导致Popup弹出的渲染位置和扩展图标不在同一水平视区内，Chrome也会自动隐藏箭头。

复现带箭头Popup效果的操作方法 #

• 先把目标扩展固定到浏览器常驻工具栏，不要把它放在扩展溢出菜单里，打开Popup时直接点击工具栏上的扩展图标本体，不要从二级菜单触发。
• 调整Popup页面的基础尺寸，不要把尺寸设置得过大：可参考常规小弹窗比例给Popup的body元素设置基础样式，比如

  body {
    margin: 0;
    width: 320px;
    max-height: 480px;
    overflow-x: hidden;
  }
  

  尺寸越贴合常规弹窗比例，Chrome弹出时越会默认附带指向扩展图标的箭头。
• 不要给Popup页面添加会打乱原生弹窗定位逻辑的全局样式，比如不要给最外层容器设置强制偏移的定位属性，避免Chrome因为定位偏移自动隐藏箭头。

注意：如果使用的是Chrome Canary开发版，部分实验性UI开关会临时关闭Popup箭头的显示，这时候可以在chrome://flags里搜索Popup相关的UI实验项，把对应开关恢复成默认值即可正常显示箭头。

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