Emoji Error in Chrome Extension HTML

html, unicode, emoji


title: Emoji Error in Chrome Extension HTML date: "2019-02-17" banner: ./images/featured-image-5.jpg published_at: "2019-02-17T06:08:13.000Z" tags: "html, unicode, emoji" author: Sung M. Kim

_Photo by Bernard Hermant on _Unsplash

I've had a problem where I was trying to display an Emoji in a Chrome Extension header of default popup HTML, page_action.html (specified by page_action -> default_popup in manifest.json).

But got the jumbled up characters instead.

Emoji displayed as gobbledygook

The problem was that I had to instruct Chrome that I am using a unicode by adding a charset meta tag.

<meta charset="UTF-8" />
view raw meta.html hosted with ❤ by GitHub

Character Set set to UTF-8

This has fixed the issue and shows the cute 🐥 emoji correctly in the Chrome Extension popup.

You can now see the cute baby chick 🐥