Como criar uma extensão do Chrome para resumir e salvar páginas da Web
Introdução
Bem-vindo ao tutorial de hoje sobre como criar uma extensão do Chrome que resume e salva páginas da Web. Essa poderosa ferramenta pode ajudar você a criar resumos concisos de artigos e páginas da Web, armazenando-os em uma base de conhecimento para facilitar a consulta.
O que você precisará
Configurando seu ambiente
Etapa 1: Criar arquivo de manifesto
Comece criando um arquivo manifesto.json arquivo. Esse arquivo contém os metadados necessários para que a extensão do Chrome funcione.
{
"version": "1.0",
"name": "Web Summarizer",
"description": "Summarize and save web pages",
"permissions": ["activeTab", "scripting", "storage"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": "images/icon.png"
}
}
Etapa 2: Criar opções e arquivos de plano de fundo
Adicionar um options.html e o arquivo JavaScript correspondente, opções.jspara manipular as configurações dos pontos de extremidade e chaves da API.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<script defer src="options.js"></script>
</head>
<body>
<div>
<label for="api-endpoint">API Endpoint:</label>
<input type="text" id="api-endpoint" name="api-endpoint" class="border">
<label for="api-key">API Key:</label>
<input type="text" id="api-key" name="api-key" class="border">
<button id="save">Save</button>
<span id="status"></span>
</div>
</body>
</html>
Em background.jsVocê pode configurar menus de contexto e manipular ações.
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "summarizePage",
title: "Summarize Page",
contexts: ["page"]
});
chrome.contextMenus.create({
id: "summarizeSave",
title: "Summarize and Save",
contexts: ["page"]
});
chrome.contextMenus.create({
id: "openOptions",
title: "Open Options",
contexts: ["browser_action"]
});
});
Criando o pop-up
Em seguida, crie popup.html e popup.js para gerenciar as interações dentro da janela pop-up.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<script defer src="popup.js"></script>
</head>
<body>
<div>
<button id="summarize-page">Summarize Page</button>
<button id="summarize-save">Summarize and Save</button>
</div>
</body>
</html>document.addEventListener('DOMContentLoaded', function () {
let summarizeButton = document.getElementById('summarize-page');
let saveButton = document.getElementById('summarize-save');
summarizeButton.addEventListener('click', summarizePage);
saveButton.addEventListener('click', summarizeAndSave);
function summarizePage() {
// Logic to summarize page
}
function summarizeAndSave() {
// Logic to summarize and save
}
});
Etapa 3: Nó tardio e APIs
Configure seu backend usando o Late Node. Certifique-se de que você lida com os webhooks e a validação da chave da API, chamando o Staco ou o OpenAI para resumir o conteúdo.
lateNode.createWebhook({
path: '/api/summary',
handler: async (req, res) => {
const { action, content, apiKey } = req.body;
let summary = await getSummary(content, apiKey);
return res.status(200).json({ message: summary });
}
});
Use o Markup Go para converter URLs em imagens e markdown em PDFs, salvando-os no Google Drive e no Notion.
Implementar e testar
Carregue sua extensão descompactada no modo de desenvolvedor do Chrome. Teste cada recurso para garantir que sua extensão resuma e salve o conteúdo conforme o esperado. Solucione os problemas e otimize a velocidade e a confiabilidade.
Conclusão
A criação de uma extensão do Chrome para resumir e salvar páginas da Web pode otimizar significativamente seu fluxo de trabalho. Com ferramentas como Late Node, Staco e Markup Go, a integração de uma funcionalidade robusta se torna mais simples.
Se você achou este tutorial útil, não deixe de se inscrever e curtir o vídeo. Deixe sugestões ou perguntas nos comentários abaixo.
.svg){kind=icon}
