5

Comecei a programar UserScripts no Chrome e quase todos os snippets de código que encontro funcionam, mas na hora de ir pro Firefox dá problema. No Chrome uso o Tampermonkey e no Firefox o Scriptish (que é um fork do Greasemonkey).

[Nota aos futuros visitantes, desaconselho enfaticamente trabalhar com o Scriptish, tem coisas que rodam tranquilamente no GM e TM mas não nele.]

Por exemplo, se adiciono um script na DOM, cujo retorno é um JSONP, a função callback (global) do JSONP dá undefined no FF. Ou então, se faço uma chamada AJAX, na hora do executar uma função global dentro do success também dá undefined no FF.

Fiz uma versão reduzida que demonstra o problema. A função global_function roda no Chrome mas não no FF. O domínio de execução é o SOPT e a chamada AJAX é ao API do Stack Exchange.

// ==UserScript==
// @name           (SOPT) FF problems
// @namespace      sopt.se
// @author         brasofilo
// @include        http://pt.stackoverflow.com/*
// @description    Testando problemas no FF
// ==/UserScript==

jquery_url = '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'

global_function = function() {
    alert( 'yes!' );
}

/**
 * Chamada depois que o jQuery foi carregado
 */
function jqueryLoaded() {
    jQ.ajax({
        url: 'http://api.stackexchange.com/2.2/users',
        data: { order: 'desc', sort: 'reputation', site: 'stackoverflow' },
        type: 'get',
        dataType: 'json',
        cache: false,
        success: function(data) {
            console.log(data);
            global_function();
        }
    });
}

/**
 * Carrega jQuery e chama callback quando carregar
 * Nota: jQ substitui $ para evitar conflitos
 * 
 * https://stackoverflow.com/a/3550261/1287812
 */
function addJQuery( callback ) {
    var script = document.createElement( 'script' );
    script.setAttribute( 'src', jquery_url );
script.addEventListener( 'load', function() {
        var script = document.createElement('script');
        script.textContent = 'window.jQ=jQuery.noConflict(true);(' + callback.toString() + ')();';
        document.body.appendChild( script );
    }, false );
    document.body.appendChild( script );
}

addJQuery( jqueryLoaded );

Tentei window.global_function = function(){ }, function global_function() {}, unsafeWindow.global_function = function(){ } e segue undefined. E conferi as seguintes discussões mas não esclareci nada...

Como resolver essa questão de scope? E além disso, existem outras diferenças básicas ao programar UserScripts para o Chrome e para o Firefox?

1
  • O Stackoverflow já carrega o jQuery. O cógido que vc rodar dentro de script tags poderia acessar o jquery do stackoverflow sem precisar carregar a biblioteca denovo.
    – hugomg
    Commented 13/09/2014 às 4:13

1 Resposta 1

2

Por razões de segurança1, userscripts do greasemonkey rodam em um sandbox separado dos scripts normais da sua página. Em particular, o script greasemonkey tem uma window diferende da window do resto dos scripts da página: variáveis globais definidas no userscript não vazam pros scripts da página e vice versa.

Em particular, o código dentro das tags script que você criou vai rodar no contexto da página, que é diferente do contexto original do seu userscript.

Os links que você encontrou sugerem usar a propriedade unsafeWindow para acessar a window da página a partir da window do greasemonkey mas isso infelizmente não funciona mais, já que o Firefox recentemente removeu o suporte a unsafeWindow, que deixou de poder ser usado pelo greasemonkey a partir da versão 2.0.

Para resolver o seu problema, tem mais de uma abordagem que você pode tomar:

  • Use a a nova API export_function para exportar global_function do escopo do greasemonkey para o escopo da página, onde você está carregando o jQuery.

    Acho que essa solução só funciona no Firefox.

  • Carregue o jQuery no escopo do script greasemonkey, usando require. Assim o seu código roda todo no escopo do greasemonkey e você pode ignorar o escopo da página (e tags de script inseridas dinâmicamente).

    Acho que evitar tags script dinâmicas seria a solução menos "gambiarra". O problema é que não sei se dá pra fazer isso no tampermonkey e nem toda biblioteca que vc quiser usar aceita ser rodada no escopo do greasemonkey.

  • Faça o oposto da segunda alternativa: rode seu cógigo todo no escopo da página e ignore o escopo do greasemonkey. A maneira mais fácil de fazer isso seria por todas as suas funções dentro do jqueryLoaded, que é a função que vc está serializando pra dentro da script tag:

    function jQueryLoaded(){
        function global_function(){ ... }
    
        jQ.ajax({
            success: function(){
                 global_function();
            }
        });
    }
    

    Botar o seu código todo dentro da tag script injetada é bem simples e "cross browser" e também é a única forma de sobrescrever variáveis definidas pelos scripts da página (se vc precisar fazer isso). A desvantagem principal é que os números das linhas das mensagens de erro que você obtém não batem com os números de linha do seu arquivo original.


1 O greasemonkey disponibiliza algumas APIs mais privilegiadas, que não queremos que sejam acessadas pelos scripts que carregamos da web.

0

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 .