Modify the browser UI using extensions?

Question

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.

Answer 1

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.