4

Olá, eu preciso detectar se os usuários que acessarem meu site já têm a minha extensão instalada, algumas funções do site dependem desta extensão.

Caso o usuário tenha a extensão instalada poderá acessar normalmente e caso não tenha aparecerá um aviso que indica o link para a instalação no Chrome e Mozilla.

1 Resposta 1

6

Nessa pergunta tem um código bem simples e funcional. O código abaixo irá tentar carregar um cross-esquema de script a partir de chrome-extension: // URL, neste caso - o arquivo de manifest. Você só precisa do ID exclusivo para colocar no URL. Se a extensão for instalado, manifesto irá carregar e onload evento será acionado, se não onerror. Lembrando que para você conseguir comunicação com a Extensão e o seu site, no manifest.json da extensão ela deve possuir o "web_accessible_resources": ["*"].

Código:

function Ext_NotInstallada(ExtName, ExtID) {
    console.log(ExtName + ' --Não Installada!');
    if (msg.innerHTML != '')
        msg.innerHTML = msg.innerHTML + "<BR>"

    msg.innerHTML = msg.innerHTML + ExtName + ' _Clique no link para obter a extensão! <a href="https://chrome.google.com/webstore/detail/locallinks/' + ExtID + '">here</a>';
}

function Ext_Installada(ExtName, ExtID) {
    console.log(ExtName + ' Instalada');
}

var Detectar_Extensao = function(Name, ID) {
    var s = document.createElement('script');
    s.onload = function() {
        Ext_Installada(Name, ID);
    };
    s.onerror = function() {
        Ext_NotInstallada(Name, ID);
    };
    s.src = 'chrome-extension://' + ID + '/manifest.json';
    document.body.appendChild(s);
}

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

    if (is_chrome)
        Detectar_Extensao('__MSG_CHROME_HANGOUTS_SHORT_NAME__', 'jifpbeccnghkjeaalbbjmodiffmgedin');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='msg'></div>

Teste com Hangouts.

O ID fica na URL

inserir a descrição da imagem aqui

Você pode obter detalhes do manifest.json seguindo esse Tutorial.

  1. Instale a extensão Chrome Extension Source Code Viewer

  2. Abra seus Apps e clique em CRX, a extensão instalada anteriormente.

inserir a descrição da imagem aqui

  1. Clicando em View Source, você verá detalhes do arquivo.

inserir a descrição da imagem aqui

4
  • 1
    Marconi excelente resposta muito bem explicada muito obrigado! Porém eu não entendo que fazendo essas operações com a extensão do seu exemplo da tudo certo, mas quando eu boto Name e ID de qualquer outra extensão ele não funciona corretamente... Commented 6/02/2017 às 12:34
  • Então meu amigo, eu quero detectar a minha extensão que em breve irei coloca-la no Chrome WebStore, porém estou testando com algumas extensões que já possuo aqui como por exemplo: Tampermonkey, Responsive Web Design Tester , Window Resizer e o Gmass e infelizmente nenhum está respondendo corretamente Commented 6/02/2017 às 12:58
  • Que estranho tentei aqui e nenhuma deu certo, o problema que está acontecendo é que o aviso para instalar aparece mesmo depois da extensão ter sido instalada e ativa.. Apenas a extensão do exemplo Hangouts do Google que funciona normalmente Commented 6/02/2017 às 13:17
  • Sim estou utilizando o Google Chrome Commented 6/02/2017 às 13:21

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 .