Compruebe si el usuario tiene instalada una extensión de Chrome

Estoy en el proceso de crear una extensión de Chrome, y para que todo funcione como me gustaría, necesito un script JavaScript externo para poder detectar si un usuario tiene instalada mi extensión.

Por ejemplo: un usuario instala mi complemento y luego va a un sitio web con mi secuencia de comandos. El sitio web detecta que mi extensión está instalada y actualiza la página en consecuencia.

es posible?

Estoy seguro de que hay una forma directa (llamar a funciones en su extensión directamente, o usando las clases JS para extensiones), pero un método indirecto (hasta que aparezca algo mejor):

Haga que su extensión de Chrome busque un DIV específico u otro elemento en su página, con una ID muy específica.

Por ejemplo:

<div id="ExtensionCheck_JamesEggersAwesomeExtension"></div>

Haga una getElementByIdy configure el innerHTMLnúmero de versión de su extensión o algo así. Luego puede leer el contenido de ese lado del cliente.

Sin embargo, nuevamente, debe usar un método directo si hay uno disponible.

EDITAR: ¡Método directo encontrado!

Utilice los métodos de conexión que se encuentran aquí: https://developer.chrome.com/extensions/extension#global-events

No probado, pero debería poder hacer ...

var myPort=chrome.extension.connect('yourextensionid_qwerqweroijwefoijwef', some_object_to_send_on_connect);

Chrome ahora tiene la capacidad de enviar mensajes desde el sitio web a la extensión.

Entonces, en la extensión background.js (content.js no funcionará) agregue algo como:

chrome.runtime.onMessageExternal.addListener(
    function(request, sender, sendResponse) {
        if (request) {
            if (request.message) {
                if (request.message == "version") {
                    sendResponse({version: 1.0});
                }
            }
        }
        return true;
    });

Esto le permitirá realizar una llamada desde el sitio web:

var hasExtension = false;

chrome.runtime.sendMessage(extensionId, { message: "version" },
    function (reply) {
        if (reply) {
            if (reply.version) {
                if (reply.version >= requiredVersion) {
                    hasExtension = true;
                }
            }
        }
        else {
          hasExtension = false;
        }
    });

Luego puede verificar la variable hasExtension. El único inconveniente es que la llamada es asincrónica, por lo que debe solucionarlo de alguna manera.

Editar: como se menciona a continuación, deberá agregar una entrada al manifest.json que enumere los dominios que pueden enviar mensajes a su complemento. P.ej:

"externally_connectable": {
    "matches": ["*://localhost/*", "*://your.domain.com/*"]
},

Otro método es exponer un recurso accesible desde la web , aunque esto permitirá que cualquier sitio web pruebe si su extensión está instalada.

Suponga que el ID de su extensión es aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, y agrega un archivo (digamos, una imagen de píxel transparente) como test.pngen los archivos de su extensión.

Luego, expone este archivo a las páginas web con la web_accessible_resourcesclave de manifiesto:

  "web_accessible_resources": [
    "test.png"
  ],

En su página web, puede intentar cargar este archivo por su URL completa (en una <img>etiqueta, a través de XHR o de cualquier otra forma):

chrome-extension://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/test.png

Si el archivo se carga, entonces se instala la extensión. Si hay un error al cargar este archivo, la extensión no está instalada.

// Code from https://groups.google.com/a/chromium.org/d/msg/chromium-extensions/8ArcsWMBaM4/2GKwVOZm1qMJ
function detectExtension(extensionId, callback) { 
  var img; 
  img = new Image(); 
  img.src = "chrome-extension://" + extensionId + "/test.png"; 
  img.onload = function() { 
    callback(true); 
  }; 
  img.onerror = function() { 
    callback(false); 
  };
}

Nota: si hay un error al cargar este archivo, dicho error de pila de red aparecerá en la consola sin posibilidad de silenciarlo. Cuando Chromecast usó este método, causó bastante controversia debido a esto; con la eventual solución muy fea de simplemente incluir en la lista negra errores muy específicos de Dev Tools por el equipo de Chrome.

Nota importante: este método no funcionará en Firefox WebExtensions. Los recursos accesibles a través de la web exponen de forma inherente la extensión a la toma de huellas digitales, ya que la URL es predecible al conocer la ID. Firefox decidió cerrar ese agujero asignando una URL aleatoria específica de la instancia a los recursos accesibles en la web:

Los archivos estarán disponibles usando una URL como:

moz-extension://<random-UUID>/<path/to/resource>

Este UUID se genera aleatoriamente para cada instancia del navegador y no es el ID de su extensión. Esto evita que los sitios web tomen las huellas digitales de las extensiones que un usuario ha instalado.

