Search code examples
javascriptunicodegoogle-chrome-extensionbrowser-action

How to set Unicode character as badge text on browser action in Chrome extension?

I have just started developing a Chrome Extension, and I am almost done except for this one little problem.

I want to set a Unicode character as the badge text on a browser action, but what I've tried so far is NOT working.

Here's how it looks now. enter image description here

  • Unicode Character - 💩 (also known as 'poop')
  • Its Unicode - U+1F4A9 (from here)

What I tried till now:

chrome.browserAction.setBadgeText({text: '💩'});   //shows '💩'
chrome.browserAction.setBadgeText({text: 'U+1F4A9;'});    //shows 'Ú+1F4A9;'
chrome.browserAction.setBadgeText({text: '\U1F4A9;'});    //shows '\U1F4A9;'
chrome.browserAction.setBadgeText({text: '\\U1F4A9;'});   //shows '\\U1F4A9;'
chrome.browserAction.setBadgeText({text: '💩'});          //shows empty box

What should I do so that it shows 💩?

UPDATE : As mentioned by @Xan in his answer and in a comment, that UI rendering cannot be controlled.

So, I tried doing this <title>💩</title> to see whether Chrome can render that and can it show 💩 in the tab heading.

Turned out that Chrome can. enter image description here

So, Why can't Chrome render 💩 in one place (browser Action) and can in another place (Tab heading or title bar) ?

Solution

  • As Rob's comment shows, the last form is correct.

    However, the font used for the badges simply does not have that Unicode character, and Chrome only ever uses 1 font for the badge, not looking for substitutions.

    As such, you're out of luck.