Detect Firefox add-ons with JavaScript

I have decided as follows: In my system I make a check in the localStorage to try to find an attribute which is set by the extension, if I find I deduce that the extension is there, and clear the attribute at the bottom of the page

  

NOTE: The extension always arrows this attribute when entering the given url

Instead of checking with JavaScript you can inject a script that creates a global variable (in window. ), for example (this example is with WebExtension (supported by Chrome, Firefox and Edge) the other type of extension is discontinued), then create a manifest.json like this:

{
    "name": "Meu add-on",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "Foo bar baz",
    "icons": {
        "128": "images/icon-128px.png",
        "48":  "images/icon-48px.png",
        "32":  "images/icon-32px.png",
        "16":  "images/icon.png"
    },
    "content_scripts": [{
        "matches": [
            "*://dominio-que-ira-injectar-o-add-on.com/*"
        ],
        "js": [
            "checkaddon.js"
        ]
    }]
}

In the same folder as checkaddon.js add this:

window.MeuAddonAvailable = true;

Then in the script of your site make the following check:

if (!window.MeuAddonAvailable) {
     alert('Add-on não instalado');
}

You can also show an element that was hidden:

function checkAddon()
{
    var notice = document.getElementById('notice-addon');

    if (window.MeuAddonAvailable) {
         notice.classList.remove("show");
    } else {
         notice.classList.add("show");
    }
}

if (/^(interactive|complete)$/i.test(document.readyState)) {
    checkAddon();
} else {
    document.addEventListener('DOMContentLoaded', checkAddon);
}

The html would look something like:

<div id="notice-addon">
Instale o add-on
</div>

And the CSS like this:

#notice-addon {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     display: none;
     background-color: #f44336;
     color: #fff;
}

#notice-addon {
     display: block;
}