Javascript detects if browser extension is installed

There is no easy or standard way for all browsers, but it is possible to use Javascript to detect if certain extension is installed or not. Today I quickly looked at Chrome/Firefox/Safari for this requirement (the list below is also in this browser order).

List all installed extensions
chrome://extensions
about:addons
Safari->Preference->Extensions

Find installed extensions on Mac OSX
~/Library/Application Support/Google/Chrome/Default/Extensions/
~/Library/Application\ Support/Firefox/Profiles/[profile name]/extensions/
~/Library/Safari/Extensions

Image URL to detect if extension is installed
chrome-extension://[extension-id]/[image_file], I am not sure if chrome needs web_accessible_resources in manifest.json. However, something like chrome-extension://hojdhekmpemkfjblemnmefjjocededbe/image.png always works even when the extension is disabled.

chrome://[extension-name]/content/[image_file], firefox needs contentaccessible=yes in chrome.manifest and also needs the extension is enabled.

Unfortunately I could not find how to use image URL for Safari (safari.extension.baseURI is a dynamic value after safari restart). One possible way is to inject a HTML node from extension to your target website, if you have control of the extension source code.

How to do image URL based detection?
In your website, add one hidden image element
hidden_img.addEventListener("load", function(e){
   console.log('extension installed');
}, false);
hidden_img.addEventListener("error", function(e){
   console.log('extension not installed');
}, false);