Extensão do Chrome - Scripts de conteúdo que se acumulam várias vezes em links / navegação AJAX

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

Pergunta

Estou muito perto de fazer minha extensão do Chrome funcionar perfeitamente, mas estou tendo um último problema agora.

O problema parece estar relacionado ao script de conteúdo sendo injetado repetidamente em sites como o Facebook, onde a página inteira não é recarregada ao clicar em um link, etc ...

Acho que o problema está relacionado ao fato de o site ser muito dependente de AJAX.

Se eu atualizar a página inteira ou carregá-la pela primeira vez, não haverá problema. Minha extensão é executada e o script de conteúdo é injetado corretamente.

No entanto, se eu carregar a página da primeira vez e clicar em um link do site, a "seção de conteúdo" do Facebook carregará qualquer link em que você clicou, enquanto a barra de navegação azul flutuante no topo não atualize ou mude em tudo.

I.E. a página inteira não recarrega. Como a "seção de conteúdo" do site e a barra de navegação estão no mesmo quadro, o script de conteúdo continua sendo injetado mais uma vez para cada link em que você clica.

Então, eventualmente, vejo no log do meu console que ele está rodando 2X, 3X, 4X, 5X, etc. Conforme eu clico em mais links, o número aumenta em 1 a cada vez.

Então, minha pergunta é a seguinte:

Existe uma maneira simples de verificar se o script de conteúdo JÁ está presente / ativo antes de injetá-lo novamente? Ou o que mais pode ser usado como solução alternativa para uma situação como esta?

Foi útil?

Solução

Eu previ um problema semelhante ao escrever o script de conteúdo para minha extensão, então adicionei um atributo exclusivo ao elemento <body> de cada página com o nome da extensão e a versão.

A primeira coisa que o script de conteúdo faz é verificar se este atributo já faz script e para se o fizer. Caso contrário, ele adicionará este atributo (com um valor de true) e continuará com seu propósito.

Se você deseja ver minha solução ;

O aspecto um pouco mais complicado dessa técnica é buscar a versão usando passagem de mensagens e analisar o manifesto (recuperado em uma solicitação AJAX) em um objeto JSON.

Para ver exatamente como consegui isso, observe as funções init e onRequestHelper aqui ;

Claro, você pode apenas codificar a versão ou omiti-la inteiramente. Contanto que o nome do atributo seja único.

Outras dicas

No quadro pai, você poderia adicionar window.doneInjecting = true; ou algo semelhante?(ou talvez adicionar um elemento oculto à página - não tenho certeza se os frames filhos podem acessar as variáveis JavaScript de seus pais)

Mas basicamente definindo um sinalizador simples, de modo que cada vez que seu script de conteúdo for injetado, verifique se o sinalizador existe e só continue se não existir?

onUpdated é disparado sempre que o estado de uma guia muda.basta carregar seus scripts de conteúdo em changeInfo.status == "complete"

<"background.js 

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
chrome.tabs.getSelected(null, function(tab) {
    // Do some stuff
    if (changeInfo.status == "complete")
    {
        // load your scripts here
        chrome.tabs.executeScript(tabId, {file: "jquery.js"});
        chrome.tabs.executeScript(tabId, {file: "jquery.highlight.js"});
    }
});
});

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top