How to Create and Install a Google Chrome Extension: Step-by-Step Tutorial

In this tutorial, you’ll learn how to create a basic Chrome extension that adds a simple feature to your browser. For this example, we will build a simple extension that changes the background color of any webpage with the click of a button.

Step 1: Create a New Folder for Your Extension

Create a new folder on your computer and name it something like my-chrome-extension.
This folder will contain all the files needed for your extension.

Step 2: Create the Manifest File

Inside your extension folder, create a new file named manifest.json.
Add the following code to the file: { "manifest_version": 3, "name": "Background Color Changer", "version": "1.0", "description": "A simple extension to change the background color of any webpage.", "permissions": ["activeTab"], "action": { "default_popup": "popup.html", "default_icon": "icon.png" } }
Explanation:
- "manifest_version": 3: Specifies that we are using Manifest V3, the latest version for Chrome extensions.
- "name" and "version": The name and version of your extension.
- "permissions": Grants the extension the ability to interact with the current tab.
- "action": Defines the behavior and user interface of the extension.

Step 3: Create the Popup HTML File

Inside your extension folder, create a new file named popup.html.
Add the following code: <!DOCTYPE html> <html> <head> <title>Background Color Changer</title> <style> body { width: 200px; font-family: Arial, sans-serif; } button { padding: 10px; margin: 5px; width: 180px; } </style> </head> <body> <h3>Change Background Color</h3> <button id="changeColor">Change Color</button> <script src="popup.js"></script> </body> </html>
Explanation:
- This file creates a simple popup with a button that will appear when you click the extension icon.

Step 4: Create the JavaScript File

Inside your extension folder, create a new file named popup.js.
Add the following code: document.getElementById("changeColor").addEventListener("click", () => { chrome.tabs.executeScript({ code: 'document.body.style.backgroundColor = "lightblue";' }); });
Explanation:
- This script adds a click event to the button, which changes the background color of the active tab to light blue when clicked.

Step 5: Add an Icon (Optional)

You can add an icon to your extension by placing an icon.png file inside your extension folder. Make sure it’s a 48×48 pixels image.
Update the "default_icon" field in your manifest.json if you decide to add your custom icon.

Step 6: Load Your Google Extension in Chrome

Open Google Chrome and go to the following URL:
chrome://extensions/
Enable Developer mode by toggling the switch in the top-right corner.
Click the “Load unpacked” button.
Select the folder where you saved your extension (the my-chrome-extension folder).
Your extension should now be installed and visible in the toolbar!

Step 7: Test Your Chrome Extension

Click on the extension icon in the Chrome toolbar.
A popup should appear with the button you created.
Click the “Change Color” button, and the background color of the current webpage should change to light blue.

Step 8: (Optional) Modify Your Extension

You can modify the code in the popup.js file to perform other actions or add more buttons to your popup.html for additional features.
Every time you make a change to your extension files, reload the extension from the chrome://extensions/ page by clicking the reload button.

Here is a video showing how to create a Google Chrome Extension for a customized home page.

Watch this video on YouTube.

Conclusion

You’ve now created a basic Chrome extension that changes the background color of any webpage! This is just a starting point, and you can expand on this by adding more features and functionalities.

If you like this tutorial you might also like How to create a WordPress Plugin from scratch.