CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionfirefox-addonfirefox-addon-webextensions
user12283373
user12283373

Reputation:

Is it possible to change the badge color based on badge text?

Is there a way for me to change the badges color based on the text? Example: If my extension is blocking 20 things it could be yellow and if it's blocking 50 things it could be red.

Upvotes: 0

Views: 638

Answers (1)

Trenton Trama
Trenton Trama

Reputation: 4930

Yes, you can change the color of the badge based on the value in it.
Since you're setting the value of the badge, you already have the value and you can dynamically determine which color to use.

Afterwards, you can use browserAction.setBadgeBackgroundColor to set the color.

// First, define badge colors with the minimum threshold.  
// For the sake of simplicity, keep the minimums in order.
const badge_colors = [
    {min: 0, color:  [255, 255, 0, 255] },
    {min: 11, color:  [255, 255, 0, 255] },
    {min: 200, color:  [255, 255, 0, 255] }
];

const badge_counter = 34; // This should already be avaliable, but can also be fetched using browserAction.getBadgeText()


const new_badge_color = badge_colors.reverse() // Reverse the list so the min is in descending order
                                .find(color=>color.min < badge_counter) // Find the first minimum value that is less than the badge counter.

// new_badge_color is now 
// {min: 11, color:  [255, 255, 0, 255] }

Once you have the new color, you can set the color using setBadgeBackgroundColor

Upvotes: 1

Related Questions