求支持自定义文件名的Chrome纯HTML页面下载扩展

Custom Chrome Extension (Tailored to Your Needs) #

Building a lightweight custom extension gives you full control over HTML extraction and filename logic, eliminating manual save steps and supporting sequential naming for multiple URLs.

Step 1: Extension Files #

Create a new folder for the extension, then add these 3 files:

1. manifest.json (Extension Configuration)

{
  "manifest_version": 3,
  "name": "Pure HTML Downloader",
  "version": "1.0",
  "description": "Downloads current page's pure HTML with custom/sequential filenames",
  "permissions": ["activeTab", "downloads", "storage"],
  "action": {
    "default_popup": "popup.html"
  }
}

(You can add simple icon files to the folder and reference them here for a polished look, but it’s optional for testing.)

2. popup.html (User Interface)

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 250px; padding: 15px; font-family: Arial, sans-serif; }
    .input-group { margin-bottom: 12px; }
    label { display: block; margin-bottom: 4px; font-size: 14px; }
    input[type="text"] { width: 100%; padding: 6px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 3px; }
    button { width: 100%; padding: 8px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
    button:hover { background: #0056b3; }
  </style>
</head>
<body>
  <div class="input-group">
    <label for="filename">Custom Filename (leave blank for sequential):</label>
    <input type="text" id="filename" placeholder="e.g., product-page.html">
  </div>
  <div class="input-group">
    <label>
      <input type="checkbox" id="sequential" checked>
      Use sequential naming (file1.html, file2.html) if no custom name
    </label>
  </div>
  <button id="downloadBtn">Download Pure HTML</button>
  <script src="popup.js"></script>
</body>
</html>

3. popup.js (Core Logic)

document.getElementById('downloadBtn').addEventListener('click', async () => {
  // Fetch current active tab
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  // Extract pure HTML from the page
  const result = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => document.documentElement.outerHTML
  });
  
  const pureHtml = result[0].result;
  const filenameInput = document.getElementById('filename').value.trim();
  const useSequential = document.getElementById('sequential').checked;
  
  let filename;
  
  if (filenameInput) {
    // Apply custom filename, ensure .html extension
    filename = filenameInput.endsWith('.html') ? filenameInput : `${filenameInput}.html`;
  } else if (useSequential) {
    // Get and update sequential counter from storage
    const storage = await chrome.storage.local.get('fileCounter');
    const counter = storage.fileCounter || 1;
    filename = `file${counter}.html`;
    await chrome.storage.local.set({ fileCounter: counter + 1 });
  } else {
    // Fallback to sanitized tab title
    filename = `${tab.title.replace(/[<>:"/\\|?*]/g, '')}.html`;
  }
  
  // Create blob and trigger download
  const blob = new Blob([pureHtml], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  
  chrome.downloads.download({
    url: url,
    filename: filename,
    saveAs: false // Skip manual save dialog
  });
  
  // Clean up temporary URL
  setTimeout(() => URL.revokeObjectURL(url), 1000);
});

Step 2: Install the Extension in Chrome #

1. Open Chrome and go to chrome://extensions/
2. Toggle "Developer mode" on (top-right corner)
3. Click "Load unpacked" and select your extension folder
4. The extension icon will appear in Chrome’s toolbar

Key Features #

• Pure HTML Extraction: Grabs the full document HTML without embedding external resources (CSS, images, etc.)
• Custom Filenames: Enter any name you want, with automatic .html extension handling
• Sequential Naming: Automatically uses file1.html, file2.html, etc., for repeated downloads across URLs
• One-Click Operation: Skips manual "Save As" prompts for fast, consistent downloads

Alternative: Tweak Existing Extensions #

If you don’t want to build your own, search Chrome Web Store for extensions labeled "HTML Downloader" or "Save Page as HTML" and verify they support:

• Downloading only raw HTML (excluding resources)
• Custom filename templates
• Sequential numbering for multiple downloads
  (Note: Most generic extensions may lack the exact sequential naming feature, so the custom extension is more reliable for your use case.)

内容的提问来源于stack exchange，提问作者Aman Khanna