Você pode adicionar manualmente arquivos com a extensão .user.js
para a aba com endereço chrome://extensions/
(no chrome, outros navegadores baseado em Chromium talvez não funcione):
Clique na imagem para ver a animação:
É como se o Chrome tivesse o Greasemonkey nativo (creio que seja isso mesmo).
No entanto os scripts instalados diretamente sem tampermonkey não permitirão acesso direto as variáveis definidas pela página, apenas variáveis nativas são acessíveis. Então se no seu arquivo .user.js
tentar acessar diretamente $
, jQuery
, window.$
e window.jQuery
retornará undefined
.
No entanto se você injetar um script via document.createElement
usando string ele conseguirá acesso, então por este motivo disto "(" + f.toString() + ")(jQuery)";
, ele converte a função para string e injeta na página.
Nota: No tampermonkey para Chrome/Opera não é necessário pois ele permite o acesso direto a qualquer variável da aba, aparentemente o Greasemonkey também permite o acesso direto atualmente
Outro possível situação é evitar conflitos com $
em diferentes bibliotecas javascript que o usam, por exemplo se o site usar a biblioteca YUI que pode sobrescrever a variável $
, por isto o uso de (jQuery);
ao invés de acessar diretamente.
Note que este tipo de técnica não é usada somente em userscripts
, ela é usada por plugins jQuery também.
Além disso também esta função também pode ser usada para coisas como:
- Muitos userscripts fazem uso do jQuery
- As pessoas necessitam rodar um userscript somente em páginas com jQuery, tipo para corrigir ou modificar comportamentos do jQuery ou até fazer um tipo de proxy nele.
- Para detectar se o jQuery já foi carregado, se caso não for ele fica em loop esperando o jQuery ser carregado (isso conforme quem escrever o userscript)
Note que no sites da rede só usam jQuery, mas um userscript pode ser usado em diferentes sites, mesmo que você crie ele para um site especifico ou desenvolvido para ser usado em diferentes sites propositalmente.
Explicação do código:
function with_jquery(f) {
if (!jQuery) // <-- Verifica se existe jQuery na página, ou seja ele já foi carregado
return; // <-- Se não tiver sido carregado
//Se o jQuery estiver disponivel na página que o userscript é injetado então a partir daqui carrega o script solicitado
var script = document.createElement("script");
script.type = "text/javascript";
//Passa a variavel jQuery para o escopo do callback para evitar conflitos com outras bibliotecas no uso do $
script.textContent = "(" + f.toString() + ")(jQuery)";
document.body.appendChild(script);
};
E esta linha especifica:
"(" + f.toString() + ")(jQuery)";
Passa o jQuery para o contexto da função chamada, não é algo necessário de fato, mas digamos que seja um proxy que afete o comportamento do jQuery ou por N motivos existe algum problema de contexto das funções, isto eventualmente armazenaria dentro do contexto atual, sem necessitar de acessar o global (no caso window.
) diretamente e evitar conflitos com múltiplas bibliotecas
Por exemplo, supondo que o site use jQuery e YUI, o objeto $
poderá entrar em conflito, então geralmente usamos $.noConflict();
, mas podemos também passar para o contexto da função, ou seja se $
sendo o argumento de um callback:
with_jquery(function($){ //<-- aqui
// Resto do UserScript
});
Será uma variável diferente do $
global (que é o mesmo que window.$
), se por acaso um outro script ou userscript carregar uma lib como a YUI que use $
no escopo global, ele poderá reescrever a variável $
fazendo com que o seu userscript pare de funcionar, pois provavelmente a YUI irá sobreescrever o $
, mas o que você espera é usar o jQuery e não o YUI, se você usar diretamente assim poderá ocorrer o problema de conflito:
$(".foo").bar();
Mas se fizer assim:
with_jquery(function($){
$(".foo").bar();
});
Você estará acessando o mesmo que a variavel jQuery o que evitaria o conflito com outras libs como a YUI, e não precisará escrever o código de maneira longa:
jQuery(".foo").bar();
Podendo assim manter o uso do $
para se referir ao jQuery, mesmo que outra lib afete o global.