Chrome Extension Auto Summarize Articles: A Developer Guide

Building a Chrome extension to automatically summarize articles is a practical project that combines browser extension development with text processing. This guide walks you through creating an extension that extracts and condenses article content, perfect for developers looking to enhance productivity or power users wanting to consume content faster.

How Chrome Extension Auto Summarize Works

Chrome extensions that summarize articles typically work in three stages: content extraction, text processing, and display. The extension injects a content script into web pages, identifies the main article body, applies summarization algorithms, and presents the results to the user.

Modern summarization approaches range from simple extractive methods (selecting key sentences) to more sophisticated abstractive techniques (generating new text). For browser extensions, extractive summarization offers better performance and reliability since it doesn’t require external API calls or machine learning models.

Setting Up Your Extension Project

Create a new directory for your extension with the following structure:

auto-summarize/
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
└── styles.css

The manifest.json defines your extension’s permissions and entry points:

{
  "manifest_version": 3,
  "name": "Auto Article Summarizer",
  "version": "1.0",
  "description": "Automatically summarize articles with one click",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

Extracting Article Content

The content script runs on every page load and identifies the main article content. Use the content.js file to extract text from common article selectors:

// content.js
function extractArticleContent() {
  const selectors = [
    'article',
    '[role="article"]',
    '.post-content',
    '.article-body',
    '.entry-content',
    'main'
  ];
  
  for (const selector of selectors) {
    const element = document.querySelector(selector);
    if (element && element.innerText.length > 500) {
      return {
        title: document.title,
        content: element.innerText,
        url: window.location.href
      };
    }
  }
  
  // Fallback: return body text
  return {
    title: document.title,
    content: document.body.innerText,
    url: window.location.href
  };
}

// Listen for messages from popup or background
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'extract') {
    const articleData = extractArticleContent();
    sendResponse(articleData);
  }
});

This extraction method prioritizes semantic HTML elements while providing a fallback for pages without standard article markup.

Implementing the Summarization Algorithm

For a client-side solution, implement a simple extractive summarizer using sentence scoring. This approach ranks sentences by their importance based on word frequency:

// summarizer.js
function summarizeText(text, maxSentences = 5) {
  // Split into sentences
  const sentences = text
    .split(/[.!?]+/)
    .map(s => s.trim())
    .filter(s => s.length > 20);
  
  if (sentences.length <= maxSentences) {
    return sentences.join('. ');
  }
  
  // Calculate word frequencies
  const words = text.toLowerCase().match(/\b\w+\b/g) || [];
  const stopWords = new Set([
    'the', 'a', 'an', 'and', 'or', 'but', 'in', 'on', 'at',
    'to', 'for', 'of', 'with', 'by', 'is', 'are', 'was', 'were'
  ]);
  
  const wordFreq = {};
  words.forEach(word => {
    if (!stopWords.has(word)) {
      wordFreq[word] = (wordFreq[word] || 0) + 1;
    }
  });
  
  // Score each sentence
  const scoredSentences = sentences.map(sentence => {
    const sentenceWords = sentence.toLowerCase().match(/\b\w+\b/g) || [];
    const score = sentenceWords.reduce((sum, word) => {
      return sum + (wordFreq[word] || 0);
    }, 0);
    return { sentence, score };
  });
  
  // Return top sentences in original order
  const topSentences = scoredSentences
    .sort((a, b) => b.score - a.score)
    .slice(0, maxSentences)
    .sort((a, b) => sentences.indexOf(a.sentence) - sentences.indexOf(b.sentence));
  
  return topSentences.map(s => s.sentence).join('. ');
}

This algorithm runs entirely in the browser without external dependencies, making it fast and privacy-friendly.

The popup.html provides a user interface for triggering summarization:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h2>Article Summary</h2>
    <button id="summarizeBtn">Summarize This Page</button>
    <div id="result" class="result"></div>
  </div>
  <script src="popup.js"></script>
</body>
</html>

The popup.js handles the communication between the popup and content script:

// popup.js
document.getElementById('summarizeBtn').addEventListener('click', async () => {
  const resultDiv = document.getElementById('result');
  resultDiv.innerHTML = 'Generating summary...';
  
  // Get the active tab
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  // Execute content script to extract article
  const results = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: extractArticleContent
  });
  
  const articleData = results[0].result;
  
  // Import and run summarizer
  const summary = summarizeText(articleData.content, 5);
  
  resultDiv.innerHTML = `
    <h3>${articleData.title}</h3>
    <p>${summary}</p>
    <a href="${articleData.url}" target="_blank">Read original</a>
  `;
});

// Include the summarizer function inline for executeScript
function summarizeText(text, maxSentences = 5) {
  // Same implementation as above
}

Extension Features for Power Users

Beyond basic summarization, consider adding these features:

Keyboard Shortcuts: Add commands to your manifest for quick access:

"commands": {
  "summarize-page": {
    "suggested_key": "Ctrl+Shift+S",
    "description": "Summarize the current page"
  }
}

Summary Length Control: Allow users to choose between brief (3 sentences), standard (5 sentences), and detailed (10 sentences) summaries.

Reading Time Estimation: Calculate and display estimated reading time for both the summary and original article.

Copy to Clipboard: Add functionality to copy summaries for use in notes or sharing.

Testing Your Extension

Load your extension in Chrome by navigating to chrome://extensions/, enabling Developer mode, and clicking “Load unpacked”. Select your extension directory. Test on various websites to ensure content extraction works across different page layouts.

For automated testing, use Puppeteer to simulate page loads and verify extraction:

const puppeteer = require('puppeteer');

async function testExtension() {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.goto('https://example.com/article');
  await page.click('#summarizeBtn');
  
  const result = await page.$eval('#result', el => el.innerText);
  console.log('Summary generated:', result.length, 'characters');
  
  await browser.close();
}

Performance Considerations

Content script injection can impact page load time. Optimize by:

Using run_at: "document_idle" in your manifest to delay injection
Implementing lazy loading for heavy features
Caching extracted content for revisited pages
Using Chrome’s storage API to save summaries locally

Existing TLDR and Summary Extensions

If you prefer ready-made solutions, several Chrome extensions offer robust summarization:

TLDR This — One-click summaries with multiple length options and distraction-free reading mode
Mercury Reader and Clearly Reader — Clean typography with built-in summarization
Sumi — AI-powered context-aware summaries
Recall — Summarizes and saves to a personal knowledge base
Glarity — Summaries with citation support

When evaluating these tools, consider accuracy with technical terminology, processing speed, privacy (where your data goes), customization options, and integration with your existing workflow.

Practical Example: Summarizing API Documentation

Instead of reading 30 pages of API docs, a summarization workflow can streamline evaluation:

Navigate to the API documentation landing page
Click the summarize button for a high-level overview
Identify endpoints relevant to your needs
Read detailed docs only for those specific endpoints

This approach reduces documentation review time significantly while ensuring you don’t miss critical information.

Conclusion

Building a Chrome extension for automatic article summarization demonstrates how browser extensions can enhance content consumption. The extractive approach described here provides fast, reliable summaries without external dependencies or API costs. Developers can extend this foundation with more sophisticated algorithms, machine learning models, or integration with external summarization services.

For production use, consider adding error handling, loading states, and user preferences to create a polished experience. The complete code provides a working starting point for developers interested in browser extension development and text processing.

Built by theluckystrike — More at zovo.one