How to Create a Chrome Extension: A Step-by-Step Guide with Code

Are you interested in creating your own Chrome extension but don’t know where to start? Look no further than this step-by-step guide, complete with code samples and detailed instructions.

Before we begin, you’ll need a basic understanding of web development, including HTML, CSS, and JavaScript. With that in mind, let’s dive in!

Step 1: Create a Manifest File

The first step in creating a Chrome extension is to create a manifest file. This file contains metadata about the extension, such as its name, version, and permissions. To create the manifest file, open a new text editor file and save it as “manifest.json”.

Here’s an example of what your manifest file might look like:

  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension!",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  "browser_action": {
    "default_icon": "icon16.png",
    "default_popup": "popup.html"
  "permissions": [

Step 2: Create the Popup HTML File

The next step is to create the HTML file that will be displayed when the user clicks on the extension’s icon. Create a new text editor file and save it as “popup.html”.

Here’s an example of what your popup HTML file might look like:

<!DOCTYPE html>
    <title>My Extension Popup</title>
    <script src="popup.js"></script>
    <link rel="stylesheet" href="popup.css">
    <h1>My Extension</h1>
    <p>Enter some text:</p>
    <input type="text" id="input-text">
    <button id="submit-button">Submit</button>
    <div id="output"></div>

Step 3: Create the Popup JavaScript File

The final step is to create the JavaScript file that will handle the functionality of the extension. Create a new text editor file and save it as “popup.js”.

Here’s an example of what your popup JavaScript file might look like:

document.addEventListener('DOMContentLoaded', function() {
  var button = document.getElementById('submit-button');
  button.addEventListener('click', function() {
    var input = document.getElementById('input-text').value;
    document.getElementById('output').innerHTML = 'You entered: ' + input;

Step 4: Add Images

Next, create images to use as icons for your extension. You’ll need four images with sizes 16×16, 32×32, 48×48, and 128×128 pixels respectively. Name them “icon16.png”, “icon32.png”, “icon48.png”, and “icon128.png”.

Step 5: Test the Extension

Now that you’ve created all the necessary files, it’s time to test your extension. Open Google Chrome and navigate to chrome://extensions. Turn on Developer mode by clicking the toggle switch in the top right corner. Click the “Load unpacked” button and select the folder where your extension files are saved. Your extension should now appear in your Chrome toolbar!

Leave a Reply

For News Subscribe Us!

Can curiosity may end shameless explained. True high on said mr on come. An do mr design at little myself wholly entire though. Attended of on stronger or mr pleasure.

You have been successfully Subscribed! Ops! Something went wrong, please try again.

© 2022 Code With AM