Caprine: Option to use native Apple emoji

[felixfbecker]

The Facebook emoji set looks terrible. The messenger app on iOS uses native Apple emojis. It would be great if Caprine could do this too

[sindresorhus]

Could probably use MutationObserver to listen for new messages added to a conversation and replace them.

[felixfbecker]

Good idea. This selector gives all FB emojis on the page:

document.querySelectorAll('img[src*="emoji.php"')

The URL for 😄 is https://static.xx.fbcdn.net/images/emoji.php/v9/t71/2/16/1f604.png. The basename of the path, 1f604, corresponds to the Unicode codepoint of the emoji, U+1F604.

But Facebook also puts the real emoji directly into the alt property, so we can easily replace all emojis with:

for (const img of document.querySelectorAll('img[src*="emoji.php"')) {
  img.replaceWith(img.alt)
}

Now these emojis look a bit mispositioned and small, so add a bit of styling:

document.querySelectorAll('img[src*="emoji.php"').forEach(img => {
  const span = document.createElement('span')
  span.className = 'native-emoji'
  span.textContent = img.alt
  img.replaceWith(span)
})

.native-emoji {
    font-size: 1.2em;
    display: inline-block;
    top: 0.12em;
    position: relative;
}

And voila:

[felixfbecker]

I'm unsure where the MutationObserver code for this would have to be added

[SolarLiner]

I would love for this to be an option for all platforms. I didn't like Facebook's previous set, but this one is even worse.

[felixfbecker]

Yeah I agree. It's reasonable for a website to have their own style, but a native app should always use native OS styles. The Windows emoji set looks amazing too.

[SolarLiner]

The Android app doesn't feature the native emoji though. Which is a sad thing, I like the Google emoji set (have them on my Linux laptop too).

[felixfbecker]

@sindresorhus any pointer where the code above would have to be added?

[sindresorhus]

@felixfbecker The MutationObserver should target the message container, which is #js_1. The code itself should be added in https://github.com/sindresorhus/caprine/blob/master/browser.js

[felixfbecker]

Hmm, I can't find any element on the page if I run document.getElementById('js_1') in the console

[JoniVR]

@felixfbecker
try

document.querySelector('#js_1');