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
Share this article
Improve this guide
Readers help support Windows Report. We may get a commission if you buy through our links.
Read our disclosure page to find out how can you help Windows Report sustain the editorial team Read more
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": [] }
2. Create the popup HTML
- 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.
User forum
0 messages