Displaying Emoji in Google Chrome

Question

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?

Addend

Also please notice - list of emojis for country flags. 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧 Emoji flags are supported on most major platforms, except Windows which displays two-letter country codes instead of emoji flag images. – Fluent

Answer 1

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.

Leatherleaf

Answer 2

Chrome will now support emojis natively (only OSX). You can wait a few weeks until the stable version is released with this feature, or you can download the dev-version form here, that already contains this feature.

Btw, if you want to test if it works, you can use this page (works like a charm).

Gemsbok

I've read in the news that this only applies to OS X. Is that correct? Can you provide a source for your information? – Leatherleaf

You are right, I didn't clarify that was on OSX 10.10 (Yosemite). Which OS are you using? Have you tried downloading the dev-channel? – Gemsbok

No I haven't, but I refer to this article and this bug that added the feature. If true, this does not mean universal native support for Chrome. – Leatherleaf

Probably, it is not. Safari already support emojis, so for sure OSX does, and this is what it is being implemented in here. I will add that to my answer, apologies. – Gemsbok

Answer 3

Solved by adding Emojis - Emoji Keyboard extension to Chrome.

Additionally, I checked that the Chromoji - Emojis for Google Chrome extension also works.

1st Note: Emojis appear everywhere on the page except for inputs and textarea.

2nd Note: Any of these extensions additionally give us the ability to search for emojis along with the possibility of copying them.

Nanine

Answer 4

You can view emoji with a Chrome extension called Chromoji.
It works on Mac OS X, Windows and Linux as well.

Soule

Chromoji appears to no longer be available. – Becerra

Published extension was removed, but source code is up here: github.com/robjdavey/Chromoji – Leatherleaf

Answer 5

I saw this problem could be solved by updating Internet Explorer to version 11 under Windows 7 x64 (several computers affected, all solved).

In my case, it was because I formatted the pc with pure, no-servicepacked Windows 7 x64. After SP1 on Windows 7 and IE11 have installed, all browsers started to show the emojis correctely. I used for test this site.

If the page shows squares all around the page, the error is not solved. If the page shows several kinds of symbols, than the error is eliminated.

Please tell us if this workaround was effective.

Pelagi