Nginx Autoindex 智能美化 + 搜索

自动识别 Nginx autoindex 页面并格式化显示完整文件名与下载链接，支持模糊搜索
目前為 2025-06-11 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         Nginx Autoindex 智能美化 + 搜索
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  自动识别 Nginx autoindex 页面并格式化显示完整文件名与下载链接，支持模糊搜索
// @author       凡雲
// @match        http://*/*
// @match        https://*/*
// @license      MIT
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  const h1 = document.querySelector('body > h1');
  const pre = document.querySelector('pre');
  if (!h1 || !pre) return;

  const isNginxIndexPage = h1.textContent.trim().startsWith('Index of /');
  if (!isNginxIndexPage) return;

  const links = [...pre.querySelectorAll('a')];
  const files = links.filter(a => !a.getAttribute('href').endsWith('/../'));

  // 搜索框
  const searchBox = document.createElement('input');
  searchBox.type = 'text';
  searchBox.placeholder = '搜索文件名...';
  searchBox.style.width = '300px';
  searchBox.style.margin = '10px 0';
  searchBox.style.padding = '6px';
  searchBox.style.fontSize = '16px';
  searchBox.style.border = '1px solid #ccc';
  searchBox.style.borderRadius = '6px';
  document.body.insertBefore(searchBox, pre);

  // 表格
  const table = document.createElement('table');
  table.style.width = '100%';
  table.style.borderCollapse = 'collapse';
  table.innerHTML = `
    <thead>
      <tr>
        <th style="text-align: left; padding: 8px; border-bottom: 2px solid #ccc;">文件名</th>
        <th style="text-align: left; padding: 8px; border-bottom: 2px solid #ccc;">下载</th>
      </tr>
    </thead>
    <tbody></tbody>
  `;

  const tbody = table.querySelector('tbody');

  function renderTable(filter = '') {
    tbody.innerHTML = '';
    files.forEach(link => {
      const href = link.getAttribute('href');
      const fullName = decodeURIComponent(href);
      if (!fullName.toLowerCase().includes(filter.toLowerCase())) return;

      const row = document.createElement('tr');
      row.innerHTML = `
        <td style="padding: 6px; border-bottom: 1px solid #eee; font-family: monospace;">${fullName}</td>
        <td style="padding: 6px; border-bottom: 1px solid #eee;">
          <a href="${href}" download>下载</a>
        </td>
      `;
      tbody.appendChild(row);
    });
  }

  // 监听搜索输入
  searchBox.addEventListener('input', () => {
    renderTable(searchBox.value);
  });

  pre.replaceWith(table);
  renderTable();
  document.title = '文件下载列表';
})();