Sin embargo, si bien la extensión puede usarse runtime.getURL()para obtener esta dirección, no puede codificarla en su sitio web.

Pensé en compartir mi investigación sobre esto. Necesitaba poder detectar si se instaló una extensión específica para que funcionaran algunos enlaces file: ///. Encontré este artículo aquí. Esto explica un método para obtener el archivo manifest.json de una extensión.

Ajusté un poco el código y se me ocurrió:

function Ext_Detect_NotInstalled(ExtName, ExtID) {
  console.log(ExtName + ' Not Installed');
  if (divAnnounce.innerHTML != '')
    divAnnounce.innerHTML = divAnnounce.innerHTML + "<BR>"

  divAnnounce.innerHTML = divAnnounce.innerHTML + 'Page needs ' + ExtName + ' Extension -- to intall the LocalLinks extension click <a href="https://chrome.google.com/webstore/detail/locallinks/' + ExtID + '">here</a>';
}

function Ext_Detect_Installed(ExtName, ExtID) {
  console.log(ExtName + ' Installed');
}

var Ext_Detect = function (ExtName, ExtID) {
  var s = document.createElement('script');
  s.onload = function () { Ext_Detect_Installed(ExtName, ExtID); };
  s.onerror = function () { Ext_Detect_NotInstalled(ExtName, ExtID); };
  s.src = 'chrome-extension://' + ExtID + '/manifest.json';
  document.body.appendChild(s);
}

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

if (is_chrome == true) {
  window.onload = function () { Ext_Detect('LocalLinks', 'jllpkdkcdjndhggodimiphkghogcpida'); };
}

Con esto, debería poder usar Ext_Detect (ExtensionName, ExtensionID) para detectar la instalación de cualquier número de extensiones.

Otra posible solución si es propietario del sitio web es utilizar la instalación en línea .

if (chrome.app.isInstalled) {
  // extension is installed.
}

Sé que esta es una pregunta antigua, pero de esta manera se introdujo en Chrome 15, por lo que pensé en enumerarla para cualquiera que esté buscando una respuesta.

Usé el método de las cookies:

En mi archivo manifest.js incluí un script de contenido que solo se ejecuta en mi sitio:

 "content_scripts": [
        {
        "matches": [
            "*://*.mysite.co/*"
            ],
        "js": ["js/mysite.js"],
        "run_at": "document_idle"
        }
    ], 

en mi js / mysite.js tengo una línea:

document.cookie = "extension_downloaded=True";

y en mi página index.html busco esa cookie.

if (document.cookie.indexOf('extension_downloaded') != -1){
    document.getElementById('install-btn').style.display = 'none';
}

Puede hacer que la extensión establezca una cookie y que el JavaScript de su sitio web compruebe si esa cookie está presente y se actualiza en consecuencia. Este y probablemente la mayoría de los otros métodos mencionados aquí, por supuesto, podrían ser evitados por el usuario, a menos que intente que la extensión cree cookies personalizadas según las marcas de tiempo, etc., y haga que su aplicación las analice del lado del servidor para ver si realmente es un usuario con el extensión o alguien que pretende tenerlo modificando sus cookies.

Hay otro método que se muestra en esta publicación de Grupos de Google . En resumen, puede intentar detectar si el icono de la extensión se carga correctamente. Esto puede resultar útil si la extensión que está buscando no es la suya.

La página web interactúa con la extensión a través de un script en segundo plano.

manifest.json:

"background": {
    "scripts": ["background.js"],
    "persistent": true
},
"externally_connectable": {
    "matches": ["*://(domain.ext)/*"]
},

background.js:
chrome.runtime.onMessageExternal.addListener(function(msg, sender, sendResponse) {
    if ((msg.action == "id") && (msg.value == id))
    {
        sendResponse({id : id});
    }
});

page.html:

<script>
var id = "some_ext_id";
chrome.runtime.sendMessage(id, {action: "id", value : id}, function(response) {
    if(response && (response.id == id)) //extension installed
    {
        console.log(response);
    }
    else //extension not installed
    {
        console.log("Please consider installig extension");
    }

});
</script>

Su extensión podría interactuar con el sitio web (por ejemplo, cambiando variables) y su sitio web podría detectar esto.

Pero debería haber una mejor manera de hacer esto. Me pregunto cómo lo está haciendo Google en su galería de extensiones (las aplicaciones ya instaladas están marcadas).

Editar:

La galería usa la función chrome.management.get . Ejemplo:

chrome.management.get("mblbciejcodpealifnhfjbdlkedplodp", function(a){console.log(a);});

