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

Question

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

Answer 1

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

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