Detecting Presence of your Chrome Extension

6 min

Introduction

This code snippet is a JavaScript script designed to interact with a Chrome browser extension. It sends a message to the specified Chrome extension and expects a response. If the extension exists and can be reached, it will respond with "true"; otherwise, it will not respond.

Prerequisites

Before using this code, make sure you have the following prerequisites in place:

Extension ID: You need to specify the extension ID in the extensionID variable. The extension ID is a unique identifier for your Chrome extension.

Extension Manifest: Ensure that you have properly set the extension ID in your extension's manifest file (manifest.json) under the "key" property. If this is not set correctly, you may encounter the error: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

Chrome Browser: This code is intended to be executed within a Google Chrome browser environment. It checks for the availability of the Chrome API, so it won't work in other browsers.

Code Explanation

Let's break down the code into its main components:

1. Extension ID

const extensionID = "aokkbecooohkgppimfffkongjlpihbol";

This variable stores the unique identifier (ID) of the Chrome extension that you want to communicate with. You should replace the value with the actual extension ID you are targeting.

2. Checking Chrome API Accessibility

const isChromeApiAccessible =
  typeof window.chrome !== "undefined" &&
  typeof window.chrome.runtime !== "undefined" &&
  typeof window.chrome.runtime.sendMessage !== "undefined";

This code block checks whether the necessary Chrome API objects and methods are accessible in the current browser environment. It verifies the existence of window.chrome and its runtime property, as well as the sendMessage method. If any of these are undefined, it indicates that the Chrome API is not accessible.

3. Immediate Function Execution

(() => {
  try {
    if (!isChromeApiAccessible) {
      return console.log("Stopping execution, chrome api is not accessible.");
    }
    window.chrome.runtime.sendMessage(
      extensionID,
      { status: "PING" },
      (isConnected) => {
        if (!isConnected) {
          return console.log(
            "Stopping execution, failed to connect to the extension"
          );
        }
      }
    );
  } catch (err) {
    console.error("Failed to communicate with the extension", err);
  }
})();

This code is wrapped in an Immediately Invoked Function Expression (IIFE), which means it runs immediately upon page load.

Inside the IIFE, the following steps are performed:

It first checks if the Chrome API is accessible using the isChromeApiAccessible variable.

If the Chrome API is not accessible, it logs a message and stops execution.

If the Chrome API is accessible, it attempts to send a message to the specified extension using window.chrome.runtime.sendMessage. It sends a "PING" message to the extension and provides a callback function that will be executed when a response is received.

If the extension does not respond (returns false), it logs a message and stops execution.

If there are any errors during this process, it logs an error message.

Conclusion

This code serves as a way to check if a specific Chrome extension is installed and accessible in the current browser environment. It's useful for scenarios where you want to verify the presence of an extension before interacting with it. Make sure to replace the extensionID variable with the correct ID for the extension you want to target.