Com uma “ajudinha” do Claude 3.5 Sonnet qualquer pessoa agora pode criar a sua própria extensão do Google Chrome!
Então, vamos começar a criar a nossa extensão do Chrome.
Objetivo
Criar uma extensão personalizada para o navegador Chrome que permita salvar prompts utilizados com frequência.
Ferramenta Utilizada
Claude 3.5 Sonnet, uma ferramenta de IA com boa capacidade de codificação.
Passo a Passo
1. Prompt
Utilize Claude 3.5 Sonnet para gerar os arquivos necessários para a criação da extensão do Chrome. Como exemplo, você pode usar o seguinte prompt:
Ajude-me a criar uma extensão para o Google Chrome que permita salvar os prompts usados com frequência. Quando eu acionar o plugin, devo conseguir copiar um prompt anterior que salvei e, com um clique, copiar isso para a minha área de transferência para que eu possa colar no Chatbot.2. Arquivos Criados
Com esse prompt o Claude 3.5 Sonnet vai produzir os arquivos necessário para a criação da extensão. Caso ele não crie todos os arquivo abaixo, peça para ele criar todos os arquivos necessários.
Certifique-se de obter os seguintes arquivos:
manifest.jsonpopup.htmlpopup.jsstyle.css
Estes arquivos são essenciais para o funcionamento da extensão.
2. Criação do Ícone
Vamos precisar também de um ícone para a nossa extensão. Para isso:
- Crie um ícone adequado com ferramenta de design, por exemplo, usando o Canva.
- Tamanho recomendado: 128×128 pixels.
- Salve o ícone na mesma pasta da seguinte forma:
icon.png.
3. Criação do Diretório
Crie uma nova pasta em seu computador onde você salvará todos os arquivos gerados pelo Sonnet e o icone.png que você criou.
4. Ativação do Modo Desenvolvedor no Chrome
- Abra o navegador Chrome.
- Acesse a parte de extensões:
chrome://extensions/. - Ative o “Modo do desenvolvedor” no canto superior direito da página.
5. Upload da Extensão
- Clique em “Carregar sem compactação” (Load unpacked).
- Selecione a pasta onde você salvou os arquivos gerados.
6. Teste da Extensão
Pronto! Agora, você acaba de criar em parceria com o seu companheiro de futuro grandes negócios, o Claude 3.5 Sonnet, uma extensão para o Google Chrome!
Agora, vamos testá-la.
Após carregar a extensão com sucesso, você pode testá-la para validar se está funcionando corretamente.
Resultados
Se tudo estiver correto, você terá criado uma extensão do Chrome funcional em aproximadamente 15 minutos. Esta extensão permitirá que você salve e reutilize prompts facilmente, abrindo possibilidades incríveis, especialmente para quem não tem experiência em codificação.
Conclusão
Claude Sonnet 3.5 mostrou-se altamente eficaz para criar rapidamente uma extensão do Chrome, mesmo para usuários sem experiência em codificação. Teste a ferramenta e explore suas funcionalidades para maximizar seu potencial criativo.
Códigos Criados Nesse Exemplo
manifest.json:
{
"manifest_version": 3,
"name": "Salvador de Prompts",
"version": "1.0",
"description": "Salva e copia prompts frequentemente usados",
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": ["storage", "clipboardWrite"]
}popup.html:
<!DOCTYPE html>
<html>
<head>
<title>Salvador de Prompts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<textarea id="promptInput" placeholder="Digite seu prompt aqui"></textarea>
<button id="savePrompt">Salvar Prompt</button>
<div id="savedPrompts"></div>
<script src="popup.js"></script>
</body>
</html>popup.js:
document.addEventListener('DOMContentLoaded', function() {
const promptInput = document.getElementById('promptInput');
const saveButton = document.getElementById('savePrompt');
const savedPromptsDiv = document.getElementById('savedPrompts');
// Carregar prompts salvos
chrome.storage.sync.get(['prompts'], function(result) {
const prompts = result.prompts || [];
displayPrompts(prompts);
});
// Salvar novo prompt
saveButton.addEventListener('click', function() {
const newPrompt = promptInput.value.trim();
if (newPrompt) {
chrome.storage.sync.get(['prompts'], function(result) {
const prompts = result.prompts || [];
prompts.push(newPrompt);
chrome.storage.sync.set({prompts: prompts}, function() {
displayPrompts(prompts);
promptInput.value = '';
});
});
}
});
// Exibir prompts salvos
function displayPrompts(prompts) {
savedPromptsDiv.innerHTML = '';
prompts.forEach(function(prompt, index) {
const promptElement = document.createElement('div');
promptElement.textContent = prompt;
promptElement.className = 'prompt-item';
promptElement.addEventListener('click', function() {
navigator.clipboard.writeText(prompt).then(function() {
promptElement.classList.add('copied');
setTimeout(function() {
promptElement.classList.remove('copied');
}, 200);
});
});
savedPromptsDiv.appendChild(promptElement);
});
}
});style.css:
body {
width: 300px;
padding: 10px;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
textarea {
width: 100%;
height: 100px;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
#savedPrompts {
margin-top: 20px;
}
.prompt-item {
background-color: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
cursor: pointer;
transition: background-color 0.2s;
}
.prompt-item:hover {
background-color: #e6f3ff;
}
.copied {
background-color: #e6ffe6 !important;
}Com este tutorial, você estará pronto para criar e testar sua própria extensão personalizada para o navegador Chrome. Boa sorte!
Pesquisa, Curadoria, Edição, formatação e finalização:
Werney Lima, julho 01, 2024 (Segunda-feira) – 09:06 hrs.