How to Make a Chrome Extension With Your Code

It is pretty easy to transform your coding into a Chrome extension

3 min. read

Published on October 7, 2024

published on October 7, 2024

Readers help support Windows Report. We may get a commission if you buy through our links.

Many users want to learn how to make a Chrome extension and upgrade the capabilities of their browser. If you’ve got the coding part covered, it’s not so hard to create a Chrome extension.

How do I create a Chrome extension?

1. Create a manifest file

Create a new folder on your computer. This folder will contain all the files for your extension. Name it something like MyFirstExtension.
Inside your project folder, create a file named manifest.json. This file tells Chrome about your extension and its capabilities.
Add the following code to manifest.json: JSON{ "manifest_version": 3, "name": "My First Extension", "version": "1.0", "description": "A simple Chrome extension.", "action": { "default_popup": "popup.html", "default_icon": { "16": "icon.png", "48": "icon.png", "128": "icon.png" } }, "permissions": [] }

Create a file named popup.html in your project folder. This file defines the structure of the popup window that appears when you click the extension icon.
Add the following code to popup.html: HTML<!DOCTYPE html> <html> <head> <title>My First Extension</title> </head> <body> <h1>Hello, World!</h1> </body> </html>

3. Add styles and JavaScript functionality (Optional)

If you want to style your popup, create a file named popup.css and link it in popup.html: HTML<link rel="stylesheet" type="text/css" href="popup.css">
Add your CSS styles in popup.css.
If you need JavaScript functionality, create a file named popup.js and link it in popup.html: HTML<script src="popup.js"></script>
Add your JavaScript code in popup.js.

4. Add an icon and load your extension

Add an icon image to your project folder and name it icon.png. This icon will be displayed in the Chrome toolbar.
Open Chrome and go to chrome://extensions/.
Enable Developer mode by toggling the switch in the top right corner.
Click the Load unpacked button and select your project folder.

5. Test your extension and publish it (Optional)

Your extension should now be loaded in Chrome. Click the extension icon in the toolbar to see your popup.
If you want to publish your extension to the Chrome Web Store, you’ll need to create a developer account and follow the Chrome Web Store Developer Documentation.

We hope this helps you get started with creating your own Chrome extension! Let us know if you have any questions or need further assistance in the comments below.