.svg)
웹페이지 요약 및 저장을 위한 Chrome 확장 프로그램을 만드는 방법
소개
웹페이지를 요약하고 저장하는 Chrome 확장 프로그램을 만드는 방법에 대한 오늘의 튜토리얼에 오신 것을 환영합니다. 이 강력한 도구를 사용하면 문서와 웹페이지에 대한 간결한 요약을 만들어 지식창고에 저장하여 쉽게 참조할 수 있습니다.
필요한 것
환경 설정
1단계: 매니페스트 파일 생성
먼저 manifest.json 파일을 열어야 합니다. 이 파일에는 Chrome 확장 프로그램이 작동하는 데 필요한 메타데이터가 포함되어 있습니다.
{
"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"
}
}
2단계: 옵션 및 배경 파일 만들기
추가 options.html 파일과 해당 JavaScript 파일입니다, options.js를 사용하여 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>
In background.js를 클릭하고 컨텍스트 메뉴를 설정하고 작업을 처리합니다.
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"]
});
});
팝업 만들기
다음으로 다음을 만듭니다. popup.html 및 popup.js 을 클릭해 팝업 창 내에서 상호작용을 관리합니다.
<!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
}
});
3단계: 후기 노드 및 API
후기 노드를 사용하여 백엔드를 설정합니다. 웹훅 및 API 키 유효성 검사를 처리하고, 콘텐츠 요약에 Staco 또는 OpenAI를 호출해야 합니다.
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 });
}
});
마크업 이동을 사용하여 URL을 이미지로 변환하고 마크다운을 PDF로 변환하여 Google 드라이브와 Notion에 저장하세요.
배포 및 테스트
압축을 푼 확장 프로그램을 Chrome의 개발자 모드에서 로드합니다. 각 기능을 테스트하여 확장 프로그램이 예상대로 콘텐츠를 요약하고 저장하는지 확인합니다. 문제를 해결하고 속도와 안정성을 최적화하세요.
결론
웹페이지 요약 및 저장을 위한 Chrome 확장 프로그램을 구축하면 워크플로우를 크게 간소화할 수 있습니다. 후기 노드, 스타코, 마크업 고와 같은 도구를 사용하면 강력한 기능을 더욱 간편하게 통합할 수 있습니다.
이 튜토리얼이 도움이 되었다면 동영상을 구독하고 좋아요를 눌러주세요. 아래 댓글에 제안이나 질문이 있으면 남겨 주세요.
.svg){kind=icon}
