---
title: "How to create Chrome extension using JavaScript?"  
description: "How to create Chrome extension using JavaScript?"  
author: "Steilla Mitchel"  
published: 2023-07-20  
updated: 2023-07-21  
canonical: https://www.mindstick.com/forum/159190/how-to-create-chrome-extension-using-javascript  
category: "javascript"  
tags: ["javascript", "chrome seo extension"]  
reading_time: 3 minutes  

---

# How to create Chrome extension using JavaScript?

How to create [Chrome extension](https://www.mindstick.com/forum/159192/chrome-extension-onclick-event-is-not-triggering-an-alert-popup) using [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript)?

## Replies

### Reply by Aryan Kumar

To create a [Chrome](https://www.mindstick.com/blog/303260/discover-google-s-latest-ip-protection-privacy-test-feature-in-chrome) [extension](https://www.mindstick.com/articles/22/extension-method) using JavaScript, you will need to create a manifest file, a content script, and a background script.

## 1. Create a manifest file

The manifest file is a JSON file that contains the metadata for your extension. It includes the name, version, description, and permissions that your extension needs.

To create a manifest file, open a text editor and create a file called `manifest.json`. Then, paste the following code into the file:

```plaintext
{
  "name": "My Extension",
  "version": "1.0",
  "description": "This extension does something cool.",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["contentscript.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["tabs"]
}
```

## 2. Create a content script

The content script is a JavaScript file that runs in the context of the web pages that your extension is installed on. It can be used to modify the DOM, inject JavaScript, or listen for events.

To create a content script, open a text editor and create a file called `contentscript.js`. Then, paste the following code into the file:

```plaintext
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.status === "complete") {
    var element = document.querySelector(".my-element");
    if (element) {
      element.textContent = "Hello, world!";
    }
  }
});
```

This code listens for the `chrome.tabs.onUpdated` event. When this event is fired, the code checks to see if the tab has finished loading. If the tab has finished loading, the code then finds the element with the class `my-element` and sets its text content to "Hello, world!".

## 3. Create a background script

The background script is a JavaScript file that runs in the background of the browser. It can be used to perform tasks that do not need to be tied to a specific web page, such as storing data or communicating with a web server.

To create a background script, open a text editor and create a file called `background.js`. Then, paste the following code into the file:

```plaintext
chrome.storage.sync.get("myData", function(data) {
  if (!data.myData) {
    data.myData = "Hello, world!";
  }
  chrome.storage.sync.set(data);
});

chrome.tabs.onActivated.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id, {message: "Hello, world!"})
});
```

This code gets the value of the `myData` key from the browser's storage. If the `myData` key does not exist, the code sets the value of the key to "Hello, world!". The code then sets the value of the `myData` key in the browser's storage.

The code also listens for the `chrome.tabs.onActivated` event. When this event is fired, the code sends a message to the tab with the id `tab.id`. The message contains the text "Hello, world!".

Once you have created the manifest file, the content script, and the background script, you can package your extension into a .crx file using the Chrome Extension Developer Tools.

To package your extension, open the Chrome Extension Developer Tools and click on the "Pack extension" button. In the "Package extension" dialog box, select the manifest file, the content script, and the background script. Then, click on the "Pack" button.

Once your extension has been packaged, you can install it in Chrome by dragging the .crx file to the Chrome toolbar.


---

Original Source: https://www.mindstick.com/forum/159190/how-to-create-chrome-extension-using-javascript

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.