How can I detect if the user of my site has my extension installed in Chrome/Moziilla

Question

Hello, I need to detect if users who access my site already have my installed extension, some site functions depend on this extension.

If the user has the extension installed, they will be able to access it normally, and if there is no warning, indicating the link to the installation in Chrome and Mozilla.

Answer 1

In that question has a very simple and functional code. The code below will try to load a cross-schema script from chrome-extension: // URL, in this case - the manifest file. You only need the unique ID to put in the URL. If the extension is installed, manifest will load and onload event will be triggered, if not onerror. Remembering that for you to get communication with the Extension and your website, on manifest.json of the extension it must possess the "web_accessible_resources": ["*"].

Code:

function Ext_NotInstallada(ExtName, ExtID) {
    console.log(ExtName + ' --Não Installada!');
    if (msg.innerHTML != '')
        msg.innerHTML = msg.innerHTML + "<BR>"

    msg.innerHTML = msg.innerHTML + ExtName + ' _Clique no link para obter a extensão! <a href="https://chrome.google.com/webstore/detail/locallinks/' + ExtID + '">here</a>';
}

function Ext_Installada(ExtName, ExtID) {
    console.log(ExtName + ' Instalada');
}

var Detectar_Extensao = function(Name, ID) {
    var s = document.createElement('script');
    s.onload = function() {
        Ext_Installada(Name, ID);
    };
    s.onerror = function() {
        Ext_NotInstallada(Name, ID);
    };
    s.src = 'chrome-extension://' + ID + '/manifest.json';
    document.body.appendChild(s);
}

$(function() {
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

    if (is_chrome)
        Detectar_Extensao('__MSG_CHROME_HANGOUTS_SHORT_NAME__', 'jifpbeccnghkjeaalbbjmodiffmgedin');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='msg'></div>

Test with Hangouts.

The ID is in the URL

You can get details of manifest.json following this Tutorial.

1. Install the extension Chrome Extension Source Code Viewer

2. Open Your Apps and click CRX, the previously installed extension.

3. By clicking View Source, you will see file details.