How to Build a Simple Chrome Extension: Emoji Search and Copy Tool😯

Emoji Search DIY style is here, on our latest tutorial, how to guide. Learn how to create a Chrome extension that lets users search for emojis and copy them effortlessly. This beginner-friendly guide covers everything from setup to advanced features like dark mode. Build and enjoy your own custom extension today!

Introduction

Have you ever needed a quick way to search for emojis and copy them to your clipboard? In this tutorial, I’ll show you how to create a Chrome extension that lets you:

1. Search for emojis by keywords.
2. Copy emojis to your clipboard with one click.

This guide is perfect for beginners and only requires basic HTML, CSS, and JavaScript skills. Let’s get started!

Step 1: Set Up Your Project Folder

Create a new folder on your computer. Name it something like emoji_search_extension.

Inside the folder, create three essential files:

1. popup.html — The HTML page for the extension popup.
2. script.js — The JavaScript file to add functionality.
3. manifest.json — The configuration file for your Chrome extension.

Step 2: Write the HTML for the Extension

Open the popup.html file and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Emoji Search and Copy</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f9f9f9;
      min-width: 400px;
      min-height: 600px;
    }
    h1 {
      text-align: center;
    }
    input {
      width: 80%;
      max-width: 300px;
      margin: 0 auto 10px auto;
      display: block;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }
    #results {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
    .emoji-card {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      cursor: pointer;
      text-align: center;
      font-size: 24px;
      background-color: #fff;
      transition: transform 0.2s ease;
    }
    .emoji-card:hover {
      transform: scale(1.1);
      background-color: #e6f7ff;
    }
  </style>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Emoji Search and Copy Tool</h1>
  <input type="text" id="search" placeholder="Search for an emoji...">
  <div id="results"></div>
</body>
</html>

What This Does:

• Sets up a simple layout with a search bar.
• Displays emojis as cards that can be clicked.

Step 3: Add JavaScript for Search and Copy

Now create the script.js file in the same folder and add the following code:

document.addEventListener("DOMContentLoaded", () => {
  const emojiData = `😂 Face with tears of joy
😄 Smiling Face with Open Mouth and Smiling Eyes
😃 Smiling Face with Open Mouth
😀 Grinning Face
😊 Smiling Face with Smiling Eyes`;

  const emojis = emojiData.split("\n").map(line => {
    const parts = line.split(" ");
    return { emoji: parts[0], text: parts.slice(1).join(" ") };
  });

  const resultsContainer = document.getElementById("results");
  const searchInput = document.getElementById("search");

  function displayEmojis(filteredEmojis) {
    resultsContainer.innerHTML = "";
    filteredEmojis.forEach(item => {
      const emojiCard = document.createElement("div");
      emojiCard.className = "emoji-card";
      emojiCard.textContent = item.emoji;
      emojiCard.title = item.text;
      emojiCard.onclick = () => copyToClipboard(item.emoji);
      resultsContainer.appendChild(emojiCard);
    });
  }

  function searchEmoji() {
    const query = searchInput.value.toLowerCase();
    const filteredEmojis = emojis.filter(item =>
      item.text.toLowerCase().includes(query)
    );
    displayEmojis(filteredEmojis);
  }

  function copyToClipboard(emoji) {
    navigator.clipboard.writeText(emoji).then(() => {
      alert(`Copied: ${emoji}`);
    });
  }

  searchInput.addEventListener("input", searchEmoji);
  displayEmojis(emojis);
});

Step 4: Add the Manifest File

The manifest.json file tells Chrome how to load your extension. Create the file and paste the following:

{
  "manifest_version": 3,
  "name": "Emoji Search and Copy Tool",
  "version": "1.0",
  "description": "Search for emojis and copy them to your clipboard.",
  "action": {
    "default_popup": "popup.html",
    "default_title": "Emoji Search"
  },
  "permissions": ["clipboardWrite"],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

Step 5: Load Your Extension into Chrome

1. Open Chrome and go to chrome://extensions/.
2. Enable Developer Mode (toggle in the top-right corner).
3. Click Load unpacked and select your project folder.

Your extension will now appear in the list and can be pinned to the toolbar.

Step 6: Test Your Extension

1. Click the Emoji Search Tool icon in the Chrome toolbar.
2. Use the search bar to find emojis by keywords.
3. Click on an emoji to copy it to your clipboard.

Troubleshooting Tips

1. Inline Script Errors:
   If you encounter Content Security Policy errors for inline scripts, ensure you’re using a separate script.js file with the defer attribute.

2. Clipboard Not Working:
   Ensure that the clipboardWrite permission is specified in manifest.json. Chrome will prompt you to allow clipboard access.

3. Layout Issues:
   If your popup content is overflowing, ensure your CSS sets a min-width and min-height to make the popup responsive.

Customization Ideas

1. More Emojis:
   Expand the emoji list by adding more emojis to the emojiData variable in script.js.

2. Categories:
   Add buttons or dropdowns to filter emojis into categories like “Smileys”, “Animals”, or “Symbols”.

3. Dark Mode:
   Add a toggle to switch between light and dark themes.

4. Improved UI:
   Use a modern UI framework like Bootstrap or Tailwind CSS to style the popup more professionally.

5. Keyboard Shortcuts:
   Allow users to navigate emojis using arrow keys and select with Enter.

 

Conclusion

Congratulations! 🎉 You’ve built a simple yet powerful Chrome extension that can search for emojis and copy them to your clipboard. This extension can be customized further with more features like emoji categories or advanced styling.

If you enjoyed this tutorial, share it with your friends or leave a comment. Let me know if you’d like more tutorials on building Chrome extensions!