Building a Google Chrome Extension with Manifest V3: A Basic Example to get Started

3 min readOct 11, 2023

Introduction

Google Chrome extensions are powerful tools that enhance your browsing experience by adding custom functionalities. In this guide, we’ll walk you through the process of creating a simple Chrome extension that displays a popup when its icon is clicked. We’ll also explore various use scenarios where Chrome extensions can be incredibly useful.

Prerequisites

Before we dive into building our extension, make sure you have the following:

A basic understanding of HTML, CSS, and JavaScript.
Google Chrome installed on your machine.

Getting Started

Understanding Manifest V3

Manifest V3 is the latest version of the Chrome extension manifest file. It defines the structure and metadata of your extension. With Manifest V3, Google aims to improve security, performance, and maintainability of Chrome extensions.

Here’s a basic manifest.json file for our extension:

{
  "manifest_version": 3,
  "name": "Popup Extension",
  "version": "1.0",
  "description": "A simple Chrome extension with a popup",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  }
}

In this manifest:

"manifest_version": 3 specifies the version of the manifest.
"action" defines the extension's popup behavior.
"default_popup": "popup.html" points to the HTML file that will be displayed as the popup.
"default_icon" specifies different sizes of the extension icon.

Creating the Popup

Let’s create a simple HTML file for our popup:

<!-- popup.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popup Extension</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, Extension!</h1>
  <!-- Add more content as needed -->
  <script src="popup.js"></script>
</body>
</html>

Adding Styles

Style your popup by creating a CSS file (styles.css):

/* styles.css */
body {
  font-family: 'Arial', sans-serif;
  text-align: center;
  padding: 20px;
}
h1 {
  color: #4285f4;
}

Adding Functionality

Now, let’s add some JavaScript to our popup (popup.js):

// popup.js
document.addEventListener('DOMContentLoaded', function () {
  // Add your popup logic here
  console.log('Popup loaded successfully!');
});

Load Your Extension

Open Chrome and go to chrome://extensions/.
Enable “Developer mode” in the top right corner.
Click “Load unpacked” and select the folder containing your extension files.

Use Scenarios for Chrome Extensions

1. Quick Notes:

Create an extension that allows users to jot down quick notes without leaving their current tab.

2. Language Translation:

Build an extension that translates selected text on a webpage into the user’s preferred language.

3. Productivity Tools:

Develop tools to enhance productivity, such as a task manager, Pomodoro timer, or a quick calendar viewer.

4. Customized News Feed:

Create an extension that curates news articles based on the user’s interests.

5. Social Media Enhancements:

Build extensions to enhance the functionality of social media platforms, such as adding a dark mode or providing analytics.

Conclusion

Creating a Google Chrome extension with Manifest V3 is a rewarding endeavor, offering endless possibilities for customization and functionality. Whether you’re building a simple popup extension or a feature-rich tool, the Chrome extension platform provides a robust framework for your creativity.

Manifest V3 introduces improvements in security and performance, ensuring a better overall experience for both developers and users. As you explore the world of Chrome extensions, don’t hesitate to experiment with different ideas and functionalities to create extensions that truly enhance the browsing experience.

Happy coding!