在角色主页面插入“图廊”；在上传图片页显示图廊画廊
// ==UserScript==
// @name BGM 角色图廊
// @namespace https://github.com/stay206
// @version 1.0
// @description 在角色主页面插入“图廊”；在上传图片页显示图廊画廊
// @match https://bgm.tv/character/*
// @match https://bangumi.tv/character/*
// @match https://chii.in/character/*
// @match https://bgm.tv/character/*/upload_img
// @match https://bangumi.tv/character/*/upload_img
// @match https://chii.in/character/*/upload_img
// @grant none
// @license MIT
// ==/UserScript==
;(async function() {
'use strict';
console.log('【BGM 图廊脚本】启动，路径：', location.pathname);
const path = location.pathname;
// —— 主页面：插入“图廊”Tab ——
const mainMatch = path.match(/^\/character\/(\d+)(?:\/?)$/);
if (mainMatch) {
const charId = mainMatch[1];
const nav = document.querySelector('ul.navTabs');
if (nav && !nav.querySelector(`a[href="/character/${charId}/upload_img"]`)) {
console.log('主页面：插入 图廊 Tab，角色ID=', charId);
const li = document.createElement('li');
const a = document.createElement('a');
a.href = `/character/${charId}/upload_img`;
a.textContent = '图廊';
a.classList.add('bve-processed');
if (path.endsWith('/upload_img')) a.classList.add('focus');
li.appendChild(a);
const relateLi = nav.querySelector('li.relate-button');
if (relateLi) relateLi.insertAdjacentElement('afterend', li);
else nav.appendChild(li);
}
}
// —— 上传页：渲染图廊 ——
const upMatch = path.match(/^\/character\/(\d+)\/upload_img/);
if (!upMatch) return;
const charId = upMatch[1];
console.log('上传页：渲染图廊，角色ID=', charId);
// 在左侧插入外壳
const container = document.getElementById('columnInSubjectA');
if (!container) {
console.error('上传页：未找到 columnInSubjectA');
return;
}
container.insertAdjacentHTML('afterbegin', `
<br>
<h2>已经提供的图片</h2>
<div class="clearit">
<ul class="photoList"></ul>
</div>`);
const listEl = container.querySelector('ul.photoList');
if (!listEl) {
console.error('上传页：未找到 photoList');
return;
}
// 角色主页面，解析封面
async function fetchCover() {
try {
const res = await fetch(`${location.origin}/character/${charId}`, {
credentials: 'include'
});
if (!res.ok) {
console.warn('fetchCover：HTTP', res.status);
return null;
}
const html = await res.text();
const doc = new DOMParser().parseFromString(html, 'text/html');
const src = doc.querySelector('div[align="center"] img.cover')?.src || null;
console.log('fetchCover：封面URL=', src);
return src;
} catch (e) {
console.error('fetchCover：出错', e);
return null;
}
}
const coverUrl = await fetchCover();
// 寻找条目肖像贡献者
let groupHref = '', groupName = '';
const allLi = Array.from(document.querySelectorAll('ul.groupsLine li'));
let entryLi = allLi.find(li =>
li.querySelector('span.comment.tip')?.textContent.trim() === '新肖像'
);
if (!entryLi) {
entryLi = allLi.find(li =>
li.querySelector('span.comment.tip')?.textContent.trim() === '新条目'
);
}
if (entryLi) {
const a = entryLi.querySelector('a.l.bve-processed');
if (a && a.href) {
groupHref = a.href;
groupName = a.textContent.trim();
}
}
console.log('贡献者解析：', { entryLi, groupHref, groupName });
// 插入条目本身图片
if (coverUrl) {
console.log('插入封面条目', coverUrl);
const li = document.createElement('li');
let html = `
<a href="${coverUrl}" class="grid thickbox bve-processed" target="_blank">
<img src="${coverUrl}" width="100" class="grid">`;
if (groupHref && groupName) {
console.log('包含贡献者信息');
html += `
<p>
<span class="tip_j">
by <a href="${groupHref}" class="l bve-processed" target="_blank">${groupName}</a>
</span>
</p>`;
}
html += `</a>`;
li.innerHTML = html;
listEl.insertAdjacentElement('afterbegin', li);
} else {
console.info('未获取到封面，跳过首项插入');
}
// 列出仓库图片
async function listFiles() {
console.log('listFiles：尝试 GitHub API');
try {
const apiUrl =
`https://api.github.com/repos/stay206/bangumi-character/contents/${charId}?ref=main`;
const res = await fetch(apiUrl, {
headers: { 'Accept': 'application/vnd.github.v3+json' }
});
if (res.ok) {
const js = await res.json();
if (Array.isArray(js)) {
const names = js
.filter(f => f.type === 'file' && /\.(?:jpe?g|png|gif)$/i.test(f.name))
.map(f => f.name);
console.log('listFiles：API 结果', names);
if (names.length) return names;
}
console.info('listFiles：API 无图片');
} else {
console.warn('listFiles：API 状态', res.status);
}
} catch (e) {
console.warn('listFiles：API 调用失败', e);
}
console.log('listFiles：回退 HTML 目录解析');
try {
const url = `https://github.com/stay206/bangumi-character/tree/main/${charId}`;
const res = await fetch(url);
if (res.ok) {
const txt = await res.text();
const re = /<a[^>]+class="js-navigation-open"[^>]+title="([^"]+\.(?:jpe?g|png|gif))"/gi;
const names = [];
let m;
while ((m = re.exec(txt))) names.push(m[1]);
console.log('listFiles：HTML 结果', names);
if (names.length) return names;
} else {
console.warn('listFiles：HTML 状态', res.status);
}
} catch (e) {
console.error('listFiles：HTML 解析失败', e);
}
console.info('listFiles：没有可用图片');
return [];
}
// 获取图片提交作者
async function fetchAuthor(fileName) {
console.log('fetchAuthor：', fileName);
try {
const commitsApi =
`https://api.github.com/repos/stay206/bangumi-character/commits`
+ `?path=${encodeURIComponent(`${charId}/${fileName}`)}&per_page=1`;
const res = await fetch(commitsApi);
if (!res.ok) throw new Error(res.status);
const js = await res.json();
const c = Array.isArray(js) ? js[0] : js;
const real = c?.commit?.author?.name || '';
const usr = c?.author;
const url = usr?.html_url || (usr?.login ? `https://github.com/${usr.login}` : '#');
console.log('fetchAuthor：', fileName, real || usr?.login, url);
return { name: real || usr?.login || 'unknown', url };
} catch (e) {
console.warn('fetchAuthor 失败，使用 unknown', fileName, e);
return { name: 'unknown', url: '#' };
}
}
// 渲染仓库图片
const files = await listFiles();
console.log('准备渲染仓库图片，共', files.length, '项');
for (const name of files) {
const author = await fetchAuthor(name);
const cdnUrls = [
`https://cdn.jsdelivr.net/gh/stay206/bangumi-character@main/${charId}/${encodeURIComponent(name)}`,
`https://raw.fastgit.org/stay206/bangumi-character/main/${charId}/${encodeURIComponent(name)}`,
`https://raw.githubusercontent.com/stay206/bangumi-character/main/${charId}/${encodeURIComponent(name)}`,
`https://ghproxy.com/https://raw.githubusercontent.com/stay206/bangumi-character/main/${charId}/${encodeURIComponent(name)}`
];
console.log('渲染图片', name, author, cdnUrls);
let idx = 0;
const img = document.createElement('img');
img.width = 100;
img.className = 'grid';
img.src = cdnUrls[idx];
img.onerror = () => {
idx++;
if (idx < cdnUrls.length) {
console.warn('切换 CDN 到', cdnUrls[idx]);
img.src = cdnUrls[idx];
}
};
const a = document.createElement('a');
a.href = cdnUrls[0];
a.className = 'grid thickbox bve-processed';
a.target = '_blank';
a.appendChild(img);
const p = document.createElement('p');
p.innerHTML = `
<span class="tip_j">
by <a href="${author.url}" class="l bve-processed" target="_blank">${author.name}</a>
</span>`;
a.appendChild(p);
const li = document.createElement('li');
li.appendChild(a);
listEl.appendChild(li);
}
console.log('【BGM 图廊脚本】渲染完成');
})();