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:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
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) :