How to Build a Chrome Extension for Summarizing and Saving Web Pages
Introduction
Welcome to today's tutorial on building a Chrome extension that summarizes and saves web pages. This powerful tool can help you create concise summaries of articles and webpages, storing them in a knowledge base for easy reference.
What You Will Need
Setting Up Your Environment
Step 1: Create Manifest File
Begin by creating a manifest.json file. This file contains the metadata necessary for the Chrome extension to function.
{
"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"
}
}
Step 2: Create Options and Background Files
Add an options.html file and its corresponding JavaScript file, options.js, to handle settings for API endpoints and keys.
<!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, set up context menus and handle actions.
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"]
});
});
Creating the Popup
Next, create popup.html and popup.js to manage the interactions within the popup window.
<!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
}
});
Step 3: Late Node and APIs
Set up your backend using Late Node. Ensure that you handle the webhooks and API key validation, calling Staco or OpenAI for summarizing content.
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 Markup Go to convert URLs to images and markdown to PDFs, saving these to Google Drive and Notion.
Deploy and Test
Load your unpacked extension in Chrome's developer mode. Test each feature to ensure that your extension summarizes and saves content as expected. Troubleshoot any issues and optimize for speed and reliability.
Conclusion
Building a Chrome extension for summarizing and saving web pages can significantly streamline your workflow. With tools like Late Node, Staco, and Markup Go, integrating robust functionality becomes simpler.
If you found this tutorial helpful, be sure to subscribe and like the video. Leave any suggestions or questions in the comments below.
.svg){kind=icon}
