How to align badge text to left/right in a browser extension

Question

I'm working on a browser extension called Stack Me First where I add slightly longer badge text. But the first few letters of the text are important to be visible.

Currently the badge text is aligned to center - so only the center few letters are visible which doesn't give enough context.

So is it possible to align the text to left/right as required?

Screenshots below for reference

The badge text here says "JoinCommunity" to indicate that the user hasn't joined community. I know it's big (- which is why I also have a used the browserAction.setTitle). And since it's showing up to 4 letters, I want those 4 letters to be "Join", which will make it clearer. Can I do this and still have the badge text the same?

Answer 1

As you correctly note - the documentation does not recommend using more than 4 characters for icon text.

Because space is limited, we recommend that badge text use four or fewer characters

It works differently for different browsers now, for example: Google Chrome v.126.0.6478.127 - aligns text to the center, Firefox v.127.0.2 - aligns the text to the left.

This is what it looks like in my

• Google Chrome -
• Firefox -

If you are writing a crossbrowser extension, perhaps you should initially use no more than 4 characters, so that the text looks about the same everywhere, but at the same time add a dynamic annotation when hovering the mouse over the badge icon using the method - setTitle.