Have you ever wanted to search for something you read on a webpage directly on YouTube?

With a Chrome extension, you can easily add this feature to your browser.

In this article, I'll walk you through how to create a simple Chrome extension that allows you to search any selected text on YouTube with just a click.

Building Chrome extensions can be a great way to customize your browsing experience. This extension is perfect for anyone who frequently uses YouTube to find videos related to text they read online. You’ll also learn the basics of how Chrome extensions work, which can help you build more complex extensions in the future.

Let's get started with creating your very first Chrome extension!

Which API to Use for Creating Chrome Extensions

Chrome extensions are built using the Chrome Extensions API, which is similar to web development. You’ll use HTML, CSS, and JavaScript to create your extension, and the Chrome Extensions API provides specific tools to interact with the browser, such as adding context menu items, opening new tabs, or modifying pages.

For this tutorial, we’ll be using the contextMenus API to add a right-click option that will search selected text on YouTube.

How to Start

The first step to building a Chrome extension is creating a folder that will hold all of your extension’s files. Inside this folder, you’ll need the following:

1. manifest.json: The configuration file that defines your extension.
2. background.js: A script that runs in the background of your extension.
3. (Optional) popup.html: If you want to create a popup window for your extension.

Let’s begin by creating the manifest.json file.

What is the manifest.json File?

The manifest.json file is the most important file in your Chrome extension. It tells Chrome what your extension does and how it should behave. Here’s a breakdown of the key parts of the manifest.json file:

jsonCopy code
{
  "manifest_version": 3,
  "name": "YouTube Text Search",
  "version": "1.0",
  "description": "Search selected text on YouTube.",
  "permissions": [
    "contextMenus",
    "tabs"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

Key Sections of manifest.json:

• manifest_version: This defines the version of the Chrome Extensions API you're using. Currently, Chrome uses version 3.
• name: The name of your extension, which will appear in the Chrome extensions manager.
• version: The version number of your extension. Each time you update your extension, you'll increment this number.
• description: A short description of what your extension does.
• permissions: This section lists the permissions your extension needs to function. In this case, we need access to the contextMenus (to add a right-click menu) and tabs (to open new tabs).
• background: This section specifies a background.js file that will run in the background and handle the logic of your extension. In this case, it manages the context menu and the search functionality.
• action: This section defines a popup window for your extension. It’s optional for this tutorial, but you can add a simple HTML file here if you want a popup interface.

Step 1: Write the Background Script (background.js)

The background script will handle the logic for adding the context menu and performing the search. Here’s a basic version of background.js:

javascriptCopy code
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "searchOnYouTube",
    title: "Search on YouTube",
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "searchOnYouTube") {
    const query = info.selectionText;
    const youtubeSearchUrl = `https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`;
    chrome.tabs.create({ url: youtubeSearchUrl });
  }
});

Step 2: (Optional) Create a Popup (popup.html)

This file is optional. It provides a simple interface for your extension when clicked. If you want to add a popup, create a basic popup.html file with some introductory text:

htmlCopy code
<!DOCTYPE html>
<html>
<head>
  <title>YouTube Text Search</title>
</head>
<body>
  <h1>Search Text on YouTube</h1>
  <p>Select text on any webpage, right-click, and choose "Search on YouTube."</p>
</body>
</html>

Step 3: How to Test Your Chrome Extension

Once you’ve created your manifest.json, background.js, and (optionally) popup.html, you’re ready to test your extension.

1. Open Chrome and go to chrome://extensions/.
2. Enable Developer mode by toggling the switch at the top right.
3. Click “Load unpacked” and select the folder that contains your extension files.
4. Now, go to any webpage, select some text, right-click, and choose “Search on YouTube.” A new tab should open with YouTube search results for your selected text.

Step 4: How to Upload Your Chrome Extension to the Chrome Web Store

If you’re happy with your extension and want to share it with the world, you can upload it to the Chrome Web Store. Here’s how:

1. Create a Zip File: Zip up your extension files (manifest.json, background.js, popup.html, and any other necessary files).
2. Go to the Chrome Web Store Developer Dashboard: Visit the Chrome Web Store Developer Dashboard and log in with your Google account.
3. Pay the Developer Fee: There is a one-time $5 fee to publish extensions on the Chrome Web Store.
4. Upload Your Zip File: Click “Add a new item” and upload your zipped extension.
5. Fill in the Details: Complete the form with your extension’s name, description, and other information.
6. Submit for Review: Once everything is filled in, submit your extension for review. Chrome will check your extension, and if it passes, it will be published on the Chrome Web Store.

Now you’ve built and published your very first Chrome extension! By following these steps, you’ve learned the basics of how Chrome extensions work, and you can now build more advanced extensions in the future. Happy coding!