Com uma “ajudinha” do Claude 3.5 Sonnet qualquer pessoa agora pode criar a sua pr\u00f3pria extens\u00e3o do Google Chrome!<\/p>\n\n\n\n
Ent\u00e3o, vamos come\u00e7ar a criar a nossa extens\u00e3o do Chrome.<\/p>\n\n\n\n
Criar uma extens\u00e3o personalizada para o navegador Chrome que permita salvar prompts utilizados com frequ\u00eancia.<\/p>\n\n\n\n
Claude 3.5 Sonnet, uma ferramenta de IA com boa capacidade de codifica\u00e7\u00e3o.<\/p>\n\n\n\n
Utilize Claude 3.5 Sonnet para gerar os arquivos necess\u00e1rios para a cria\u00e7\u00e3o da extens\u00e3o do Chrome. Como exemplo, voc\u00ea pode usar o seguinte prompt:<\/p>\n\n\n\n
Ajude-me a criar uma extens\u00e3o para o Google Chrome que permita salvar os prompts usados com frequ\u00eancia. Quando eu acionar o plugin, devo conseguir copiar um prompt anterior que salvei e, com um clique, copiar isso para a minha \u00e1rea de transfer\u00eancia para que eu possa colar no Chatbot.<\/code><\/pre>\n\n\n\n2. Arquivos Criados<\/h4>\n\n\n\n
Com esse prompt o Claude 3.5 Sonnet vai produzir os arquivos necess\u00e1rio para a cria\u00e7\u00e3o da extens\u00e3o. Caso ele n\u00e3o crie todos os arquivo abaixo, pe\u00e7a para ele criar todos os arquivos necess\u00e1rios.<\/p>\n\n\n\n
Certifique-se de obter os seguintes arquivos:<\/p>\n\n\n\n
\nmanifest.json<\/code><\/li>\n\n\n\npopup.html<\/code><\/li>\n\n\n\npopup.js<\/code><\/li>\n\n\n\nstyle.css<\/code><\/li>\n<\/ul>\n\n\n\nEstes arquivos s\u00e3o essenciais para o funcionamento da extens\u00e3o.<\/p>\n\n\n\n
2. Cria\u00e7\u00e3o do \u00cdcone<\/h4>\n\n\n\n
Vamos precisar tamb\u00e9m de um \u00edcone para a nossa extens\u00e3o. Para isso:<\/p>\n\n\n\n
\n- Crie um \u00edcone adequado com ferramenta de design, por exemplo, usando o Canva.<\/li>\n<\/ol>\n\n\n\n
\n- Tamanho recomendado: 128×128 pixels.<\/li>\n<\/ul>\n\n\n\n
\n- Salve o \u00edcone na mesma pasta da seguinte forma:
icon.png<\/code>.<\/li>\n<\/ol>\n\n\n\n3. Cria\u00e7\u00e3o do Diret\u00f3rio<\/h4>\n\n\n\n
Crie uma nova pasta em seu computador onde voc\u00ea salvar\u00e1 todos os arquivos gerados pelo Sonnet e o icone.png que voc\u00ea criou.<\/p>\n\n\n\n
4. Ativa\u00e7\u00e3o do Modo Desenvolvedor no Chrome<\/h4>\n\n\n\n\n- Abra o navegador Chrome.<\/li>\n\n\n\n
- Acesse a parte de extens\u00f5es:
chrome:\/\/extensions\/<\/code>.<\/li>\n\n\n\n- Ative o “Modo do desenvolvedor” no canto superior direito da p\u00e1gina.<\/li>\n<\/ol>\n\n\n\n
5. Upload da Extens\u00e3o<\/h4>\n\n\n\n\n- Clique em “Carregar sem compacta\u00e7\u00e3o” (Load unpacked).<\/li>\n\n\n\n
- Selecione a pasta onde voc\u00ea salvou os arquivos gerados.<\/li>\n<\/ol>\n\n\n\n
6. Teste da Extens\u00e3o<\/h4>\n\n\n\n
Pronto! Agora, voc\u00ea acaba de criar em parceria com o seu companheiro de futuro grandes neg\u00f3cios, o Claude 3.5 Sonnet, uma extens\u00e3o para o Google Chrome!<\/p>\n\n\n\n
Agora, vamos test\u00e1-la.<\/p>\n\n\n\n
Ap\u00f3s carregar a extens\u00e3o com sucesso, voc\u00ea pode test\u00e1-la para validar se est\u00e1 funcionando corretamente.<\/p>\n\n\n\n
Resultados<\/h4>\n\n\n\n
Se tudo estiver correto, voc\u00ea ter\u00e1 criado uma extens\u00e3o do Chrome funcional em aproximadamente 15 minutos. Esta extens\u00e3o permitir\u00e1 que voc\u00ea salve e reutilize prompts facilmente, abrindo possibilidades incr\u00edveis, especialmente para quem n\u00e3o tem experi\u00eancia em codifica\u00e7\u00e3o.<\/p>\n\n\n\n
Conclus\u00e3o<\/h3>\n\n\n\n
Claude Sonnet 3.5 mostrou-se altamente eficaz para criar rapidamente uma extens\u00e3o do Chrome, mesmo para usu\u00e1rios sem experi\u00eancia em codifica\u00e7\u00e3o. Teste a ferramenta e explore suas funcionalidades para maximizar seu potencial criativo.<\/p>\n\n\n\n
\n\n\n\nC\u00f3digos Criados Nesse Exemplo<\/h4>\n\n\n\n
manifest.json<\/strong>:<\/p>\n\n\n\n{\n \"manifest_version\": 3,\n \"name\": \"Salvador de Prompts\",\n \"version\": \"1.0\",\n \"description\": \"Salva e copia prompts frequentemente usados\",\n \"action\": {\n \"default_popup\": \"popup.html\",\n \"default_icon\": \"icon.png\"\n },\n \"permissions\": [\"storage\", \"clipboardWrite\"]\n}<\/code><\/pre>\n\n\n\npopup.html<\/strong>:<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n\n<head>\n <title>Salvador de Prompts<\/title>\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\">\n<\/head>\n\n<body>\n <textarea id=\"promptInput\" placeholder=\"Digite seu prompt aqui\"><\/textarea>\n <button id=\"savePrompt\">Salvar Prompt<\/button>\n <div id=\"savedPrompts\"><\/div>\n <script src=\"popup.js\"><\/script>\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\npopup.js<\/strong>:<\/p>\n\n\n\ndocument.addEventListener('DOMContentLoaded', function() {\n const promptInput = document.getElementById('promptInput');\n const saveButton = document.getElementById('savePrompt');\n const savedPromptsDiv = document.getElementById('savedPrompts');\n\n \/\/ Carregar prompts salvos\n chrome.storage.sync.get(['prompts'], function(result) {\n const prompts = result.prompts || [];\n displayPrompts(prompts);\n });\n\n \/\/ Salvar novo prompt\n saveButton.addEventListener('click', function() {\n const newPrompt = promptInput.value.trim();\n if (newPrompt) {\n chrome.storage.sync.get(['prompts'], function(result) {\n const prompts = result.prompts || [];\n prompts.push(newPrompt);\n chrome.storage.sync.set({prompts: prompts}, function() {\n displayPrompts(prompts);\n promptInput.value = '';\n });\n });\n }\n });\n\n \/\/ Exibir prompts salvos\nfunction displayPrompts(prompts) {\n savedPromptsDiv.innerHTML = '';\n prompts.forEach(function(prompt, index) {\n const promptElement = document.createElement('div');\n promptElement.textContent = prompt;\n promptElement.className = 'prompt-item';\n promptElement.addEventListener('click', function() {\n navigator.clipboard.writeText(prompt).then(function() {\n promptElement.classList.add('copied');\n setTimeout(function() {\n promptElement.classList.remove('copied');\n }, 200);\n });\n });\n savedPromptsDiv.appendChild(promptElement);\n });\n}\n});<\/code><\/pre>\n\n\n\nstyle.css<\/strong>:<\/p>\n\n\n\nbody {\n width: 300px;\n padding: 10px;\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n}\n\ntextarea {\n width: 100%;\n height: 100px;\n padding: 5px;\n margin-bottom: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n resize: vertical;\n}\n\nbutton {\n width: 100%;\n padding: 10px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #45a049;\n}\n\n#savedPrompts {\n margin-top: 20px;\n}\n\n.prompt-item {\n background-color: white;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 10px;\n margin-bottom: 10px;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.prompt-item:hover {\n background-color: #e6f3ff;\n}\n\n.copied {\n background-color: #e6ffe6 !important;\n}<\/code><\/pre>\n\n\n\nCom este tutorial, voc\u00ea estar\u00e1 pronto para criar e testar sua pr\u00f3pria extens\u00e3o personalizada para o navegador Chrome. Boa sorte!<\/p>\n\n\n\n
\n\n\n\nPesquisa, Curadoria, Edi\u00e7\u00e3o, formata\u00e7\u00e3o e finaliza\u00e7\u00e3o:<\/em>
Werney Lima, julho 01, 2024 (Segunda-feira) – 09:06 hrs.<\/em>
<\/p>\n","protected":false},"excerpt":{"rendered":"Com uma “ajudinha” do Claude 3.5 Sonnet qualquer pessoa agora pode criar a sua pr\u00f3pria extens\u00e3o do Google Chrome! Ent\u00e3o, vamos come\u00e7ar a criar a nossa extens\u00e3o do Chrome. Objetivo Criar uma extens\u00e3o personalizada para o navegador Chrome que permita salvar prompts utilizados com frequ\u00eancia. Ferramenta Utilizada Claude 3.5 Sonnet, uma ferramenta de IA com […]<\/p>\n","protected":false},"author":1,"featured_media":1074,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,53],"tags":[8,237,238,9,10],"class_list":["post-1073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-how-to","tag-ai","tag-claude-3-5-sonnet","tag-google-chrome-extensao","tag-ia","tag-inteligencia-artificial"],"blocksy_meta":[],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/posts\/1073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=1073"}],"version-history":[{"count":2,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/posts\/1073\/revisions"}],"predecessor-version":[{"id":1077,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/posts\/1073\/revisions\/1077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/media\/1074"}],"wp:attachment":[{"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=1073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=1073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=1073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}