Gostaria de fazer um botão aparecer no site que desenvolvi, mas só para quem tem a extensão.
Eu tenho os códigos CSS, HTML e Javascript pra gerar o botão. A funcionalidade do botão está pronta, só preciso fazer a extensão.
Podem me ajudar?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeGostaria de fazer um botão aparecer no site que desenvolvi, mas só para quem tem a extensão.
Eu tenho os códigos CSS, HTML e Javascript pra gerar o botão. A funcionalidade do botão está pronta, só preciso fazer a extensão.
Podem me ajudar?
O diretório representando a extensão deverá ficar com o seguinte conteúdo:
Seu arquivo de manifesto deverá ficar da seguinte forma:
Arquivo manifest.json
{
"manifest_version": 2,
"name": "Adiciona Botao",
"description": "Adiciona um botao no final da pagina",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery.js", "main.js"]
}
]
}
No arquivo main.js você executa o código que adiciona o botão:
$(document).ready(function() {
$("body").append("<input type='button' onclick='alert(\"Botão adicionado por uma extensão!\")' value='Botão Dinâmico' />");
});
Agora, para carregar a extensão, vá para a URL chrome://extensions/, clique em "Carregar Extensão Expandida..." e selecione a pasta da extensão.
Feito isso, basta acessar qualquer página que contenha http na URL e o botão será adicionado ao final dessa página. Clique no botão para testá-lo.
Já há uma resposta sobre o desenvolvimento para Chrome, então tentarei explicar de forma simplificada como fazer o mesmo no Firefox.
A Mozilla disponibiliza um SDK que inclui APIs para o desenvolvimento, execução e teste das extensões.
O desenvolvimento pode ser feito em qualquer editor de sua preferência, usando linguagens como Html, CSS e Javascript. Já a inicialização, execução e os testes são feitos por meio da jpm, que é uma ferramenta baseada em Node e que substituiu o uso do cfx após o Firefox 38.
Na documentação da Mozilla, há uma página voltada para a explicação de como instalar a jpm, bem como a lista dos comandos que podem ser usados como parâmetros de execução.
Tendo o Node e o módulo do jpm instalados, crie um diretório vazio.
Por linha de comando, navegue até o diretório que criou e execute o comando:
> jpm init
Serão perguntadas algumas informações como nome da extensão, descrição, autor... após inserir essas informações, no diretório, será criado um "esqueleto" como ponto de partida para o desenvolvimento.
Não é preciso fazer nenhuma modificação no package.json por enquanto. E nem será necessário se a única coisa que precisa fazer é modificar o Html de uma página para criar um botão.
A única coisa que você precisa verificar é se o atributo main
está apontado para o arquivo index.js
que foi criado no diretório, ele define qual será o primeiro arquivo a ser executado.
Um dos módulos no SDK é o page-mod que, como o nome sugere, permite modificar páginas. Tomando como exemplo o StackOverflow, para inserir um botão na página, o index.js
poderia ficar assim:
let { PageMod } = require('sdk/page-mod');
PageMod({
include: '*.stackoverflow.com',
contentScript: 'document.body.insertAdjacentHTML("afterbegin", "<button>Botão criado pela extensão</button>")'
});
Somente isto. Executando o comando jpm run
e navegando até o site StackOverflow, o botão será exibido no topo da página:
No exemplo, o botão até herdou as regras CSS do site.
Como você disse já ter o script que controla o botão, você pode trocar o contentScript
por contentScriptFile
para incluir o arquivo por completo.
No diretório da extensão, crie uma pasta chamada data e em qualquer módulo da extensão é possível usar o alias ./
para obter os arquivos na pasta data.
Então, em minhaextensão/data/
você teria o seu arquivo Javascript que controla a interação com o botão. E agora seu index.js
ficaria assim:
let { PageMod } = require('sdk/page-mod');
PageMod({
include: '*.stackoverflow.com',
contentScriptFile: './meuscript.js'
});
Se quiser importar mais de um script, também é possível:
let { PageMod } = require('sdk/page-mod');
PageMod({
include: '*.stackoverflow.com',
contentScriptFile: ['./jquery.min.js', './meuscript.js', './meuoutroscript.js']
});