问题描述
Mozilla 在 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples 中包含大量浏览器扩展。其中之一是“brorderify”，它有一个为页面匹配添加边框的内容脚本：
我已将匹配项设置为 "matches": ["<all_urls>"]，边框已添加到大多数站点（谷歌搜索、twitch、ucla.edu），但并非在所有站点上。我发现它在 youtube 或 reddit 上不起作用。他们是如何阻止它的？
检查身体表明他们是一个边界，即使我们看不到它。
删除 <ytd-app>...</ytd-app> 标签实际上会显示边框。
边框如何覆盖或不显示？
解决方法
如果您使用元素选择器和 body 标记的悬停，您会看到 body 标记仅显示页面的很小一部分。其他元素使用绝对位置覆盖在主体顶部。 Youtube 有一些奇怪的自定义标签，将其样式设置为在身体上的绝对位置。
看看这个 ytd-app 标签，在右边你可以看到样式设置在 {position: absolute,top: 0,right: 0} ，它设置在 body 的正上方。还有一些其他标签在不同的位置做同样的事情......这是一个巨大的混乱。
如果你在这个标签上设置边框，你会在右侧看到一个边框，但不是全部。还有其他标签覆盖在顶部。可能一个标签覆盖了侧边栏的绝对位置，另一个用于应用栏等。