domingo, 5 de agosto de 2012

Injetando jQuery em páginas (ou quanto você já gastou na Steam)

Nos últimos meses venho usando jQuery cada vez mais. É um negocinho que têm facilitado demais minha vida com mexer com programação em Javascript. É tanto que ultimamente, sempre que acho uma página interessante na internet, eu abro o console javscript do browser e vou mexer no código, descobrir como algumas coisas foram feitas ou mesmo inventando coisas diferentes pra se fazer.

Uma dessas coisas que me veio à mente fazer foi fazer um contador de quanto eu gastei na Steam. Claro que eu poderia calcular isso na mão, mas queria fazer algo diferente. No código da página tenho tudo que preciso pra extrair as informações "financeiras" das minhas compras, tanto para coisas que comprei pra mim mesmo quanto para gifts que eu comprei pra dar de presente.

Num primeiro momento, eu queria fazer com jQuery mas a página não tinha instalado. Simplesmente ignorei isso e fui fazer em html+javscript comum. O código (para executar no console) ficou assim ...





Isso funcionou bonitinho no Chrome, mas depois fui testar no Firefox e não funcionou. Um amigo meu me disse que não tinha funcionado. Com isso, mudei um pouco o funcionamento e o código ficou assim...



Esse funcionou tanto no Firefox quanto no Chrome, mas não testei em outros browsers pois não tinha acesso aos mesmos.

Depois que fiz isso, fiquei pensando "Será que há uma forma de injetar jQuery dentro de sites que não possuem?" Com uma pesquisa mais extensiva eu descobri uma forma de fazer a injeção. Eu só precisava criar um objeto <script> dentro da DOM apontando para a URL de download do jQuery. Assim, o seguinte código permitiu que eu pudesse usar jQuery dentro de páginas que não possuem o mesmo instalado:



Só há um problema com isso: e se a página possuir outra versão do mesmo, vai zicar tudo? Sim, zicou. Foi pensando nisso que eu resolvi fazer um script de carregamento um pouco mais avançado, baseado num outro código que encontrei.



Nesse código, eu simplesmente verifico se a variável $ está setada com uma função. Se estiver, provavelmente já outra biblioteca, então eu uso jQuery.noConflict() para criar uma outra variável que usarei para não haver problemas de namespace no código.

Depois disso, funcionou perfeitamente no Firefox com o Firebug e no Chrome no console javascript. Só copiar e colar no console e vc já pode usar jQuery para brincar com a página.

Sobre o lance da Steam, claro que eu concluí. Como minha idéia era conseguir injetar jQuery dentro da página pra depois simplificar as coisas, eu simplifiquei e melhorei. Eu além de somar quanto foi gasto eu separei os gastos por jogos para mim mesmo e gifts para presentear outras pessoas.

A função você encontra abaixo:



Conclusão.

jQuery é uma mão na roda quando você precisa lidar com elementos de página sem precisar se preocupar com browsers. E com essa solução, inspecionar páginas fica até mais fácil pois vc pode simplesmente injetar o jQuery dentro de qualquer página e brincar!

P.S.

Se você achou muito complicado fazer isso, mas quer saber quanto já gastou em jogos e gifts na Steam, pode usar esse comando para isso:

curl -L steamcalculator.com/id/[SUA STEAM ID]|grep -o ';.* '|sed -n '3p'

Ou pode visitar o site Steam Calculator e verificar por você mesmo (o que não é tão preciso quanto meu código, me desculpa a sinceridade).

P.S.2:

Esse é o primeiro post (de vários) que eu estou usando o github:gist. Como eles mesmo falam em sua ferramenta ...

Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.

Bom, agora pelo menos os códigos ficam mais organizados e independentes da página e caso vocês gostem, podem simplesmente forkear e editar e mudar o que vcs acharem por bem!

Fontes
How to easily inject jquery into any web page