Vérifier si l'utilisateur a installé une extension Chrome

Question

Je suis en train de créer une extension Chrome, et pour que l'ensemble fonctionne comme je le voudrais, j'ai besoin d'un script JavaScript externe pour pouvoir détecter si un utilisateur a installé mon extension.

Par exemple : Un utilisateur installe mon extension, puis se rend sur un site web sur lequel se trouve mon script. Le site web détecte que mon extension est installée et met à jour la page en conséquence.

Est-ce possible ?

Answer 1

Chrome a désormais la possibilité d'envoyer des messages du site web vers l'extension.

Donc dans l'extension background.js (content.js ne fonctionnera pas) ajoutez quelque chose comme :

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

Vous pourrez alors passer un appel à partir du site 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;
        }
    });

Vous pouvez alors vérifier la variable hasExtension. Le seul inconvénient est que l'appel est asynchrone, vous devez donc le contourner d'une manière ou d'une autre.

Modifier : Comme mentionné ci-dessous, vous devrez ajouter une entrée à la section manifeste.json qui énumère les domaines qui peuvent envoyer des messages à votre addon. Par exemple :

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

Answer 2

Je suis sûr qu'il existe un moyen direct (en appelant les fonctions sur votre extension directement, ou en utilisant les classes JS pour les extensions), mais une méthode indirecte (jusqu'à ce que quelque chose de mieux arrive) :

Demandez à votre extension Chrome de rechercher un DIV ou un autre élément spécifique sur votre page, avec un ID très précis.

Par exemple :

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

Faites un getElementById et définir les innerHTML au numéro de version de votre extension ou autre. Vous pouvez ensuite lire le contenu de ce fichier côté client.

Mais là encore, vous devez utiliser une méthode directe s'il en existe une.

---

EDIT : Méthode directe trouvée !!

Utilisez les méthodes de connexion trouvées ici : https://developer.chrome.com/extensions/extension#global-events

Non testé, mais vous devriez être capable de faire...

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

Answer 3

Une autre méthode consiste à exposer une ressource accessible sur le web mais cela permettra à n'importe quel site web de tester si votre extension est installée.

Supposons que l'ID de votre poste soit aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa et vous ajoutez un fichier (disons, une image de pixels transparents) en tant que test.png dans les fichiers de votre extension.

Ensuite, vous exposez ce fichier aux pages web avec web_accessible_resources clé manifeste :

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

Dans votre page web, vous pouvez essayer de charger ce fichier par son URL complète (dans une balise <img> via XHR, ou de toute autre manière) :

chrome-extension://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/test.png

Si le fichier se charge, alors l'extension est installée. S'il y a une erreur lors du chargement de ce fichier, alors l'extension n'est pas installée.

// 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); 
  };
}

A noter : s'il y a une erreur lors du chargement de ce fichier, dit pile réseau L'erreur apparaîtra dans la console sans qu'il soit possible de la faire taire. Lorsque le Chromecast utilisait cette méthode, il a provoqué une certaine controverse à cause de cela ; avec la solution éventuelle très moche de simplement la mise sur liste noire d'erreurs très spécifiques de Dev Tools par l'équipe de Chrome.

---

Remarque importante : cette méthode ne fonctionnera pas dans les WebExtensions de Firefox. Les ressources accessibles sur le Web exposent intrinsèquement l'extension aux empreintes digitales, puisque l'URL est prévisible en connaissant l'ID. Firefox a décidé de combler cette lacune en attribution d'une URL aléatoire spécifique à une instance aux ressources accessibles sur le web :

Les fichiers seront alors disponibles en utilisant une URL comme :

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

Cet UUID est généré de manière aléatoire pour chaque instance de navigateur et ne correspond pas à l'ID de votre extension. Cela empêche les sites Web de prendre l'empreinte des extensions installées par un utilisateur.

Cependant, bien que l'extension puisse utiliser runtime.getURL() pour obtenir cette adresse, vous ne pouvez pas la coder en dur dans votre site web.

Answer 4

J'ai pensé que je pourrais partager mes recherches sur ce sujet. J'avais besoin de pouvoir détecter si une extension spécifique était installée pour que certains liens file:/// fonctionnent. Je suis tombé sur cet article ici Ceci explique une méthode pour obtenir le manifest.json d'une extension.

J'ai ajusté le code un peu et j'ai obtenu.. :

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'); };
}

Avec cela, vous devriez être en mesure d'utiliser Ext_Detect(ExtensionName,ExtensionID) pour détecter l'installation d'un nombre quelconque d'extensions.

Answer 5

Une autre solution possible si vous êtes propriétaire du site web est d'utiliser installation en ligne .

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

Je sais qu'il s'agit d'une vieille question, mais cette méthode a été introduite dans Chrome 15 et j'ai donc pensé la répertorier pour ceux qui ne cherchent qu'une réponse maintenant.