Adding Emoji Search to Google Messages for Web

#extensions #gripe #productivity #javascript

The Problem

If you've ever used Google Messages for Web, you know the pain: you want to send a particular emoji, but instead of searching for it, you're stuck scrolling through endless categories hoping to find the right one. It's 2026, this SO shouldn't be a thing!

The Solution

Messages for Web Emoji Search adds keyboard-friendly emoji search directly into the UI where you can type what you want and get instant results. IMO, this is way easier than browsing annoying "categories" or having to endlessly scroll just to find the clown emoji.

How It Works

The extension uses a MutationObserver to watch for when the emoji picker appears and injects a search input at the top:

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const pickerClass = 'emoji-picker-content-wrapper';
        const picker = node.classList?.contains(pickerClass)
          ? node
          : node.querySelector?.(`.${pickerClass}`);
        if (picker) injectIntoEmojiPicker(picker);
      }
    }
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Once detected, it injects a custom search interface with autocomplete that filters through a database of emojis by name and keywords. Looking for "skull"? You'll get 💀 Skull, ☠️ Skull and Crossbones, 🏴‍☠️ Pirate Flag, and more.

When you select an emoji, it gets inserted directly into your message input at the cursor position, just like the native picker.