How to add a border around the badge in a browser extension

Question

Is it possible to add a border around the extension badge for a web extension?.

I have developed a web extension called Stack Me First, I want the extension badge to have a border around it which I want to customize based on the active tab of the user.

Below is an example of how I want it to be (preferably with a border-radius):

---

Challenge with using dynamic images:

I'm aware that I can change the icon image dynamically. But my use case means that I'll have to create and manage multiple icons. Below is my use case and challenges

I'm also aware that I could change color of the badge, but I would prefer a border if possible

I need multiple states for my icon:

1. Disable state - for tabs that are not relevant
2. Error state - for tabs that are relevant but have some errors
   • user error state - I need a border here with orange color to indicate error from user side
   • API error - I need a border with red color to indicate error while fetching API
3. Success State - for tabs that are relevant and valid
4. Warning State - for tabs that need some user action

These are just examples, there can be more states

The Challenge with this is that I have to create and manage,

• 6 image file each with each state,
• if I want to change the color in the future I need to update the image.
• I also need to manage 4 or more icons with different sizes in order to publish it the respective browser store

If I could use a border, all of this would be handled within the code and I don't have to manage the images.