使用扩展来修改浏览器UI？ [英] Modify the browser UI using extensions?

问题描述

是否有API修改Chrome扩展程序或WebExtensions中的常规浏览器UI？例如，我想修改标签栏，以便它可以显示多行选项卡，而无需在地址栏下方创建工具栏。或者简单地添加一些样式到导航栏等。

我似乎无法找到一个API，可以让你做任何事情。

不，Chrome扩展程序或Web扩展程序中没有任何内容允许您修改浏览器UI以达到您所描述的范围。这些附加组件修改浏览器UI的能力明显比Firefox附加组件开发者（和用户）习惯的要少。

在浏览器用户界面中，您可以更改：

• 向浏览器添加一个和唯一一个按钮用户界面，可以是一个动作或打开一个弹出窗口。在Firefox上，按钮可以交替打开侧边栏。此按钮的属性
  
  
  

  看起来像：
  
  

  
  
  

  使用Fi从Firefox中删除完整主题refox 57（定于2017年11月14日发布）。新方法的基础知识已经发布，但仍在开发中（与所有WebExtensions一样）。但是，与从传统扩展到WebExtensions的更改一样，新主题的性能将大大降低。

  
  
  

  创建不同类型的扩展名

  
  
  

  或者，您可以创建一个不同类型的扩展（例如Add-on SDK），您可以使用该扩展进行任意更改。虽然可以通过附加组件SDK获得更广泛的浏览器UI修改，但为了完全随意更改，需要直接访问浏览器的DOM，您可以通过附加组件SDK扩展来实现。正如您可能已经知道的那样，这些其他扩展类型计划从Firefox的发布版本中删除，Firefox 57将于2017年11月14日发布。
  
  

  个人风格使用 userChrome.css 和 userContent.css

  进行更改
  
  

  如果您希望将其用于个人用途，则可以添加样式添加到您的个人资料的 userChrome.css ，这将允许您设置浏览器UI的样式。还有一个 userContent.css 文件，它将样式应用到内容中。

  
  
  

  在我对Firefox如何获取黑暗主题的searchbar-results的回答我展示了对 userChrome.css 的修改，这将使搜索栏结果变成黑色主题匹配Developer Edition主题。

  
  
  

  Chrome

  
  
  

  Chrome也有主题，但它们看起来比Firefox有更多的限制。但是，它们与Firefox主题的新方法相当。
  

  Is there an API to modify the general browser UI in Chrome extensions or WebExtensions? For example I would like to modify the tab bar so that it can display multiple rows of tabs without creating a toolbar that sits below the address bar. Or simply add some styling to the navigation bar etc.
  I can't seem to find an API that would allow you to do anything like that.

  解决方案

  No, there is nothing in either Chrome extensions or WebExtensions that allows you to modify the browser UI to the extent you describe. The ability of such add-ons to modify the browser UI is significantly less than Firefox add-on developers (and users) are used to.

  In the browser UI, you can change:

  • Add one, and only one, button to the Browser UI, which can be either an action or open a popup. On Firefox, the button can alternately open a sidebar. The properties of this button 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) which can be:
    • a browser_action ^_(Chrome),
    • a page_action ^_(Chrome), or
    • a sidebar_action (See below under "Firefox Only; not available on Chrome)
  • Add context menu entries ^_(Chrome). These are added though JavaScript API calls.
    • On Firefox, you can add context menu entries for tabs in the tabbar, and to your browser_action.
  • Add hotkeys ^_(Chrome). These are added through the commands key in manifest.json
  • Add an options page ^_(Chrome) through the options_ui key in manifest.json.
  • Add additional behavior to the omnibox ^_(Chrome). This allows you to define a keyword, which if the user enters it, they begin interacting with your extension.
  • Firefox Only (some also available in Opera)
    • Add a sidebar that is not part of the web page's content. This is done through the manifest.json sidebar_action entry and the sidbarAction API (available in Firefox 54+, and Opera). Unlike browser/page actions, you must have the button actually open a sidebar panel. There is no ability to have the browser UI button act as a normal button for which you get an event in the background page. This sidebar is similar to the sidebar which Firefox users have had available for several years.

  Those are the extent of the changes which you can make to the Browser UI.

  You can also create a UI that exists within pages (using content scripts ^_(Chrome)), within its own window (windows.create({type:'panel'}) ^_(Chrome)), or a tab (tabs.create() ^_(Chrome)), but such things are not actually a part of the browser UI.

  If you are coming from a Firefox add-on background, this will often require you to re-think how you present your add-on's user interface in order to fit within this much more limited paradigm.

  Alternatives

  Firefox

  Expand WebExtensions using a WebExtensions experiment

  You could create an API using a WebExtensions experiment which would do what you desire. If adopted, such an API would be migrated into Firefox and become a standard part of WebExtensions. This should allow you to make whatever changes you desire.

  Create a theme

  For Firefox, you can add significant styling using a theme (a different type of add-on, which is just styles).

  A theme I use, LittleFox, changes the stock browser bar (and many other changes throughout the browser) from looking like:
  

  to look like:
  

  Complete themes are being removed from Firefox with Firefox 57 (scheduled for release on 2017-11-14). The basics of the new methodology have been released, but it's still being developed (as is all of WebExtensions). However, as with the change from legacy extensions to WebExtensions, the new themes will be vastly less capable.

  Create a different type of extension

  Alternately, you could create a different type of extension (e.g. Add-on SDK) with which you could make arbitrary changes. While a much wider range of browser UI modifications are available through the Add-on SDK, to make completely arbitrary changes requires accessing the DOM for the browser directly, which you can do from an Add-on SDK extension. As you are probably aware, these other extension types are scheduled for elimination from release versions of Firefox with Firefox 57, which is scheduled for 2017-11-14.

  Personal style changes using userChrome.css and userContent.css

  If you are wanting it for personal use, you can add styles to your profile's userChrome.css, which will allow you to style the browser UI. There is also a userContent.css file which will apply styles to content.

  In my answer to "Firefox how to get dark themed searchbar-results" I show modifications to userChrome.css which will make the searchbar results be dark themed to match the Developer Edition theme.

  Chrome

  Chrome also has themes, but they appear to be much more limited than what was available for Firefox. However, they are comparable to the new methodology for Firefox themes.

  这篇关于使用扩展来修改浏览器UI？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！