Pero solo puede acceder al método desde páginas con los permisos adecuados.

Muchas de las respuestas aquí hasta ahora son solo para Chrome o incurren en una penalización por sobrecarga HTTP. La solución que estamos usando es un poco diferente:

1. Agregue un nuevo objeto a la lista content_scripts del manifiesto de la siguiente manera:

{
  "matches": ["https://www.yoursite.com/*"],
  "js": [
    "install_notifier.js"
  ],
  "run_at": "document_idle"
}

Esto permitirá que el código en install_notifier.js se ejecute en ese sitio (si aún no tenía permisos allí).

2. Envíe un mensaje a todos los sitios en la clave de manifiesto anterior.

Agregue algo como esto a install_notifier.js (tenga en cuenta que esto está usando un cierre para evitar que las variables sean globales, pero eso no es estrictamente necesario):

// Dispatch a message to every URL that's in the manifest to say that the extension is
// installed.  This allows webpages to take action based on the presence of the
// extension and its version. This is only allowed for a small whitelist of
// domains defined in the manifest.
(function () {
  let currentVersion = chrome.runtime.getManifest().version;
  window.postMessage({
    sender: "my-extension",
    message_name: "version",
    message: currentVersion
  }, "*");
})();

Su mensaje podría decir cualquier cosa, pero es útil enviar la versión para que sepa a qué se enfrenta. Luego...

3. En su sitio web, escuche ese mensaje.

Agregue esto a su sitio web en algún lugar:

window.addEventListener("message", function (event) {
  if (event.source == window &&
    event.data.sender &&
    event.data.sender === "my-extension" &&
    event.data.message_name &&
    event.data.message_name === "version") {
    console.log("Got the message");
  }
});

Esto funciona en Firefox y Chrome, y no genera una sobrecarga HTTP ni manipula la página.

Si tienes control sobre la extensión de Chrome, puedes probar lo que hice:

// Inside Chrome extension
var div = document.createElement('div');
div.setAttribute('id', 'myapp-extension-installed-div');
document.getElementsByTagName('body')[0].appendChild(div);

Y entonces:

// On web page that needs to detect extension
if ($('#myapp-extension-installed-div').length) {

}

Se siente un poco hack, pero no pude hacer que los otros métodos funcionen, y me preocupa que Chrome cambie su API aquí. Es dudoso que este método deje de funcionar pronto.

También puede usar un método de navegador cruzado que yo he usado. Utiliza el concepto de agregar un div.

en su secuencia de comandos de contenido (siempre que se cargue la secuencia de comandos, debería hacer esto)

if ((window.location.href).includes('*myurl/urlregex*')) {
        $('html').addClass('ifextension');
        }

en su sitio web afirma algo como,

if (!($('html').hasClass('ifextension')){}

Y lanza el mensaje apropiado.

Si está intentando detectar cualquier extensión de cualquier sitio web, esta publicación ayudó: https://ide.hey.network/post/5c3b6c7aa7af38479accc0c7

Básicamente, la solución sería simplemente intentar obtener un archivo específico (manifest.json o una imagen) de la extensión especificando su ruta. Esto es lo que usé. Definitivamente funcionando:

const imgExists = function(_f, _cb) {
    const __i = new Image();
    __i.onload = function() {
        if (typeof _cb === 'function') {
            _cb(true);
        }
    }
    __i.onerror = function() {
        if (typeof _cb === 'function') {
            _cb(false);
        }
    }
    __i.src = _f;
    __i = null;
});

try {
    imgExists("chrome-extension://${CHROME_XT_ID}/xt_content/assets/logo.png", function(_test) {
        console.log(_test ? 'chrome extension installed !' : 'chrome extension not installed..');
        ifrm.xt_chrome = _test;
        // use that information
    });
} catch (e) {
    console.log('ERROR', e)
}

Aquí hay otro enfoque moderno:

const checkExtension = (id, src, callback) => {
    let e = new Image()
    e.src = 'chrome-extension://'+ id +'/'+ src
    e.onload = () => callback(1), e.onerror = () => callback(0)
}

// "src" must be included to "web_accessible_resources" in manifest.json
checkExtension('gighmmpiobklfepjocnamgkkbiglidom', 'icons/icon24.png', (ok) => {
    console.log('AdBlock: %s', ok ? 'installed' : 'not installed')
})
checkExtension('bhlhnicpbhignbdhedgjhgdocnmhomnp', 'images/checkmark-icon.png', (ok) => {
    console.log('ColorZilla: %s', ok ? 'installed' : 'not installed')
})