🧩 Enhancing Cloudflare R2 with a Custom Chrome Extension for Object Sorting

#extensions #javascript #cloudflare #webdev

Ever tried finding a specific file among hundreds in your Cloudflare R2 bucket? Yeah, me too. So I built a solution.

The Problem 🤔

Cloudflare R2's dashboard is great, but it's missing one crucial feature: sorting. When you have dozens or hundreds of files, you can't:

Find your largest files to optimize storage costs
Locate recently uploaded files
Sort alphabetically for better organization

You're stuck scrolling through an unsorted mess.

My Solution ✨

Meet the Cloudflare R2 Bucket Sorter - a Chrome extension that adds sorting directly to your R2 dashboard.

What it does:

🗂️ Sort by file size, modified date, or filename

📊 Shows total item count and combined file size

💾 Remembers your preferences

⚡ Works instantly with existing dashboard

How It Works 🔧

Instead of fighting with Cloudflare's API, I took a simpler approach: DOM manipulation. The extension:

Detects when you're on an R2 bucket page
Injects a floating control panel
Sorts the existing table rows in real-time

Here's the core sorting logic:

function sortTableRowsWithDOM(sortBy, order) {
  const table = document.querySelector('div[role="table"]');
  let rows = Array.from(table.querySelectorAll('div[role="row"]'))
    .filter(row => row.querySelector('[data-testid*="object"]'));

  rows.sort((rowA, rowB) => compareTableRows(rowA, rowB, sortBy, order));

  // Efficiently reorder DOM elements
  const fragment = document.createDocumentFragment();
  rows.forEach(row => fragment.appendChild(row));
  table.appendChild(fragment);
}

The trickiest part was parsing file sizes like "1.5 MB" into bytes for accurate comparison:

function parseSizeToBytes(sizeText) {
  const match = sizeText.match(/(\d+(?:\.\d+)?)\s*(B|KB|MB|GB|TB)/i);
  const value = parseFloat(match[1]);
  const multipliers = { B: 1, KB: 1024, MB: 1024**2, GB: 1024**3, TB: 1024**4 };
  return value * (multipliers[match[2].toUpperCase()] || 1);
}

Key Challenges 💡

Dynamic Content: Cloudflare's SPA loads content dynamically, so I used MutationObserver to detect page changes.

Reliable Selectors: Cloudflare uses data-testid attributes, which could change. I built fallback selectors to handle different table structures.

Performance: Sorting hundreds of DOM elements efficiently using DocumentFragment for batch updates.