如何使用 Firefox WebExtensions 创建侧边栏？答案

【问题标题】：How to create a sidebar with Firefox WebExtensions?如何使用 Firefox WebExtensions 创建侧边栏？
【发布时间】：2017-01-28 21:21:15
【问题描述】：

我正在尝试迁移一个扩展程序，是的，我知道我不能为每个 WebExtension 添加一个以上的按钮到浏览器界面，但我想知道是否可以以某种方式创建一个侧边栏。我知道我可以操纵网站的 DOM，但在某些情况下（例如 Facebook），由于他们的 css，这很困难，我需要确保我的侧边栏在用户想要使用它的任何网站上都是可见的看一些统计数据。

您知道创建伪边 (DOM) 的方法吗，无论站点如何？

PS：您认为将来会提供侧边栏（浏览器 UI）吗？

欢迎任何想法，

【问题讨论】：

bugzil.la/1208596, developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM
@DanielHerr，您对使用 Shadow DOM 的建议在这里没有帮助。这是一个 Firefox WebExtensions 问题。 Firefox does not support Shadow DOM.
@Makyen 不，但它最终应该被问到。
@DanielHerr，这使得它现在对这个问题毫无用处。此外，Shadow DOM 不是侧边栏。您可以使用 Shadow DOM 制作伪侧边栏，但它不是侧边栏。 Firefox 多年来一直支持 official 侧边栏（未添加到内容 DOM）。它已可用于附加组件，或者用户可以指定在边栏中打开书签/历史记录（链接或书签/历史 UI）（例如，按 ctrl-B 可在边栏中打开书签列表）。在 Firefox 上下文中，第二个问题是询问支持侧边栏的官方方式，而不是 DOM 操作。
直接询问：您是不是专门询问类似于可以使用附加 SDK ui/sidebar 创建的侧边栏，它与网页内容完全分离，跨页面持续存在-负载等？您是否特别排除询问如何创建通过操纵每个网页的 DOM 创建的伪侧边栏？我相信这就是您要问的问题，但是鉴于 WebExtension 上下文，这需要非常清楚，您不询问基于 DOM 的侧边栏。

标签： firefox-addon-sdk firefox-addon-webextensions

【解决方案1】：

应该很快登陆，在 Firefox 54 https://bugzilla.mozilla.org/show_bug.cgi?id=1208596

【讨论】：

【解决方案2】：

要创建一个侧边栏，它是here。

首先你需要编辑你的 manifest.json，添加“sidebar-action"”。

"sidebar_action": {   
    "default_icon": {
        "16": "button/geo-16.png",
        "32": "button/geo-32.png"
    },  
    "default_title": "My sidebar", 
    "default_panel": "sidebar/sidebar.html" 
}

如果需要，使用其脚本和 CSS 创建 sidebar.html。

您在 Github 上有一个示例 webextension here，用于学习如何创建侧边栏。它被称为“annotate-page”。

您可以通过 a function 调用侧边栏

 sidebarAction.getPanel()

或键盘快捷键，因此您可以使用扩展按钮来调用浏览器操作，正如我认为您要求的那样，正如您所说“我知道我不能为每个 WebExtension 添加多个按钮"。

单击工具栏按钮时只有一个操作，仅当您不使用弹出窗口 这将显示其他按钮。

【讨论】：