# How to modify appearance of tabs themselves with WebExtension?

**URL:** <https://discourse.mozilla.org/t/how-to-modify-appearance-of-tabs-themselves-with-webextension/26743>\
**Category:** Development\
**Created:** [March 20, 2018, 2:01am UTC](https://discourse.mozilla.org/t/how-to-modify-appearance-of-tabs-themselves-with-webextension/26743 "2018-03-20T02:01:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![thecodingpro](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@thecodingpro](https://discourse.mozilla.org/u/thecodingpro)\
**Post date:** [March 20, 2018, 2:01am UTC](https://discourse.mozilla.org/t/how-to-modify-appearance-of-tabs-themselves-with-webextension/26743/1 "2018-03-20T02:01:13Z")

</div>

Old extensions such as the legendary TabMixPlus have had features such as tab wrapping, as seen in the attached photo. I have looked through the API list and can’t seem to find anything that can modify the actual appearance of the tabs in the browser eg. position, colour etc.

How is this done?

 ![Tab_Wrapping](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/3/7/37c5a4189c9d8913f9efdc8adc4e5d5c34cc34c4.png)

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [March 20, 2018, 12:06pm UTC](https://discourse.mozilla.org/t/how-to-modify-appearance-of-tabs-themselves-with-webextension/26743/2 "2018-03-20T12:06:41Z")

</div>

You can modify how the tabs look via theme API, see [https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/theme](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/theme)

However for things like multiple rows of tabs there is no official support, though you can still kind of achieve them it seems, see [Tabs in two or more Rows (like TabMixPro) in Quantum?](https://discourse.mozilla.org/t/tabs-in-two-or-more-rows-like-tabmixpro-in-quantum/21657/25)

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [March 21, 2018, 4:08pm UTC](https://discourse.mozilla.org/t/how-to-modify-appearance-of-tabs-themselves-with-webextension/26743/3 "2018-03-21T16:08:08Z")

</div>

There is no WebExtensions API for modifying toolbars in that way. You’ll need to use custom style rules in a userChrome.css file. Some resources:

- CSS subreddit: [https://www.reddit.com/r/FirefoxCSS/](https://www.reddit.com/r/FirefoxCSS/)
- My site: [https://www.userchrome.org/](https://www.userchrome.org/)

---

<div class="post-metadata">

**Author:** ![thecodingpro](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@thecodingpro](https://discourse.mozilla.org/u/thecodingpro)\
**Post date:** [March 22, 2018, 2:18am UTC](https://discourse.mozilla.org/t/how-to-modify-appearance-of-tabs-themselves-with-webextension/26743/4 "2018-03-22T02:18:49Z")

</div>

That’s great, thank you!

Do you believe that this could be done with an extension?

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [March 23, 2018, 12:16am UTC](https://discourse.mozilla.org/t/how-to-modify-appearance-of-tabs-themselves-with-webextension/26743/5 "2018-03-23T00:16:03Z")

</div>

> [@thecodingpro](#):
>
> Do you believe that this could be done with an extension?

Some day, perhaps. But not now because the APIs have not been finalized and implemented yet.