Como criar extensões para FireFox com scripts do Greasemonkey

Você vai aprender o jeito mais fácil de criar extensões para FireFox. ;)

O que são scripts do Greasemonkey

São JavaScripts que podem ser adicionados em páginas específicas para adicionar novas funcionalidades. Por exemplo: mudar a cor de fundo dos links com rel=”nofollow” para amarelo.

Bora criar uma extensão

Vamos usar o exemplo acima de colorir o fundo dos links com rel=”nofollow”.

• Abra o User Script Compiler.
• Em Creator Name, coloque seu nome.
• Extension home page, seu site.
• Extension version, 1.0.
• Firefox min version, deixe como está.
• Firefox max version, coloque 3.*.
• Em User Script, cole o seguinte código:

// ==UserScript==
// @name Nofollow Highlighter
// @namespace http://pedromenezes.com
// @description Script de exemplo para colorir o fundo dos links com rel=”nofollow”
// @include *
// ==/UserScript==
var links = document.getElementsByTagName(’a')
for (x=0; x < links.length; x++)
if (/nofollow/ig.test(links[x].getAttribute('rel'))) links[x].style.backgroundColor = '#FF0'

Os comentários (as linhas que começam com //) serão o nome da extensão, descrição, endereço da página da extensão e conterão as páginas que o script será executado ou não.

Para saber mais sobre esses comentários, leia o Dive Into Greasemonkey.

• Clique em Compile.

Sua extensão está pronta!

Como usar a extensão

• Baixe-a.
• Aperte Ctrl+o ou vá em Arquivo > Abrir Arquivo.
• Abra o arquivo da extensão e instale-a.
• Reincie o FireFox.

Essa é sua extensão!

Agora é só testar. Abra um post do PedroMenezes.com e olhe os nomes das pessoas que comentaram. Os links estão com rel=”nofollow”.

Extensão em funcionamento.

Viu? Não foi tão difícil.

Brinque um pouco aí, compartilhe idéias de extensões ou envie para o site oficial de extensões para FireFox.

Curtiram esse tutorial?

Diga o que gostou, o que pode melhorar, dê idéias ou fale qualquer coisa pelos comentários. :)