"Después del juego es antes del juego"
Sepp Herberger

miércoles, 24 de abril de 2024

Chequear mediante javascript si está instalada una extensión de Google Chrome

Que complicadas son a veces las cosas. Necesitaba asegurarme en la parte javascript de una página web de que Google Chrome tenía instalada una extensión determinada y me encuentro que no hay ninguna función en el API de Chrome que permita averiguarlo. La única manera es mediante métodos indirectos y cutres: intentar hacer algo con la extensión y capturar el error que salta si no está presente.

Hay varías maneras de hacerlo, esta es simplemente una de ellas. Necesitamos saber:
  1. La ID de la extensión, que es como su DNI que la identifica de forma universal. La instalamos desde https://chromewebstore.google.com/ y luego vamos a Gestionar Extensiones de nuestro Chrome.
  2. Elegimos la extensión en cuestión en "Gestionar Extensiones" y le damos a "Detalles". En la barra de la URL aparece el ID, por ejemplo: chrome://extensions/?id=pmlcjncilaaaemknfefmegedhcgelmee.
  3. Visualizamos al manifiesto de la extensión para ver la parte pública de la misma, esto se hace accediendo con la URL: chrome-extension://pmlcjncilaaaemknfefmegedhcgelmee/manifest.json (cambiar la parte en negrita por el ID de tu extensión).
  4. En el manifiesto, que es una estructura .json localizamos el atributo "web_accessible_resources.resources". Alli se enumeran los recursos de la extensión que son públicos.
  5. Elegimos uno de esos recursos públicos. Por ejemplo, dado el manifiesto:
     {
       "action": {
          "chrome_url_overrides": {
             "newtab": "popup.html"
          },
          "default_title": "__MSG_extName__"
       },
       "background": {
          "service_worker": "js/background.js"
       },
       "content_scripts": [ {
          "all_frames": false,
          "js": [ "js/content.js" ],
          "match_about_blank": false,
          "matches": [ "\u003Call_urls>" ],
          "run_at": "document_start"
       } ],
       "default_locale": "en",
       "description": "__MSG_extShortDesc__",
       "host_permissions": [ "\u003Call_urls>" ],
       "icons": {
          "128": "icons/icon-128.png",
          "16": "icons/icon-16.png",
          "300": "icons/icon-300.png",
          "48": "icons/icon-48.png"
       },
       "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxAT6Z9x4SMUH91sYicM+8qwroIqnrZoMYW4zd+0IX3DGnEtzUX6bNusmBjiwKydV9LvASRM5o12bmc+XuWsYr/G/YwzoKuVfmLHgr8JVfJDwS67XlYKHc1YeSLDI1r7mVrP2nr6W6MBfxRuxWz4QoAZxnaQkw9Dw+SNQksGQq2BIDt12uqSFavzEILGcURMM1+YdILVAEHLSiGVwiLveZfcZzPhS91tJNgawW/nagxxe7iuRE0ea0h+m4I9b3cHCW1oc22nUR9FIliXsslM1F6BZNQDxJoHBJM01+Jq5VDpInXTykeHvL2+v9JRhRrizeLsdRcPBKyIFZDROXQnR+wIDAQAB",
       "manifest_version": 3,
       "minimum_chrome_version": "88.0",
       "name": "__MSG_extName__",
       "offline_enabled": true,
       "permissions": [ "storage", "scripting", "alarms" ],
       "update_url": "https://clients2.google.com/service/update2/crx",
       "version": "1.0.5",
       "web_accessible_resources": [ {
          "matches": [ "\u003Call_urls>" ],
          "resources": [ "icons/*" ],
          "use_dynamic_url": false
       } ]
    }
    
    Podríamos escoger el recurso icons/icon-16.png. La URL para acceder a él sería: chrome-extension://pmlcjncilaaaemknfefmegedhcgelmee/icons/icon-16.png. Si abrimos esa URL en el navegador debería cargarse dicho icono. Ojo: igual que hemos elegido un .png podríamos haber elegido un .html o un .txt, no importa el tipo de recurso.
  6. La URL elegida anteriormente será la que usemos para chequear si existe la extensión desde JavaScript. Intentaremos acceder a dicha URL y si obtenemos HTTP 200 OK es que la extensión está instalada y activa, en caso contrario la extensión no está disponible. Es feo, pero funciona.


La función quedaría:
function extensionInstalada() {

	 var url = 'chrome-extension://pmlcjncilaaaemknfefmegedhcgelmee/icons/icon-16.png';
	 var hasExtension=null;

	 var xhr = new XMLHttpRequest();
	 xhr.onreadystatechange = function() {
		 if (xhr.readyState != 4) return;
		 if (xhr.status === 200) {
			   hasExtension=true;
		 }
	 };
	 xhr.open("GET", url, false);
	 try {
		  xhr.send();
	 } catch (error) {
		 hasExtension=false;
	 }
	 return hasExtension;

}  
El código JavasCript que comprobaría la extensión sería:
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome == false) {
	 alert("Esto solo funciona con Google Chrome");
	 return;
}
resultado=extensionInstalada();
if (!resultado) {
	 alert("No tienes instalada la extensión XXX.");
	 return;
}
Y ya está. No me digan que Google no podría currarselo un poquito para hacerlo más sencillo.

No hay comentarios:

Publicar un comentario