如何在各种网页的左侧插入侧边栏？答案

【问题标题】：How to insert sidebar to the left of all kind of webpage?如何在各种网页的左侧插入侧边栏？
【发布时间】：2022-08-09 04:17:12
【问题描述】：

我需要在当前页面的左侧插入一个侧边栏来显示输出。插入不应隐藏主页，

相反，它应该挤压或调整，显示所有内容。

问题是，the solution 我得到的不适用于所有类型的网页，有没有办法按照我描述的方式插入侧边栏？

谢谢。

请查看以下评论以了解问题：stackoverflow.com/questions/72649340/…
如果不全面更新页面的 CSS 并跟踪页面的所有样式更改，您不太可能使所有页面都使用此功能。
@Ouroborus 变异的数量大吗？我没有经验，所以我不知道，但如果有几种方法，那么我们可以检查并以编程方式采取必要的步骤。
可以在 iframe 中加载主页吗？
@AaronMeese 是的，我意识到了，这不是唯一的问题。

标签： javascript html google-chrome-extension sidebar

【解决方案1】：

我不相信会有一个真正通用的解决方案，但我希望我的createDockedSidebar function 可以支持尽可能多的案例。

它采用以下参数：

parentElement 是安装侧边栏的位置（默认为body）；
element 是侧边栏本身（默认为新创建的div）；
size 是侧边栏的宽度/高度（必填number）；
placement 是left、top、right 或bottom（默认为left）；
strategy 是用于为侧边栏腾出空间的方法：
- margin & padding 适用于parentElement
- children-margin & children-padding 适用于parentElement 的所有孩子
- children-transform 适用于 translateX/translateY 的所有子 parentElement
- container 移动 parentElement 另一个元素的所有子元素；
container 是在使用container 策略时移动parentElement 的所有子元素的元素。

children-transform 和 container 是唯一可能支持 placement 的 top 和 bottom 值的策略。

在 Wikipedia 上，container 是唯一可以正常工作的策略。幸运的是，它是一个服务器端呈现的网站。

实际上，客户端呈现的网站更有可能打破这种模式，因为它们可能会将元素移回其原始位置，尤其是在导航期间。尽管MutationObserver 可能有助于在 PWA 上克服这一点，但它们可能会变得不稳定。

更多测试：

在 StackOverflow 上，除了 container 之外的所有策略都有效，尽管 children-margin 是唯一可以处理标题的策略；
在 MDN 上，除顶部/底部位置外，所有策略都可以使用；
在 Google 上，除了container 之外的所有策略都适用于左侧展示位置，而没有一个适用于顶部/右侧/底部展示位置；
在 GitHub 和 Reddit（旧）上，除了 children-transform 的顶部/底部放置和右侧放置之外的所有策略都将起作用。

【讨论】：

非常感谢您的努力，为了测试您的代码，请根据此链接中的content.js 调整它（问题的来源）：stackoverflow.com/q/72649340/11974735 谢谢。
我不明白你需要什么调整?
我猜你会用createDockedSidebar({ parentElement: view.document.body, element: edit }) 替换view.document.body.appendChild(edit)。
请分享您可以在我的浏览器上运行的扩展程序的minimal reproducible example。
不幸的是，由于您未能证明，您的代码无法获得赏金......建议是，删除此答案，根据该上下文在由 OP 链接的原始帖子中发布适当的演示，然后联系我，我可能会奖励赏金专门为您声明，前提是它正在工作。

【解决方案2】：

也许如果您将网站结构更改为以下内容：

<body style="display: grid; grid-template-areas: 'c-nav c-content'">
    <nav style="grid-area: c-nav"></nav>
    <div style="grid-area: c-content"> {the original content should go here} </div>
</body>

我不确定这是否是您想要做的，但是...?

【讨论】：