How to make an extension for a browser on JavaScript

In this article, we will consider how to create an extension on JavaScript for a browser using an example.

Making a Browser Extension with JavaScript

Browser extensions are a great way to customize and enhance your browsing experience. They allow you to add new features and functionality to your browser, as well as modify existing ones. To create a browser extension using JavaScript, you must first create a manifest file. This is a JSON file that contains information about your extension.

The manifest file is the first step in creating a browser extension. It contains the name, description, version number, author, and other details about the extension. Here's an example manifest file for a browser extension:

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is an example browser extension.",
  "author": "Your Name",
  "icons": {
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_icon": {
      "48": "icons/icon48.png"
    },
    "default_title": "My Extension"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"]
    }
  ]
}

Now that we have the manifest file, we can start coding the actual extension. The first step is to create the background script. This is the main script that will run when the extension is enabled. It will handle events like button clicks, page requests, and other events. Here's an example background script:

// background.js

// Listen for browser action button clicks
chrome.browserAction.onClicked.addListener(function(tab) {
  // Send a message to the active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

// Listen for messages from the content script
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "open_new_tab" ) {
      chrome.tabs.create({"url": request.url});
    }
  }
);

The background script will listen for events and react accordingly. In this example, it listens for a browser action button click, and then sends a message to the active tab. It also listens for messages from the content script, and will open a new tab when it receives a message.

The next step is to create the content script. This script will run in the context of the web page that the user is viewing. It can access the DOM, listen for events, and communicate with the background script. Here's an example content script:

// content.js

// Listen for messages
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
      var firstHref = $("a[href^='http']").eq(0).attr("href");
      console.log(firstHref);
      chrome.runtime.sendMessage({"message": "open_new_tab", "url": firstHref});
    }
  }
);

The content script will listen for messages from the background script. In this example, it listens for a message that indicates that the browser action button was clicked, and then finds the first link on the page and sends a message to the background script to open it in a new tab.

Once the background and content scripts are complete, the extension is ready to be tested. You can use the Chrome web store to upload your extension and make it available for others to use. You can also use the Chrome developer tools to debug your extension and test it locally.

Creating a browser extension with JavaScript is a great way to add new features and functionality to your browser. With the right tools and a bit of coding knowledge, you can create an extension that will enhance your browsing experience.