Detect Firefox add-ons with Javascript

Question

I created an extension for Chrome and Firefox, both are in their respective stores Webstore and Mozilla Addons, goal is to identify if the user has the extension installed otherwise inform that you need to install the extension.

Note: in Chrome I managed to do, my current problem is to identify it in Firefox.

Answer 1

I resolved as follows : On my system I check the localStorage to try to find an attribute which is set by the extension, if I find it I deduce that the extension is there, and I clean the attribute at the bottom of the page

OBS : The extension always arrow this attribute when entering the given url

Answer 2

Instead of checking with Javascript you can inject a script that creates a global variable (no window.), so for example (this example is with Webextension (supported by Chrome, Firefox and Edge) the other extension type is discontinued), so 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;

So in your website script do the following check:

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

It 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 be 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;
}