Understanding Extension Detection
For security and privacy, browsers prevent websites from directly listing a user's installed extensions. However, a site can use indirect methods to probe for the presence of *specific* extensions. This is often done to detect ad blockers or to identify potentially conflicting add-ons.
Method 1: Resource Probing
This is one of the oldest and most common methods. Every Chrome extension has a unique ID and can bundle resources (images, scripts, CSS). A website can try to fetch a known resource URL from a popular extension. If the resource loads, the extension is installed.
Finding Extension IDs and Resource Paths
A developer must first identify the extension's unique 32-character ID (found in its Chrome Web Store URL) and a stable internal file path (e.g., `/images/icon16.png`), which is found by examining the extension's source code.
// Probing for an extension by trying to load a known resource
const probe = document.createElement('img');
probe.src = 'chrome-extension://{extension_id_here}/path/to/resource.png';
probe.onload = () => console.log('Extension is likely installed.');
probe.onerror = () => console.log('Extension is likely NOT installed.');Method 2: DOM Alteration Detection
Many extensions modify the Document Object Model (DOM). A website can detect this by checking for these changes, such as an icon injected by a password manager.
// Check if a password manager added an element next to an input field
const passwordInput = document.getElementById('password');
if (passwordInput.nextElementSibling) {
console.log('An extension may have modified the DOM.');
}