Displaying Emoji in Google Chrome

emoji, google-chrome, google-chrome-extension

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.

Problem

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?

Original source