Search code examples
google-chromegoogle-chrome-extensionemoji

Displaying Emoji in Google Chrome

I have a Google Chrome Extension that supports chat. The chrome extension displays the messages sent to you in desktop notification. I have noticed that whenever I send an emoji from an iPhone, it correctly displays in the Desktop notification. But when I try to display the same emoji in the actual application (it's an iframe injected into the page), it appears as a square.

Seems like there's an open bug at https://code.google.com/p/chromium/issues/detail?id=62435. I was wondering why it works correctly in Desktop Notification and not otherwise? Also, is there anything I can do to fix it?

Solution

  • I just implemented Emoji support in my extension using the open-source Twemoji library.

    In the simplest form, it involves adding a .js file and calling a function on a DOM element to replace Unicode emoji with Twitter CDN provided images:

    twemoji.parse(node);

    See the repository readme for more options.