Chrome扩展程序：如何制作侧边栏？

Question

所以，基本上我正在尝试为网站制作叠加层，比如侧边栏，但我不希望网站的CSS与我的HTML进行交互。 到目前为止，我试图在iframe（在前台）的帮助下做到这一点，但用户无法点击它。 接下来我要尝试将网页加载到iframe中，将我的HTML加载为实际网站。 但我确信有一种更“干净”的方式可以做我想做的事情。

Answer 1

嗯，最好的隔离样式的方法，也是评论中建议的，就是使用 Shadow DOM 来隔离样式。但当然，最简单的方法是将 iframe 移出视口，并在父窗口上只设置一个事件处理程序。如果我没记错的话，我在 Iframe 内部有侧边栏动画的事件处理程序，这就是事件没有正确传播的原因，回想起来这很明显。但也许这对某人有帮助......?

就像@Burhan 在评论中建议的那样，这里是我的 repo 的链接，其中包含使用 Shadow DOM 的 vanilla Typescript 示例方法：https://github.com/grievouz/chrome-extension-sidebar-example。 这是使用 React 和 Iframe 的 Javascript 中的另一个：https://github.com/segmentio/chrome-sidebar。