Extensión de Chrome: cómo detectar si se instala una extensión utilizando scripts de contenido

StackOverflow https://stackoverflow.com/questions/9309068

Pregunta

Estoy haciendo esta pregunta después de mirar varias preguntas relacionadas en Stackoverflow. Empecé con cómo detectar si se instala una extensión. Opté por el método donde agrego un DIV al cuerpo usando scripts de contenido en algunas páginas. Así es como lo hice ...

manifest.json

{
    "name": "Install Check",
    "content_scripts": [
        {
            "matches": ["http://host.com/*"],
            "js" : ["insert_node.js"]
        }
    ],
    "permissions": [
        "tabs", "host.com/*"
    ]
}

insert_node.js (script de contenido)

var insert_node = document.createElement('div');
insert_node.id = "HOST_SITE";
document.body.appendChild(insert_node);

página de host

<html>
<head>
</head>
<body>
    <h1>This is a host site. Welcome!!!</h1>
    <script src="jquery.js"></script>
    <script src="notification.js"></script>
</body>
</html>

script de instalación de extensión

$(document).ready(function() {
    if ($('#HOST_SITE').length > 0) {
        alert("you have our extension installed");
    } else {
        alert("not installed");
    }
});

Mi problema es que la alerta con el mensaje not_installed Siempre aparece antes de que el Chrome pueda inyectar el nodo en DOM. Yo leo sobre run_at atribuir manifest.json aquí. Pero eso tampoco resolvió el problema. Probé los tres document_start, document_idle, document_end valores. ¿Qué estoy haciendo mal por aquí?

¿Fue útil?

Solución

Parece tuyo de la extensión y el sitio web, en cuyo caso sería mucho más fácil de usar Instalación en línea.

if (typeof chrome !== "undefined" && typeof chrome.app !== "undefined" && chrome.app.isInstalled) {
  // extension is installed.
}

Otros consejos

No estoy seguro de cómo hacer esto con jQuery como $("#something") ¿Solo parece buscar en la cabeza y el cuerpo? ... y necesitamos document.documentElement. La razón es que estamos insertando algo en document_start y no hay cuerpo/cabeza entonces, pero hay documentos.

manifest.json

{
    "name": "Install Check",
    "content_scripts": [
        {
            "matches": ["HOST"],
            "js" : ["myscript.js"],
            "run_at":"document_start"
        }
    ],
    "permissions": [
        "tabs", "HOST"
    ],
    "version":"1.0"
}

myscript.js

var insert_node = document.createElement('div');
insert_node.id = "HOST_SITE";
document.documentElement.appendChild(insert_node);

notificación.js

if (document.documentElement.querySelector("#HOST_SITE")) {
    alert("Installed");
} else {
    alert("Not Installed");
};

Tengo esto funcionando ...

  • Haga que el script de contenido de inserción de extensión después de las cargas DOM pero antes de que se carguen otros recursos como imágenes

manifest.json (agregado "run_at": "document_end")

{
    "name": "Install Check",
    "content_scripts": [
        {
            "matches": ["http://host.com/*"],
            "js" : ["insert_node.js"],
            "run_at": "document_end"
        }
    ],
    "permissions": [
        "tabs", "host.com/*"
    ]
}
  • usar window.onload en vez de $(document).ready

insert_node.js (cambió el $(document).ready a window.onload)

window.onload = function() {
    if ($('#HOST_SITE').length > 0) {
        alert("you have our extension installed");
    } else {
        alert("not installed");
    }
};

Sin embargo, no entiendo completamente por qué usar window.onload obras y $(document).ready no es.

¿Puede ser alguien que pueda arrojar algo de luz sobre eso?

También estoy de acuerdo con @abraham que usa chrome.app.isInstalled es una mejor manera de hacer esto (la respuesta a mi comentario sería la guinda del pastel) :)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top