`;
document.body.appendChild(panel);
// ================= 逻辑 =================
// Tab
panel.querySelectorAll('.cf-tab').forEach(t => {
t.onclick = function () {
panel.querySelectorAll('.cf-tab').forEach(x => x.classList.remove('active'));
panel.querySelectorAll('.cf-section').forEach(x => x.classList.remove('active'));
this.classList.add('active');
document.getElementById(`tab-${this.dataset.tab}`).classList.add('active');
};
});
const savedToken = GM_getValue('cf_api_token', '');
if (savedToken) document.getElementById('cf-api-token').value = savedToken;
document.getElementById('cf-api-token').onchange = function () { GM_setValue('cf_api_token', this.value.trim()); };
btn.onclick = () => { panel.style.display = panel.style.display === 'block' ? 'none' : 'block'; detectContext(); };
document.getElementById('cf-close').onclick = () => panel.style.display = 'none';
function getHeaders() {
const t = document.getElementById('cf-api-token').value;
if (!t) { showToast("请先填写 API Token", "error"); return null; }
return { "Authorization": "Bearer " + t, "Content-Type": "application/json" };
}
// 上下文感知
let currentAccountId = '';
function detectContext() {
const url = window.location.href;
const parts = url.split('/');
// Account ID
const dashIdx = parts.indexOf('dash.cloudflare.com');
if (dashIdx > -1) {
currentAccountId = parts[dashIdx + 1];
}
// Pages Info
if (url.includes('pages')) {
const viewIdx = parts.indexOf('view');
if (viewIdx > -1 && parts[viewIdx + 1]) {
const projName = parts[viewIdx + 1];
// 排除一些关键字
if (projName !== 'settings' && projName !== 'deployments' && currentAccountId) {
const infoText = `${currentAccountId} / ${projName}`;
document.getElementById('cf-pages-info').value = infoText;
document.getElementById('cf-env-info').value = infoText;
window.cfCurrentPage = { accId: currentAccountId, projName };
}
}
}
}
// 绑定刷新按钮事件
document.getElementById('btn-pages-refresh').onclick = () => {
detectContext();
const info = window.cfCurrentPage;
if (info) {
showToast(`已更新项目信息: ${info.projName}`, 'success');
} else {
showToast('未检测到项目信息，请确保在 Pages 详情页', 'warn');
}
};
document.getElementById('btn-env-refresh').onclick = document.getElementById('btn-pages-refresh').onclick;
// 监听 URL 变化自动刷新 (适用于 SPA 页面切换)
let lastUrl = window.location.href;
new MutationObserver(() => {
const url = window.location.href;
if (url !== lastUrl) {
lastUrl = url;
detectContext();
}
}).observe(document, {subtree: true, childList: true});
// ================= R2 功能区 =================
let r2Cursor = null;
// 自动检测 R2 域名 (r2.dev 或 custom)
async function detectR2Domain(bucketName) {
const h = getHeaders();
if (!h) return;
try {
// 1. 尝试获取 Custom Domains
const res = await gmFetch('GET', `https://api.cloudflare.com/client/v4/accounts/${currentAccountId}/r2/buckets/${bucketName}/domains`, h);
if (res.ok && res.data.result && res.data.result.domains && res.data.result.domains.length > 0) {
const d = res.data.result.domains[0];
return `https://${d.domain}`;
}
// 2. 尝试推测 r2.dev (API 通常不直接返回这个，但如果有开启 public access，格式通常固定)
// 注：Cloudflare API 实际上很难直接获取 r2.dev 的子域名 hash，除非列出 usage 或其他 hack。
// 这里我们尝试从 Bucket 属性中找，或者提示用户。
// 暂时只支持 Custom Domain 的自动获取。
return null;
} catch (e) {
console.error(e);
return null;
}
}
// 绑定检测按钮
document.getElementById('btn-r2-detect-domain').onclick = async () => {
const bucket = document.getElementById('cf-r2-buckets').value;
if (!bucket || bucket === '请加载...') return showToast("请先选择 Bucket", "warn");
const btn = document.getElementById('btn-r2-detect-domain');
btn.textContent = "检测中...";
const domain = await detectR2Domain(bucket);
if (domain) {
document.getElementById('cf-r2-domain').value = domain;
GM_setValue('cf_r2_domain', domain); // 保存
showToast(`已获取域名: ${domain}`, "success");
} else {
showToast("未检测到绑定域名，请手动输入", "info");
}
btn.textContent = "🔍 检测";
};
// 1. 加载 Buckets
document.getElementById('btn-r2-load-buckets').onclick = async function () {
const h = getHeaders(); if (!h) return;
if (!currentAccountId) {
showConfirm('输入 Account ID', '请输入您的 Account ID (可在 URL 中找到)', () => { });
return;
}
const logEl = document.getElementById('log-r2');
log(logEl, "加载 Buckets...", "info");
try {
const res = await gmFetch('GET', `https://api.cloudflare.com/client/v4/accounts/${currentAccountId}/r2/buckets`, h);
if (!res.ok) throw new Error("加载失败: " + res.status);
const buckets = res.data.result.buckets || res.data.result;
const sel = document.getElementById('cf-r2-buckets');
sel.innerHTML = "";
buckets.forEach(b => {
const opt = document.createElement('option');
opt.value = b.name;
opt.textContent = `${b.name}`;
sel.appendChild(opt);
});
log(logEl, `发现 ${buckets.length} 个 Bucket`, "success");
// 自动选中第一个并尝试检测域名
if(buckets.length > 0) {
// 延时一下体验更好
setTimeout(() => document.getElementById('btn-r2-detect-domain').click(), 500);
}
} catch (e) { log(logEl, e.message, "error"); }
};
// 2. 加载文件列表
document.getElementById('btn-r2-load-files').onclick = () => loadR2Files(false);
document.getElementById('btn-r2-more').onclick = () => loadR2Files(true);
async function loadR2Files(append) {
const h = getHeaders(); if (!h) return;
const bucket = document.getElementById('cf-r2-buckets').value;
if (!bucket || bucket === '请加载...') return showToast("请先加载并选择 Bucket", "warn");
const logEl = document.getElementById('log-r2');
const listEl = document.getElementById('cf-r2-list');
const btnMore = document.getElementById('btn-r2-more');
if (!append) {
listEl.innerHTML = "加载中...";
r2Cursor = null;
document.getElementById('cf-r2-select-all').checked = false;
} else {
btnMore.textContent = "加载中...";
}
try {
let url = `https://api.cloudflare.com/client/v4/accounts/${currentAccountId}/r2/buckets/${bucket}/objects?per_page=50`;
if (r2Cursor) url += `&cursor=${r2Cursor}`;
const res = await gmFetch('GET', url, h);
if (!res.ok) throw new Error("API Error");
const objects = res.data.result.objects || res.data.result;
r2Cursor = res.data.result_info?.cursor;
if (!append) listEl.innerHTML = "";
if (!objects.length && !append) {
listEl.innerHTML = `