0

Criei uma extensão para o Chrome e Firefox, ambas estão em suas respectivas lojas Webstore e Addons Mozilla, objetivo é identificar se o usuário tem a extensão instalada caso contrario informar que é preciso instalar a extensão.

Nota: no chrome eu consegui fazer, meu problema atual é identificar ela no Firefox.

2 Respostas 2

1

Resolvi da seguinte maneira : No meu sistema faço uma verificação no localStorage para tentar encontrar um atributo o qual é setado pela extensão, caso encontre eu deduzo que a extensão está ali, e limpo o atributo no final da página

OBS : A extensão sempre seta esse atributo ao entrar na determinada url

1

Ao invés de checar com JavaScript você pode injetar um script que crie uma variável global (no window.), assim por exemplo (esse exemplo é com WebExtension (suportado pelo Chrome, Firefox e Edge) o outro tipo de extensão esta descontinuado), então crie um manifest.json parecido com isto:

{
    "name": "Meu add-on",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "Foo bar baz",
    "icons": {
        "128": "images/icon-128px.png",
        "48":  "images/icon-48px.png",
        "32":  "images/icon-32px.png",
        "16":  "images/icon.png"
    },
    "content_scripts": [{
        "matches": [
            "*://dominio-que-ira-injectar-o-add-on.com/*"
        ],
        "js": [
            "checkaddon.js"
        ]
    }]
}

Na mesma pasta do checkaddon.js adicione isto:

window.MeuAddonAvailable = true;

Então no script do seu site faça a seguinte checagem:

if (!window.MeuAddonAvailable) {
     alert('Add-on não instalado');
}

Pode também mostrar um elemento que estava oculto:

function checkAddon()
{
    var notice = document.getElementById('notice-addon');

    if (window.MeuAddonAvailable) {
         notice.classList.remove("show");
    } else {
         notice.classList.add("show");
    }
}

if (/^(interactive|complete)$/i.test(document.readyState)) {
    checkAddon();
} else {
    document.addEventListener('DOMContentLoaded', checkAddon);
}

O html seria algo como:

<div id="notice-addon">
Instale o add-on
</div>

E o CSS assim:

#notice-addon {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     display: none;
     background-color: #f44336;
     color: #fff;
}

#notice-addon {
     display: block;
}
1
  • 1
    Bem melhor dessa forma Commented 14/11/2017 às 13:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .