How to make your first chrome extension

How to make your first chrome extension

Mohamed Tawfik's photo
Mohamed Tawfik
·

2 min read

To make a simple Chrome extension, you'll need to have some basic knowledge of HTML, CSS, and JavaScript. Here are the steps to create a basic Chrome extension:

  1. Create a new directory for your extension, and create the following files inside it:

  • manifest.json: This file specifies the metadata for your extension, such as its name and version number.

  • icon.png: This file is the icon that will be displayed for your extension in the Chrome extensions manager.

  • popup.html: This file will contain the HTML for the extension's popup window.

  • popup.css: This file will contain the CSS for the extension's popup window.

  • popup.js: This file will contain the JavaScript for the extension's popup window.

  1. In the manifest.json file, add the following code:
{ 
"manifest_version": 2, 
"name": "My Extension",
"description": "This is my first extension.", 
"version":"1.0", 
"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html" 
},
"permissions": [ "activeTab" ] 
}

This specifies the metadata for your extension, such as its name and version number, and tells Chrome to display the icon.png file as the extension's icon and to open the popup.html file when the icon is clicked.

  1. In the popup.html file, add the following code:
<!DOCTYPE html>
<html> 
  <head> 
    <linkrel="stylesheet" href="popup.css">
  </head> 
  <body> 
    <h1>Hello, World!</h1>
    <script src="popup.js"></script> 
  </body>
</html>

This creates a simple HTML page with a heading and links to the popup.css and popup.js files.

  1. In the popup.css file, you can add any CSS styles that you want to apply to your extension's popup window. For example:
body { 
  background-color: lightblue;
}

h1 { 
  color: navy; 
}
  1. In the popup.js file, you can add any JavaScript code that you want to run in your extension's popup window. For example:
console.log('Hello, World!');
  1. To load your extension in Chrome, open the extensions manager by going to Settings > More Tools > Extensions. Then, click the "Load unpacked" button, and select the directory where you saved your extension files.

Your extension should now be loaded and the icon should be visible in your browser's toolbar. When you click the icon, the extension's popup window should open.

I hope this helps! Let me know if you have any questions.

chrome extensionJavaScriptCSS