使用扩展修改浏览器UI?

Modify the browser UI using extensions?

是否有API修改通用浏览器UI在Chrome扩展或WebExtensions中?例如,我想修改选项卡栏,以便它可以显示多行选项卡,而无需创建位于地址栏下方的工具栏。或者简单地为导航栏等添加一些样式
我似乎找不到 API 可以让你做那样的事情。

不,Chrome 扩展程序或 WebExtensions 中没有任何内容允许您按照您描述的程度修改浏览器 UI。这种 add-ons 修改浏览器 UI 的能力比 Firefox add-on 开发人员(和用户)习惯的显着 少。

在浏览器中UI,您可以更改:

  • 添加一个,并且只有一个,按钮到浏览器UI,它可以是一个动作或打开一个弹出窗口。在 Firefox 上,该按钮可以 交替 打开边栏。这个按钮的属性 can be changed dynamically (e.g. to show status or that your add-on is in different states) and can have a different state per tab. Any popup that's opened is an HTML page in which you can implement you own UI. However, popups are not persistent and will be closed when something else within that window gains focus. This one button is added though an entry in your manifest.json (Chrome) 可以是:
  • 添加context menu entries (Chrome)。这些是通过 JavaScript API 调用添加的。
  • manifest.json
  • 中添加hotkeys (Chrome). These are added through the commands
  • manifest.json中添加一个options page (Chrome) through the options_ui键。
  • omnibox (Chrome) 添加其他行为。这允许您定义一个关键字,如果用户输入该关键字,他们将开始与您的扩展进行交互。
  • 仅限 Firefox(有些在 Opera 中也可用)
    • 添加不属于网页内容的边栏。这是通过 manifest.json sidebar_action 条目和 sidbarAction API(可用在 Firefox 54+ 和 Opera 中)。与 browser/page 操作不同,您 必须 让按钮真正打开侧边栏面板。 无法 使浏览器 UI 按钮充当在后台页面中获得事件的普通按钮。这个侧边栏类似于 Firefox 用户多年来一直使用的侧边栏。

这些是您可以对浏览器进行更改的范围 UI。

你也可以创建一个存在于页面中的UI(使用content scripts (Chrome)), within its own window (windows.create({type:'panel'}) (Chrome)), or a tab (tabs.create() (Chrome),但这些东西实际上并不是浏览器的一部分UI.

如果您来自 Firefox add-on 背景,这通常需要您 re-think 如何呈现 add-on 的用户界面以适应这么多更有限的范例。

备选方案

火狐

使用 WebExtensions 实验扩展 WebExtensions

您可以使用 WebExtensions experiment 创建一个 API 来满足您的需求。如果采用,这样的 API 将被迁移到 Firefox 中并成为 WebExtensions 的标准部分。这应该允许您进行任何您想要的更改。

创建主题

对于 Firefox,您可以使用 theme(一种不同类型的 add-on,这只是样式)添加重要的样式。

我使用的一个主题,LittleFox,改变了股票浏览器栏(以及整个浏览器的许多其他变化)看起来像:

看起来像:

Firefox 57(计划于 2017 年 11 月 14 日发布)的完整主题将从 Firefox 中删除。新方法的基础知识已经发布,但它仍在开发中(就像所有 WebExtensions 一样)。然而,随着从遗留扩展到 WebExtensions 的变化,新主题的功能将大大降低。

创建不同类型的扩展程序

或者,您可以创建不同类型的扩展(例如 Add-on SDK),您可以使用它进行任意更改。虽然通过 Add-on SDK 可以对浏览器 UI 进行更广泛的修改,但要进行完全任意的更改,需要直接访问浏览器的 DOM,您可以从 Add-on SDK 扩展。您可能已经知道,这些其他扩展类型计划从 Firefox 57 的发布版本中删除,该版本计划于 2017 年 11 月 14 日发布。

使用userChrome.cssuserContent.css

改变个人风格

如果您希望它供个人使用,您可以将样式添加到您的个人资料 userChrome.css,这样您就可以设置浏览器的样式 UI .还有一个 userContent.css 文件,它将样式应用于内容。

中,我展示了对 userChrome.css 的修改,这将使搜索栏结果为深色主题以匹配 Developer Edition 主题。

Chrome

Chrome also has themes,但它们似乎 比 Firefox 的可用功能更有限。但是,它们与 Firefox 主题的新方法相当。