Como criar uma extensão para o Google Chrome – Chrome Extension

Essa extensão é super simples, deixei o código dela no github. Na prática, ela é um Content Script, porque é um arquivo Javascript que roda em um contexto.

O objetivo da extensão é mudar o texto das páginas de usuários do StackOverflow.

Primeiro Passo – Criar o Manifest.json

Crie uma pasta para a sua extensão. No caso eu criei uma pasta chamada Mano_programador que é o nome da minha extensão para chrome . Você pode encontrá-la aqui

Qualquer extensão para chrome precisa obrigatoriamente do arquivo manifest.json. Nele você vai colocar as informações importantes sobre a sua extensão que serão usadas pelo Chrome e pela Chrome Web Store.

O meu arquivo ficou assim:

{
 "manifest_version": 2,

 "name": "Mano_programador",
 "description": "Mano programador, o dialeto da quebrada dos nerd.",
 "version": "1.0",
 "content_scripts": [
     {
         "matches": ["http://stackoverflow.com/users/*"],
         "js": ["jquery.js", "myscript.js"]
     }
     ]
}

Coloquei apenas os atributos obrigatórios, os matches nas páginas que meu Content Script vai rodar e os arquivos Javascript que vou utilizar, no caso coloquei o jquery também, pois vou utilizá-lo.

A lista completa com os atributos que podem ir no Manifest.json você encontra aqui.

Segundo Passo – Criar o myscript.js

Você pode chamar esse arquivo como quiser. Eu chamei de myscript.js. Não esqueça de colocar o jquery.js ou qualquer outro arquivo que você tenha colocado no manifest aqui também.

myscript.js:

$(".count").each(function(index) {

    if ( (typeof this.nextSibling) != 'undefined'){
        switch(this.nextSibling.nodeValue.trim()){
            case 'Answers':
                this.nextSibling.data = ' manos me devem uma breja';
                break;
            case 'Reputation':
                this.nextSibling.data = ' de reputação no gueto dos nerd';
                break;
            case 'Questions':
                this.nextSibling.data = ' paradas que não sabia e agora sei';
                break;
            case 'Tags':
                this.nextSibling.data = ' assuntos pa toca po pai';
                break;
            case 'Accounts':
                this.nextSibling.data = ' otros saite';
                break;
            case 'Badges':
                this.nextSibling.data = ' meus bagulinhos';
                break;
            case 'Active bounties':
                this.nextSibling.data = ' Recopensas q to dano';
                break;
            case 'Votes Cast':
                this.nextSibling.data = ' noqvotei [tan dóu fo wut]';
                break;
        }
    }
});

Esse arquivo apenas encontra os textos da página e os substitui pelo dialeto do Mano Programador.

Terceiro Passo – Testar sua extensão

Para testar sua extensão abra o seu navegador Google Chrome e entre na seguinte página: chrome://extensions/

Você verá uma lista de todas as extensões instaladas no seu Chrome, para colocar a sua apenas arraste e solte a pasta com todos os seus arquivos (no caso: manifest.json, myscript.js e jquery.js) para dentro dessa aba do Chrome. Pronto, agora você pode testar seu script.

Quarto Passo – Publicar na Chrome Web Store

Isso é fácil, você precisa ter uma conta de programador (que vai te custar uma taxa de 5 dólares). É só entrar no Developer Dashboard e seguir os passos.

Agora você sabe como criar uma extensão para o Google Chrome

Veja como fica uma página de usuários do stackoverflow (no caso a minha) :
screenshot - mano programador

Projeto Django privado para código aberto sem comprometer a segurança

Uma vez resolvi passar um projeto django que fiz de fechado para aberto e acabei colocando as senhas que usava no servidor de emails no GitHub. É mole?

Bom, se o projeto é novo recomendo o seguinte, nunca coloque dados secretos no seu settings.py e dentro do git, inclusive o SECRET_KEY gerado.faça o seguinte, crie um arquivo settings_local.py na mesma pasta que o seu settings.py

Neste arquivo coloque toda a informação que você não quer que seja compartilhada, como por exemplo:

  • SECRET_KEY
  • EMAIL_HOST_PASSWORD (E outras configurações de Email)
  • SOCIAL TOKENS (como para Facebook e Twitter)
  • etc…

No final do seu arquivo settings.py importe tudo que estiver no settings_local.py:

 try:
     from settings_local import *
 except ImportError:
     pass

Agora você precisa adicionar o settings_local no .gitignore para que ele não seja enviado durante seus commits. Se você ainda não criou o arquivo faça o seguinte:

touch .gitignore
vim .gitignore

Dentro desse arquivo coloque o caminho relativo do seu settings.py, no caso <nome_do_app>/settings_local.py e depois adicione seu gitignore no git.

git add .gitignore
git commit -m "Ignorando o settings local"

Pronto, agora você consegue continuar programando sem se preocupar em colocar dados que não deveria em um projeto OpenSource.

Mas e se você já estava fazendo tudo sem isso e o resto dos dados estão todos no histórico do GIT? Você pode usar o BFG Repo-Cleaner ou o git-filter-branch.