// ==UserScript==
// @name 鸿蒙资源日记
// @namespace harmony-resource-diary
// @version 1.0.0
// @description 鸿蒙浏览器原生资源捕获工具
// @author YC
// @icon data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMEE4NEZGIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNUJDMEJFIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNiIgZmlsbD0idXJsKCNnKSIvPjxwYXRoIGQ9Ik0zLjUgNy41TDEyIDMuNUwyMC41IDcuNUwxMiAxMS41WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC45IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuNiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0zLjUgNy41TDEyIDExLjVWMjAuNUwzLjUgMTYuNVoiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuNiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIwLjYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMjAuNSA3LjVMMTIgMTEuNVYyMC41TDIwLjUgMTYuNVoiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuNiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIwLjYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=
// @match *://*/*
// @grant GM_download
// @run-at document-end
// @license MIT
// ==/UserScript==
(function () {
'use strict';
if (!/^https?:$/.test(location.protocol)) return;
if (window.top !== window.self) return;
if (window.__HRD_LOADED__) return;
window.__HRD_LOADED__ = true;
const Icons = {
appIcon: ``,
cube3d: ``,
close: ``,
check: ``,
wrapText: ``,
noWrapText: ``,
image: ``,
media: ``,
doc: ``,
video: ``,
audio: ``,
code: ``,
font: ``,
json: ``,
link: ``,
copy: ``,
play: ``,
download: ``,
sortTimeDesc: ``,
sortTimeAsc: ``,
sortNameAsc: ``,
sortNameDesc: ``,
listView: ``,
gridView: ``
};
const CONFIG = {
MAX_RESOURCES: 800,
MAX_URL_CACHE: 3000,
BATCH_SIZE: 80,
FULL_SCAN_INTERVAL: 5000,
SHEET_TOP_GAP: 8,
SWIPE_MIN_DX: 40,
SWIPE_MAX_DY: 120,
SWIPE_MAX_TIME: 1000,
MAX_SOURCE_LINES: 20000,
SOURCE_CHUNK: 500
};
const DANGEROUS_PROTOCOLS = [
'javascript:', 'vbscript:', 'about:', 'file:', 'ftp:', 'telnet:', 'ssh:'
];
const INVALID_URL_PATTERNS = [
/(?:^|[/_.\-])(?:1x1|pixel|spacer|blank|empty|transparent|clear|tracking|track|beacon|ping)[._\-]?(?:gif|png|jpg|jpeg|webp)(?:[?#]|$)/i,
/google-analytics\.com/i,
/googletagmanager\.com/i,
/doubleclick\.net/i,
/googleadservices\.com/i,
/googlesyndication\.com/i,
/facebook\.com\/tr/i,
/connect\.facebook\.net/i,
/hotjar\.com/i,
/mixpanel\.com/i,
/segment\.(io|com)/i,
/amplitude\.com/i,
/sentry\.io/i,
/bugsnag\.com/i,
/newrelic\.com/i,
/\.clarity\.ms/i,
/matomo\.(org|cloud)/i,
/plausible\.io/i,
/umami\.is/i,
/baidu\.com\/hm\.js/i,
/cnzz\.com/i,
/hm\.baidu\.com/i,
/^data:image\/svg\+xml.*?(?:width=['"]?1(?:px)?['"]?|height=['"]?1(?:px)?['"]?)/i
];
const MIN_THUMB_SIZE = 16;
const EXT_TO_TYPE = {
mp4: 'mp4', webm: 'webm', ogg: 'ogg', ogv: 'ogv', mov: 'mov',
avi: 'avi', mkv: 'mkv', flv: 'flv', m3u8: 'm3u8', mpd: 'mpd',
ts: 'ts', m4v: 'm4v', '3gp': '3gp', wmv: 'wmv', m2ts: 'ts',
mp3: 'mp3', wav: 'wav', flac: 'flac', aac: 'aac', m4a: 'm4a',
wma: 'wma', oga: 'oga', weba: 'weba', opus: 'opus',
aiff: 'aiff', mid: 'mid', midi: 'mid', ac3: 'ac3', amr: 'amr',
jpg: 'jpg', jpeg: 'jpg', png: 'png', gif: 'gif', webp: 'webp',
svg: 'svg', ico: 'ico', bmp: 'bmp', avif: 'avif', jxl: 'jxl',
css: 'stylesheet', js: 'script', mjs: 'script', json: 'json',
xml: 'xml', woff: 'font', woff2: 'font', ttf: 'font',
otf: 'font', eot: 'font'
};
const MIME_TO_TYPE = {
'video/mp4': 'mp4', 'video/webm': 'webm', 'video/ogg': 'ogg',
'video/quicktime': 'mov', 'video/x-matroska': 'mkv',
'video/x-flv': 'flv', 'video/x-msvideo': 'avi',
'video/3gpp': '3gp', 'video/x-m4v': 'm4v',
'application/vnd.apple.mpegurl': 'm3u8',
'application/x-mpegURL': 'm3u8',
'application/dash+xml': 'mpd', 'video/mp2t': 'ts',
'audio/mpeg': 'mp3', 'audio/wav': 'wav', 'audio/flac': 'flac',
'audio/aac': 'aac', 'audio/ogg': 'oga', 'audio/webm': 'weba',
'audio/opus': 'opus', 'audio/x-ms-wma': 'wma',
'audio/midi': 'mid', 'audio/x-m4a': 'm4a',
'image/jpeg': 'jpg', 'image/png': 'png', 'image/gif': 'gif',
'image/webp': 'webp', 'image/svg+xml': 'svg', 'image/avif': 'avif',
'image/bmp': 'bmp', 'image/x-icon': 'ico', 'image/tiff': 'bmp',
'text/css': 'stylesheet', 'application/javascript': 'script',
'text/javascript': 'script', 'application/json': 'json',
'application/xml': 'xml'
};
const TYPE_ICON_MAP = {
mp4: 'video', webm: 'video', ogg: 'video', ogv: 'video', mov: 'video',
avi: 'video', mkv: 'video', flv: 'video', m3u8: 'video', mpd: 'video',
ts: 'video', m4v: 'video', '3gp': 'video', wmv: 'video',
mp3: 'audio', wav: 'audio', flac: 'audio', aac: 'audio', m4a: 'audio',
wma: 'audio', oga: 'audio', weba: 'audio', opus: 'audio', audio: 'audio',
aiff: 'audio', mid: 'audio', ac3: 'audio', amr: 'audio',
jpg: 'image', jpeg: 'image', png: 'image', gif: 'image', webp: 'image',
svg: 'image', ico: 'image', bmp: 'image', avif: 'image', jxl: 'image',
image: 'image',
script: 'code', js: 'code', mjs: 'code',
stylesheet: 'code', css: 'code', xml: 'code',
json: 'json',
font: 'font', woff: 'font', woff2: 'font', ttf: 'font', otf: 'font',
xhr: 'link', fetch: 'link', datauri: 'link', other: 'doc'
};
const TYPE_TAG_MAP = {
mp4: 'MP4', webm: 'WEBM', ogg: 'OGG', ogv: 'OGV', mov: 'MOV',
avi: 'AVI', mkv: 'MKV', flv: 'FLV', m3u8: 'M3U8', mpd: 'MPD',
ts: 'TS', m4v: 'M4V', '3gp': '3GP', wmv: 'WMV', m2ts: 'TS',
mp3: 'MP3', wav: 'WAV', flac: 'FLAC', aac: 'AAC', m4a: 'M4A',
wma: 'WMA', oga: 'OGA', weba: 'WEBA', opus: 'OPUS',
aiff: 'AIFF', mid: 'MIDI', ac3: 'AC3', amr: 'AMR',
jpg: 'JPG', jpeg: 'JPG', png: 'PNG', gif: 'GIF', webp: 'WEBP',
svg: 'SVG', ico: 'ICO', bmp: 'BMP', avif: 'AVIF', jxl: 'JXL',
css: 'CSS', js: 'JS', mjs: 'JS', json: 'JSON', xml: 'XML',
script: 'JS', stylesheet: 'CSS',
woff: 'FONT', woff2: 'FONT', ttf: 'FONT', otf: 'FONT', eot: 'FONT',
font: 'FONT',
xhr: 'XHR', fetch: 'FETCH', datauri: 'DATA', other: 'FILE',
image: 'IMG', audio: 'AUDIO', video: 'VIDEO'
};
const SORT_MODES = [
{ key: 'name-asc', label: '名称 A→Z', icon: 'sortNameAsc' },
{ key: 'name-desc', label: '名称 Z→A', icon: 'sortNameDesc' },
{ key: 'time-desc', label: '最新优先', icon: 'sortTimeDesc' },
{ key: 'time-asc', label: '最旧优先', icon: 'sortTimeAsc' }
];
const FILTER_ORDER = ['image', 'media', 'other'];
const Security = {
_cache: new Map(),
_invalidCache: new Map(),
isSafe(url) {
if (!url || typeof url !== 'string') return false;
const c = this._cache.get(url);
if (c !== undefined) return c;
if (this._cache.size > 1000) {
const arr = Array.from(this._cache.entries()).slice(-500);
this._cache.clear();
arr.forEach(([k, v]) => this._cache.set(k, v));
}
const lower = url.toLowerCase().trim();
for (const p of DANGEROUS_PROTOCOLS) {
if (lower.startsWith(p)) { this._cache.set(url, false); return false; }
}
if (lower.startsWith('data:')) {
const mime = lower.split(',')[0].split(':')[1]?.split(';')[0] || '';
const safe = mime.startsWith('image/') || mime.startsWith('audio/') ||
mime.startsWith('video/') || mime.startsWith('text/plain') ||
mime.startsWith('application/json');
this._cache.set(url, safe); return safe;
}
this._cache.set(url, true); return true;
},
isInvalid(url) {
if (!url || typeof url !== 'string') return true;
const c = this._invalidCache.get(url);
if (c !== undefined) return c;
let invalid = false;
for (const re of INVALID_URL_PATTERNS) {
if (re.test(url)) { invalid = true; break; }
}
this._invalidCache.set(url, invalid);
return invalid;
},
key(url) {
if (!url || typeof url !== 'string') return null;
const s = url.trim();
if (!s || s.length > 65536) return null;
if (s.toLowerCase().startsWith('data:')) {
return this.isSafe(s) ? 'data:' + s.slice(0, 220) + '#len' + s.length : null;
}
try {
const u = new URL(s, location.href);
u.hash = '';
if (u.protocol === 'http:' && u.port === '80') u.port = '';
if (u.protocol === 'https:' && u.port === '443') u.port = '';
return u.toString();
} catch { return null; }
},
filename(url) {
try {
if (url.startsWith('data:')) {
const ext = url.match(/data:image\/(\w+)/)?.[1] || 'bin';
return `datauri_${Date.now()}.${ext}`;
}
const u = new URL(url, location.href);
const path = decodeURIComponent(u.pathname);
const name = path.split('/').pop() || 'download';
return name.replace(/[<>:"/\\|?*\x00-\x1f]/g, '_').slice(0, 255) || 'download';
} catch { return `download_${Date.now()}`; }
},
displayType(url, ct) {
if (ct) {
const mt = ct.split(';')[0].toLowerCase();
if (MIME_TO_TYPE[mt]) return MIME_TO_TYPE[mt];
if (mt.includes('video')) return 'mp4';
if (mt.includes('audio')) return 'mp3';
if (mt.includes('image')) return 'image';
if (mt.includes('script')) return 'script';
if (mt.includes('css')) return 'stylesheet';
if (mt.includes('font')) return 'font';
}
try {
const u = new URL(url, location.href);
const ext = u.pathname.split('.').pop()?.toLowerCase() || '';
if (EXT_TO_TYPE[ext]) return EXT_TO_TYPE[ext];
} catch {}
return 'other';
},
filterType(dt) {
const t = (dt || '').toLowerCase();
const media = ['mp4', 'webm', 'ogg', 'ogv', 'mov', 'avi', 'mkv', 'flv',
'm3u8', 'mpd', 'ts', 'm4v', '3gp', 'wmv', 'mp3', 'wav', 'flac',
'aac', 'm4a', 'wma', 'oga', 'weba', 'opus', 'audio', 'aiff',
'mid', 'ac3', 'amr'];
const image = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'ico',
'bmp', 'avif', 'jxl', 'image'];
if (media.includes(t)) return 'media';
if (image.includes(t)) return 'image';
return 'other';
}
};
function buildHighlightedLines(html) {
const lines = [[]];
let currentLine = 0;
function push(cls, text) {
if (!text) return;
const parts = text.split('\n');
for (let i = 0; i < parts.length; i++) {
if (i > 0) {
currentLine++;
lines.push([]);
}
if (parts[i].length > 0) {
lines[currentLine].push({ cls, text: parts[i] });
}
}
}
function pushTag(tag) {
const openMatch = tag.match(/^(<\/?)([a-zA-Z][a-zA-Z0-9\-:]*)/);
if (!openMatch) {
push('hl-tag', tag);
return;
}
push('hl-punct', openMatch[1]);
push('hl-tag-name', openMatch[2]);
let rest = tag.slice(openMatch[0].length);
let closeStr = '';
if (rest.endsWith('/>')) {
closeStr = '/>';
rest = rest.slice(0, -2);
} else if (rest.endsWith('>')) {
closeStr = '>';
rest = rest.slice(0, -1);
}
const attrRe = /(\s+)([a-zA-Z_:][a-zA-Z0-9_:.\-]*)(\s*=\s*)?("[^"]*"|'[^']*'|[^\s>]+)?/g;
let lastIdx = 0;
let m;
while ((m = attrRe.exec(rest)) !== null) {
if (m.index > lastIdx) {
push('hl-text', rest.slice(lastIdx, m.index));
}
push('hl-text', m[1]);
push('hl-attr-name', m[2]);
if (m[3]) push('hl-punct', m[3]);
if (m[4]) push('hl-attr-value', m[4]);
lastIdx = attrRe.lastIndex;
}
if (lastIdx < rest.length) {
push('hl-text', rest.slice(lastIdx));
}
push('hl-punct', closeStr);
}
const re = /()|(]*>)|(<\/?[a-zA-Z][^>]*\/?>)|([^<]+)/gi;
let lastIdx = 0;
let m;
while ((m = re.exec(html)) !== null) {
if (m.index > lastIdx) {
push('hl-text', html.slice(lastIdx, m.index));
}
if (m[1]) push('hl-comment', m[1]);
else if (m[2]) push('hl-doctype', m[2]);
else if (m[3]) pushTag(m[3]);
else if (m[4]) push('hl-text', m[4]);
lastIdx = re.lastIndex;
}
if (lastIdx < html.length) {
push('hl-text', html.slice(lastIdx));
}
return lines;
}
function renderSourceLinesChunked(container, lines) {
const total = lines.length;
const limit = Math.min(total, CONFIG.MAX_SOURCE_LINES);
let i = 0;
function buildChunk() {
const end = Math.min(i + CONFIG.SOURCE_CHUNK, limit);
const frag = document.createDocumentFragment();
for (; i < end; i++) {
const segs = lines[i];
const lineDiv = document.createElement('div');
lineDiv.className = 'src-line';
const lineno = document.createElement('span');
lineno.className = 'src-lineno';
lineno.textContent = String(i + 1);
lineDiv.appendChild(lineno);
const content = document.createElement('span');
content.className = 'src-line-content';
if (segs.length === 0) {
content.appendChild(document.createTextNode(''));
} else {
for (let k = 0; k < segs.length; k++) {
const seg = segs[k];
const span = document.createElement('span');
span.className = seg.cls;
span.textContent = seg.text;
content.appendChild(span);
}
}
lineDiv.appendChild(content);
frag.appendChild(lineDiv);
}
container.appendChild(frag);
if (i < limit) {
requestAnimationFrame(buildChunk);
} else if (total > limit) {
const more = document.createElement('div');
more.className = 'src-more';
more.textContent = `... 仅显示前 ${limit} 行，共 ${total} 行`;
container.appendChild(more);
}
}
buildChunk();
}
const Store = {
resources: [],
urlIndex: new Map(),
processed: new Set(),
sortMode: 'name-asc',
viewMode: 'list',
currentFilter: 'image',
add(url, ct, it) {
if (Security.isInvalid(url)) return false;
const k = Security.key(url);
if (!k) return false;
const dt = Security.displayType(url, ct);
if (dt === 'other') {
try {
const u = new URL(url, location.href);
if (!/\.\w{2,5}$/.test(u.pathname)) return false;
} catch { return false; }
}
if (this.processed.has(k)) {
const ex = this.urlIndex.get(k);
if (ex && ct && !ex.contentType) {
ex.contentType = ct;
ex.displayType = Security.displayType(ex.url, ct);
ex.filterType = Security.filterType(ex.displayType);
}
return false;
}
this.processed.add(k);
if (this.processed.size > CONFIG.MAX_URL_CACHE) {
const iter = this.processed.values();
for (let i = 0; i < 500; i++) this.processed.delete(iter.next().value);
}
const item = {
url, contentType: ct || '', initiatorType: it || 'scan',
timestamp: Date.now(), displayType: dt,
filterType: Security.filterType(dt),
filename: Security.filename(url)
};
if (this.resources.length >= CONFIG.MAX_RESOURCES) {
const ev = this.resources.pop();
if (ev) this.urlIndex.delete(Security.key(ev.url));
}
this.resources.unshift(item);
this.urlIndex.set(k, item);
UI.scheduleUpdate();
return true;
},
removeSilent(url) {
const k = Security.key(url);
if (!k) return;
const idx = this.resources.findIndex(r => r.url === url);
if (idx >= 0) this.resources.splice(idx, 1);
this.urlIndex.delete(k);
this.processed.delete(k);
},
counts() {
const c = { image: 0, media: 0, other: 0 };
for (const r of this.resources) {
if (c[r.filterType] !== undefined) c[r.filterType]++;
}
return c;
},
filtered() {
let arr = this.resources;
if (this.currentFilter) {
arr = arr.filter(r => r.filterType === this.currentFilter);
}
arr = arr.slice();
const m = this.sortMode;
arr.sort((a, b) => {
switch (m) {
case 'time-desc': return b.timestamp - a.timestamp;
case 'time-asc': return a.timestamp - b.timestamp;
case 'name-asc': {
const x = (a.filename || '').toLowerCase();
const y = (b.filename || '').toLowerCase();
return x < y ? -1 : x > y ? 1 : 0;
}
case 'name-desc': {
const x = (a.filename || '').toLowerCase();
const y = (b.filename || '').toLowerCase();
return x < y ? 1 : x > y ? -1 : 0;
}
}
return 0;
});
return arr.slice(0, CONFIG.BATCH_SIZE);
}
};
const Theme = {
mq: null,
_observer: null,
_rafId: null,
_current: null,
detect() {
try {
if (this.mq && this.mq.matches) return 'dark';
} catch {}
const html = document.documentElement;
const body = document.body;
const hasDarkMarker = (el) => {
if (!el) return false;
try {
const cls = (typeof el.className === 'string'
? el.className
: (el.className && el.className.baseVal) || ''
).toLowerCase();
if (/(^|\s)(dark|theme-dark|night|dark-mode|dark-theme|night-mode)(\s|$)/.test(cls)) {
return true;
}
const attrTheme = el.getAttribute && el.getAttribute('data-theme');
if (attrTheme === 'dark') return true;
const attrColorScheme = el.getAttribute && el.getAttribute('color-scheme');
if (attrColorScheme === 'dark') return true;
if (el.hasAttribute && el.hasAttribute('dark')) return true;
} catch {}
return false;
};
if (hasDarkMarker(html)) return 'dark';
if (hasDarkMarker(body)) return 'dark';
try {
const cs = getComputedStyle(html).colorScheme || '';
if (cs && cs.includes('dark') && !cs.includes('light')) return 'dark';
} catch {}
try {
const getBg = (el) => {
if (!el) return null;
const bg = getComputedStyle(el).backgroundColor || '';
const m = bg.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/);
if (!m) return null;
const r = Number(m[1]), g = Number(m[2]), b = Number(m[3]);
const a = m[4] !== undefined ? parseFloat(m[4]) : 1;
if (a < 0.5) return null;
return [r, g, b];
};
const rgb = getBg(body) || getBg(html);
if (rgb) {
const [r, g, b] = rgb;
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
if (brightness < 80) return 'dark';
}
} catch {}
return 'light';
},
apply() {
const theme = this.detect();
if (theme === this._current) return;
this._current = theme;
if (!UI.host) return;
UI.host.setAttribute('data-theme', theme);
let meta = document.querySelector('meta[name="theme-color"][data-hrd]');
if (!meta) {
meta = document.createElement('meta');
meta.setAttribute('name', 'theme-color');
meta.setAttribute('data-hrd', '1');
document.head.appendChild(meta);
}
meta.setAttribute('content', theme === 'dark' ? '#141820' : '#F5F7FA');
},
schedule() {
if (this._rafId) return;
this._rafId = requestAnimationFrame(() => {
this._rafId = null;
this.apply();
});
},
init() {
try {
this.mq = window.matchMedia('(prefers-color-scheme: dark)');
const onMqChange = () => this.apply();
if (this.mq.addEventListener) {
this.mq.addEventListener('change', onMqChange);
} else if (this.mq.addListener) {
this.mq.addListener(onMqChange);
}
} catch {}
try {
this._observer = new MutationObserver(() => this.schedule());
this._observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class', 'data-theme', 'color-scheme', 'style', 'dark']
});
if (document.body) {
this._observer.observe(document.body, {
attributes: true,
attributeFilter: ['class', 'data-theme', 'color-scheme', 'style', 'dark']
});
}
} catch {}
this.apply();
},
destroy() {
try {
if (this._observer) this._observer.disconnect();
} catch {}
if (this._rafId) cancelAnimationFrame(this._rafId);
}
};
const SafeArea = {
_top: 24,
detect() {
let h = 24;
if (window.visualViewport && window.visualViewport.offsetTop > 0) {
h = window.visualViewport.offsetTop;
} else {
const diff = (window.screen ? window.screen.height : 0) - window.innerHeight;
if (diff > 0 && diff < 200) h = diff;
}
this._top = h;
if (UI.host) {
UI.host.style.setProperty('--hrd-safe-top', h + 'px');
}
},
init() {
this.detect();
window.addEventListener('resize', () => this.detect());
window.addEventListener('orientationchange', () => {
setTimeout(() => this.detect(), 300);
});
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', () => this.detect());
}
}
};
const UI = {
host: null,
root: null,
panel: null,
list: null,
_raf: null,
_scrollLocked: false,
_savedBodyOverflow: '',
_savedHtmlOverflow: '',
_toastTimer: null,
_itemMap: new Map(),
_activeOverlay: null,
_swipeBound: false,
init() {
if (this.host) return;
this.host = document.createElement('div');
this.host.setAttribute('data-theme', 'light');
this.host.style.cssText =
'position:fixed;top:0;left:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:2147483647;';
this.root = this.host.attachShadow({ mode: 'open' });
this.injectStyle();
this.buildUI();
document.body.appendChild(this.host);
this.bindEvents();
},
injectStyle() {
const s = document.createElement('style');
s.textContent = `
:host {
all: initial;
position: fixed; top: 0; left: 0; width: 0; height: 0;
overflow: visible; pointer-events: none; z-index: 2147483647;
font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'PingFang SC',
-apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
--hrd-safe-top: 24px;
--hrd-sheet-gap: ${CONFIG.SHEET_TOP_GAP}px;
--hrd-safe-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
--hrd-bg-primary: rgba(245, 247, 250, 0.94);
--hrd-bg-solid: #F5F7FA;
--hrd-bg-tertiary: #F0F1F5;
--hrd-bg-elevated: #FFFFFF;
--hrd-bg-mask: rgba(10, 15, 30, 0.32);
--hrd-border: rgba(10, 30, 80, 0.06);
--hrd-border-strong: rgba(10, 30, 80, 0.10);
--hrd-text-primary: #1C1C1E;
--hrd-text-secondary: #5F6368;
--hrd-text-tertiary: #98989E;
--hrd-accent: #0A84FF;
--hrd-accent-soft: rgba(10, 132, 255, 0.10);
--hrd-accent-glow: rgba(10, 132, 255, 0.30);
--hrd-shadow-card: 0 2px 8px rgba(10, 30, 80, 0.04), 0 1px 2px rgba(10, 30, 80, 0.03);
--hrd-shadow-fab: 0 8px 28px rgba(10, 132, 255, 0.32), 0 2px 8px rgba(10, 132, 255, 0.16);
--hrd-shadow-panel: 0 -12px 48px rgba(10, 30, 80, 0.12);
--hrd-toast-bg: rgba(20, 28, 40, 0.92);
--hrd-toast-fg: #F5F5F7;
--hrd-toast-border: rgba(255, 255, 255, 0.10);
--hrd-handle-bg: rgba(10, 30, 80, 0.18);
}
:host([data-theme="dark"]) {
--hrd-bg-primary: rgba(20, 24, 32, 0.94);
--hrd-bg-solid: #141820;
--hrd-bg-tertiary: #2A2E38;
--hrd-bg-elevated: #303440;
--hrd-bg-mask: rgba(0, 0, 0, 0.55);
--hrd-border: rgba(255, 255, 255, 0.06);
--hrd-border-strong: rgba(255, 255, 255, 0.12);
--hrd-text-primary: #F5F5F7;
--hrd-text-secondary: #A8ACB3;
--hrd-text-tertiary: #6C6C70;
--hrd-accent-soft: rgba(10, 132, 255, 0.18);
--hrd-accent-glow: rgba(10, 132, 255, 0.42);
--hrd-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16);
--hrd-shadow-fab: 0 8px 28px rgba(10, 132, 255, 0.42), 0 2px 8px rgba(0, 0, 0, 0.24);
--hrd-shadow-panel: 0 -12px 48px rgba(0, 0, 0, 0.48);
--hrd-toast-bg: rgba(240, 240, 245, 0.92);
--hrd-toast-fg: #1C1C1E;
--hrd-toast-border: rgba(0, 0, 0, 0.06);
--hrd-handle-bg: rgba(255, 255, 255, 0.22);
}
:host * { box-sizing: border-box; pointer-events: auto; }
:host svg { display: block; }
#hrd-fab {
position: fixed;
bottom: calc(120px + var(--hrd-safe-bottom));
right: 20px;
width: 60px; height: 60px; border-radius: 50%;
background: linear-gradient(135deg, #0A84FF, #5BC0BE);
border: 0.5px solid rgba(255, 255, 255, 0.32);
color: #fff; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--hrd-shadow-fab);
transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 10;
}
#hrd-fab svg { width: 30px; height: 30px; }
#hrd-fab:hover { transform: scale(1.06); }
#hrd-fab:active { transform: scale(0.92); }
#hrd-backdrop {
position: fixed; inset: 0;
background: var(--hrd-bg-mask);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
opacity: 0; visibility: hidden; transition: 0.3s ease;
z-index: 9;
}
#hrd-backdrop.on { opacity: 1; visibility: visible; }
#hrd-panel {
position: fixed; left: 0; right: 0; bottom: 0; height: 74%;
background: var(--hrd-bg-primary);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-radius: 24px 24px 0 0;
border-top: 0.5px solid var(--hrd-border-strong);
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.32, 0.94, 0.6, 1);
z-index: 11; display: flex; flex-direction: column;
overflow: hidden; box-shadow: var(--hrd-shadow-panel);
}
#hrd-panel.on { transform: translateY(0); }
.hrd-hd { display: flex; align-items: center; padding: 18px 20px 10px; gap: 8px; }
.hrd-hd h3 {
margin: 0; font-size: 18px; font-weight: 700;
color: var(--hrd-text-primary); flex: 1;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.hrd-hd .hrd-title-icon {
width: 26px;
height: 26px;
border-radius: 7px;
overflow: hidden;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(10, 132, 255, 0.28);
}
.hrd-hd .hrd-title-icon svg {
width: 100%;
height: 100%;
display: block;
}
.hrd-hd .hrd-title-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hrd-hd .hrd-count {
font-size: 12px; font-weight: 500;
color: var(--hrd-text-tertiary);
flex-shrink: 0;
}
.hrd-icon-btn {
width: 34px; height: 34px; border-radius: 50%; border: none;
background: var(--hrd-bg-tertiary);
color: var(--hrd-text-secondary); cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, transform 0.2s, color 0.2s;
flex-shrink: 0;
}
.hrd-icon-btn svg { width: 18px; height: 18px; }
.hrd-icon-btn:hover { background: var(--hrd-border-strong); color: var(--hrd-text-primary); }
.hrd-icon-btn:active { transform: scale(0.9); }
.hrd-filters { display: flex; gap: 8px; padding: 0 20px 12px; }
.hrd-chip {
flex: 1; padding: 8px 0; border-radius: 14px; border: none;
background: var(--hrd-bg-tertiary);
font-size: 13px; font-weight: 600;
color: var(--hrd-text-secondary); cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 6px;
transition: background 0.2s, color 0.2s, transform 0.2s;
font-family: inherit;
}
.hrd-chip svg { width: 16px; height: 16px; }
.hrd-chip:hover { background: var(--hrd-border-strong); }
.hrd-chip:active { transform: scale(0.96); }
.hrd-chip.on {
background: var(--hrd-accent); color: #fff;
box-shadow: 0 4px 14px var(--hrd-accent-glow);
}
.hrd-list {
flex: 1; overflow-y: auto;
padding: 4px 16px calc(24px + var(--hrd-safe-bottom));
touch-action: pan-y;
overscroll-behavior: contain;
scroll-behavior: smooth;
}
.hrd-list::-webkit-scrollbar { width: 4px; }
.hrd-list::-webkit-scrollbar-thumb {
background: var(--hrd-border-strong); border-radius: 4px;
}
.hrd-list.view-empty {
display: flex;
align-items: center;
justify-content: center;
}
.hrd-list.view-list .hrd-item {
display: flex; gap: 12px; padding: 12px;
background: var(--hrd-bg-elevated);
border: 0.5px solid var(--hrd-border);
border-radius: 16px; margin-bottom: 8px;
align-items: center; cursor: pointer;
box-shadow: var(--hrd-shadow-card);
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
animation: hrdSlideIn 0.3s ease both;
}
@keyframes hrdSlideIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.hrd-list.view-list .hrd-item:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(10, 30, 80, 0.08);
}
.hrd-list.view-list .hrd-item:active { transform: scale(0.985); }
.hrd-list.view-list .hrd-thumb {
width: 48px; height: 48px; border-radius: 12px;
flex-shrink: 0; overflow: hidden; position: relative;
display: flex; align-items: center; justify-content: center;
background: var(--hrd-bg-tertiary);
}
.hrd-list.view-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-content: flex-start;
align-items: flex-start;
padding: 8px 16px calc(24px + var(--hrd-safe-bottom));
}
.hrd-list.view-grid .hrd-item {
flex: 0 0 calc((100% - 16px) / 3);
width: calc((100% - 16px) / 3);
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
background: var(--hrd-bg-elevated);
border: 0.5px solid var(--hrd-border);
border-radius: 14px;
cursor: pointer;
box-shadow: var(--hrd-shadow-card);
transition: transform 0.2s, box-shadow 0.2s;
animation: hrdSlideIn 0.3s ease both;
overflow: hidden;
height: auto;
}
.hrd-list.view-grid .hrd-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(10, 30, 80, 0.10);
}
.hrd-list.view-grid .hrd-item:active { transform: scale(0.98); }
.hrd-list.view-grid .hrd-thumb {
width: 100%;
height: 74px;
border-radius: 10px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: var(--hrd-bg-tertiary);
flex-shrink: 0;
}
.hrd-list.view-grid .hrd-info {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
flex-shrink: 0;
}
.hrd-list.view-grid .hrd-name {
flex-direction: row;
align-items: center;
gap: 4px;
font-size: 11px;
line-height: 1.2;
min-height: 16px;
overflow: hidden;
}
.hrd-list.view-grid .hrd-url { display: none; }
.hrd-list.view-grid .hrd-tag {
height: 14px;
font-size: 8px;
padding: 0 4px;
border-radius: 4px;
margin-right: 0;
flex-shrink: 0;
letter-spacing: 0.2px;
}
.hrd-list.view-grid .hrd-name-text {
flex: 1;
min-width: 0;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hrd-list.view-grid .hrd-acts {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 2px;
flex-shrink: 0;
padding-top: 2px;
}
.hrd-list.view-grid .hrd-btn {
width: 24px;
height: 24px;
flex: 0 0 auto;
}
.hrd-list.view-grid .hrd-btn svg { width: 12px; height: 12px; }
.hrd-thumb img {
width: 100%; height: 100%;
object-fit: cover; display: block;
opacity: 0; transition: opacity 0.3s;
}
.hrd-thumb img.loaded { opacity: 1; }
.hrd-thumb .hrd-icon {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
}
.hrd-list.view-grid .hrd-thumb .hrd-icon { width: 28px; height: 28px; }
.hrd-thumb .hrd-icon svg { width: 100%; height: 100%; }
.hrd-thumb[data-kind="image"] { background: rgba(91, 192, 190, 0.14); }
.hrd-thumb[data-kind="image"] .hrd-icon { color: #26A69A; }
.hrd-thumb[data-kind="video"] { background: rgba(255, 82, 82, 0.14); }
.hrd-thumb[data-kind="video"] .hrd-icon { color: #EF5350; }
.hrd-thumb[data-kind="audio"] { background: rgba(10, 132, 255, 0.14); }
.hrd-thumb[data-kind="audio"] .hrd-icon { color: #0A84FF; }
.hrd-thumb[data-kind="code"] { background: rgba(255, 167, 38, 0.16); }
.hrd-thumb[data-kind="code"] .hrd-icon { color: #FF9800; }
.hrd-thumb[data-kind="json"] { background: rgba(92, 107, 192, 0.14); }
.hrd-thumb[data-kind="json"] .hrd-icon { color: #5C6BC0; }
.hrd-thumb[data-kind="font"] { background: rgba(161, 136, 127, 0.16); }
.hrd-thumb[data-kind="font"] .hrd-icon { color: #A1887F; }
.hrd-thumb[data-kind="link"] { background: rgba(66, 165, 245, 0.14); }
.hrd-thumb[data-kind="link"] .hrd-icon { color: #42A5F5; }
.hrd-thumb[data-kind="doc"] { background: rgba(120, 144, 156, 0.14); }
.hrd-thumb[data-kind="doc"] .hrd-icon { color: #78909C; }
:host([data-theme="dark"]) .hrd-thumb[data-kind="image"] { background: rgba(38, 166, 154, 0.22); }
:host([data-theme="dark"]) .hrd-thumb[data-kind="video"] { background: rgba(239, 83, 80, 0.22); }
:host([data-theme="dark"]) .hrd-thumb[data-kind="audio"] { background: rgba(10, 132, 255, 0.22); }
:host([data-theme="dark"]) .hrd-thumb[data-kind="code"] { background: rgba(255, 152, 0, 0.22); }
:host([data-theme="dark"]) .hrd-thumb[data-kind="json"] { background: rgba(92, 107, 192, 0.24); }
:host([data-theme="dark"]) .hrd-thumb[data-kind="font"] { background: rgba(161, 136, 127, 0.24); }
:host([data-theme="dark"]) .hrd-thumb[data-kind="link"] { background: rgba(66, 165, 245, 0.22); }
:host([data-theme="dark"]) .hrd-thumb[data-kind="doc"] { background: rgba(120, 144, 156, 0.22); }
:host([data-theme="dark"]) .hrd-thumb[data-kind="image"] .hrd-icon { color: #4DB6AC; }
:host([data-theme="dark"]) .hrd-thumb[data-kind="video"] .hrd-icon { color: #FF7043; }
:host([data-theme="dark"]) .hrd-thumb[data-kind="code"] .hrd-icon { color: #FFB74D; }
:host([data-theme="dark"]) .hrd-thumb[data-kind="json"] .hrd-icon { color: #9FA8DA; }
:host([data-theme="dark"]) .hrd-thumb[data-kind="font"] .hrd-icon { color: #BCAAA4; }
:host([data-theme="dark"]) .hrd-thumb[data-kind="link"] .hrd-icon { color: #64B5F6; }
:host([data-theme="dark"]) .hrd-thumb[data-kind="doc"] .hrd-icon { color: #90A4AE; }
.hrd-info { flex: 1; min-width: 0; }
.hrd-name {
display: flex;
align-items: center;
gap: 0;
font-size: 13px; font-weight: 600;
color: var(--hrd-text-primary);
line-height: 1.4;
min-width: 0;
}
.hrd-tag {
display: inline-flex;
align-items: center;
justify-content: center;
height: 18px;
padding: 0 6px;
margin-right: 6px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
color: #fff;
flex-shrink: 0;
text-transform: uppercase;
background: #78909C;
}
.hrd-tag[data-kind="image"] { background: #5BC0BE; }
.hrd-tag[data-kind="video"] { background: #EF5350; }
.hrd-tag[data-kind="audio"] { background: #0A84FF; }
.hrd-tag[data-kind="code"] { background: #FF9800; }
.hrd-tag[data-kind="json"] { background: #5C6BC0; }
.hrd-tag[data-kind="font"] { background: #A1887F; }
.hrd-tag[data-kind="link"] { background: #42A5F5; }
.hrd-tag[data-kind="doc"] { background: #78909C; }
:host([data-theme="dark"]) .hrd-tag[data-kind="image"] { background: #4DB6AC; }
:host([data-theme="dark"]) .hrd-tag[data-kind="video"] { background: #E57373; }
:host([data-theme="dark"]) .hrd-tag[data-kind="audio"] { background: #64B5F6; }
:host([data-theme="dark"]) .hrd-tag[data-kind="code"] { background: #FFB74D; }
:host([data-theme="dark"]) .hrd-tag[data-kind="json"] { background: #9FA8DA; }
:host([data-theme="dark"]) .hrd-tag[data-kind="font"] { background: #BCAAA4; }
:host([data-theme="dark"]) .hrd-tag[data-kind="link"] { background: #64B5F6; }
:host([data-theme="dark"]) .hrd-tag[data-kind="doc"] { background: #90A4AE; }
.hrd-name-text {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hrd-url {
font-size: 10.5px; color: var(--hrd-text-tertiary);
margin-top: 3px;
font-family: 'HarmonyOS Sans Mono', 'SF Mono', Monaco, Consolas, monospace;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hrd-acts { display: flex; gap: 4px; flex-shrink: 0; }
.hrd-btn {
width: 32px; height: 32px; border-radius: 50%; border: none;
background: transparent; color: var(--hrd-accent); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, transform 0.15s;
padding: 0;
}
.hrd-btn svg { width: 16px; height: 16px; }
.hrd-btn:hover { background: var(--hrd-accent-soft); }
.hrd-btn:active { transform: scale(0.88); }
.hrd-empty {
text-align: center; padding: 40px 20px;
color: var(--hrd-text-secondary); font-size: 14px;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hrd-empty > svg {
width: 64px; height: 64px;
color: var(--hrd-text-tertiary);
opacity: 0.75;
margin-bottom: 4px;
}
.hrd-empty .sub { font-size: 12px; color: var(--hrd-text-tertiary); }
#hrd-toast {
position: fixed; top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.94);
background: var(--hrd-toast-bg);
color: var(--hrd-toast-fg);
padding: 12px 22px; border-radius: 999px;
font-size: 13px; font-weight: 500;
z-index: 2147483647; pointer-events: none;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
border: 0.5px solid var(--hrd-toast-border);
display: flex; align-items: center; gap: 8px;
}
#hrd-toast.on {
opacity: 1; transform: translate(-50%, -50%) scale(1);
}
#hrd-player,
#hrd-preview,
#hrd-source-panel {
position: fixed;
top: calc(var(--hrd-safe-top) + var(--hrd-sheet-gap));
left: 0; right: 0; bottom: 0;
background: var(--hrd-bg-primary);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-radius: 24px 24px 0 0;
border-top: 0.5px solid var(--hrd-border-strong);
box-shadow: var(--hrd-shadow-panel);
z-index: 2147483647;
overflow: hidden;
padding-bottom: var(--hrd-safe-bottom);
animation: hrdSheetIn 0.38s cubic-bezier(0.32, 0.94, 0.6, 1);
}
@keyframes hrdSheetIn {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hrd-sheet-handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: var(--hrd-handle-bg);
margin: 8px auto 0;
flex-shrink: 0;
}
#hrd-player { display: flex; flex-direction: column; }
#hrd-player .hd {
display: flex; align-items: center; gap: 12px;
padding: 14px 20px 12px;
flex-shrink: 0;
}
#hrd-player .hd .ttl {
flex: 1; font-size: 16px; font-weight: 700;
color: var(--hrd-text-primary);
display: flex; align-items: center; gap: 10px;
}
#hrd-player .hd .ttl svg { width: 22px; height: 22px; color: var(--hrd-accent); }
#hrd-player .hd button {
width: 36px; height: 36px; border-radius: 50%; border: none;
background: var(--hrd-bg-tertiary); color: var(--hrd-text-secondary);
cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, transform 0.2s;
}
#hrd-player .hd button:hover { background: var(--hrd-border-strong); }
#hrd-player .hd button:active { transform: scale(0.9); }
#hrd-player .hd button svg { width: 18px; height: 18px; }
#hrd-player .media-wrap {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 0 16px 16px;
overflow: hidden;
min-height: 0;
}
#hrd-player video, #hrd-player audio {
max-width: 100%; max-height: 100%;
border-radius: 12px; background: #000;
}
#hrd-preview {
display: flex; align-items: center; justify-content: center;
cursor: zoom-out;
padding: 48px 16px calc(24px + var(--hrd-safe-bottom));
}
#hrd-preview img {
max-width: 100%; max-height: 100%;
border-radius: 12px; object-fit: contain;
}
#hrd-preview button {
position: absolute;
top: 12px;
right: 16px;
width: 36px; height: 36px; border-radius: 50%; border: none;
background: var(--hrd-bg-tertiary); color: var(--hrd-text-secondary);
cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, transform 0.2s;
}
#hrd-preview button:hover { background: var(--hrd-border-strong); }
#hrd-preview button:active { transform: scale(0.9); }
#hrd-preview button svg { width: 18px; height: 18px; }
#hrd-source-panel {
display: flex;
flex-direction: column;
padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px);
--hrd-src-bg: #1B1F27;
--hrd-src-text: #E5E7EB;
--hrd-src-lineno: #4A5260;
--hrd-src-border: rgba(255, 255, 255, 0.06);
--hrd-src-hover: rgba(10, 132, 255, 0.06);
}
#hrd-source-panel .hd {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px 10px;
flex-shrink: 0;
}
#hrd-source-panel .hd .ttl {
flex: 1; font-size: 16px; font-weight: 700;
color: var(--hrd-text-primary);
display: flex; align-items: center; gap: 10px;
min-width: 0;
overflow: hidden;
}
#hrd-source-panel .hd .ttl > svg {
width: 22px; height: 22px; color: var(--hrd-accent);
flex-shrink: 0;
}
#hrd-source-panel .hd .ttl > span:first-of-type {
white-space: nowrap;
}
#hrd-source-panel .hd .meta {
font-size: 11px;
font-weight: 500;
color: var(--hrd-text-tertiary);
margin-left: 4px;
white-space: nowrap;
flex-shrink: 0;
}
#hrd-source-panel .hd button {
width: 34px; height: 34px; border-radius: 50%; border: none;
background: var(--hrd-bg-tertiary); color: var(--hrd-text-secondary);
cursor: pointer; padding: 0; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, transform 0.2s, color 0.2s;
}
#hrd-source-panel .hd button:hover {
background: var(--hrd-border-strong);
color: var(--hrd-text-primary);
}
#hrd-source-panel .hd button:active { transform: scale(0.9); }
#hrd-source-panel .hd button svg { width: 18px; height: 18px; }
#hrd-source-panel .hd button.active {
color: var(--hrd-accent);
background: var(--hrd-accent-soft);
}
#hrd-source-panel .src-container {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: var(--hrd-src-bg);
border-radius: 12px;
margin: 4px 12px 8px;
padding: 8px 0;
font-family: 'HarmonyOS Sans Mono', 'SF Mono', 'Menlo', 'Monaco', 'Cascadia Code', 'Fira Code', Consolas, monospace;
font-size: 12px;
line-height: 1.55;
color: var(--hrd-src-text);
will-change: scroll-position;
tab-size: 4;
-moz-tab-size: 4;
}
#hrd-source-panel .src-container::-webkit-scrollbar { width: 6px; height: 6px; }
#hrd-source-panel .src-container::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12); border-radius: 3px;
}
#hrd-source-panel .src-container::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.22);
}
#hrd-source-panel .src-container::-webkit-scrollbar-corner { background: transparent; }
.src-code {
display: inline-block;
min-width: 100%;
padding: 4px 0 8px;
vertical-align: top;
}
#hrd-source-panel.wrap .src-code {
display: block;
}
.src-line {
min-height: 1.55em;
transition: background 0.15s;
display: block;
white-space: nowrap;
}
#hrd-source-panel.wrap .src-line {
display: flex;
align-items: flex-start;
white-space: normal;
}
.src-line:hover { background: var(--hrd-src-hover); }
.src-lineno {
display: inline-block;
min-width: 2.5em;
padding-left: 10px;
padding-right: 10px;
text-align: right;
color: var(--hrd-src-lineno);
user-select: none;
-webkit-user-select: none;
border-right: 1px solid var(--hrd-src-border);
font-variant-numeric: tabular-nums;
position: sticky;
left: 0;
background: var(--hrd-src-bg);
z-index: 2;
vertical-align: top;
}
#hrd-source-panel.wrap .src-lineno {
flex: 0 0 auto;
}
.src-line:hover .src-lineno { background: #22272F; }
.src-line-content {
display: inline-block;
padding-right: 12px;
vertical-align: top;
white-space: pre;
}
#hrd-source-panel.wrap .src-line-content {
display: block;
flex: 1 1 auto;
min-width: 0;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
}
.src-more {
padding: 12px 20px;
text-align: center;
color: #6C6C70;
font-size: 12px;
border-top: 1px dashed var(--hrd-src-border);
margin: 8px 16px 0;
}
.hl-tag-name { color: #E06C75; font-weight: 500; }
.hl-attr-name { color: #D19A66; }
.hl-attr-value { color: #98C379; }
.hl-punct { color: #ABB2BF; }
.hl-comment { color: #5C6370; font-style: italic; }
.hl-doctype { color: #C678DD; font-weight: 500; }
.hl-tag { color: #E06C75; }
.hl-text { color: var(--hrd-src-text); }
`;
this.root.appendChild(s);
},
buildUI() {
const c = document.createElement('div');
c.innerHTML = `
${Icons.appIcon}
资源日记
0
`;
this.root.appendChild(c);
this.panel = this.root.getElementById('hrd-panel');
this.list = this.root.getElementById('hrd-list');
this.renderFilters();
this.updateSortIcon();
this.updateViewIcon();
},
renderFilters() {
const f = this.root.getElementById('hrd-filters');
const counts = Store.counts();
const defs = [
{ key: 'image', label: '图片', icon: Icons.image },
{ key: 'media', label: '媒体', icon: Icons.media },
{ key: 'other', label: '其他', icon: Icons.doc }
];
f.innerHTML = '';
defs.forEach(d => {
const b = document.createElement('button');
b.className = 'hrd-chip' + (Store.currentFilter === d.key ? ' on' : '');
b.innerHTML = `${d.icon}${d.label} ${counts[d.key] || 0}`;
b.onclick = () => {
Store.currentFilter = Store.currentFilter === d.key ? '' : d.key;
this.renderFilters();
this.renderList();
};
f.appendChild(b);
});
},
updateSortIcon() {
const btn = this.root.getElementById('hrd-sort');
const mode = SORT_MODES.find(m => m.key === Store.sortMode) || SORT_MODES[0];
btn.innerHTML = Icons[mode.icon];
btn.title = '排序：' + mode.label;
},
updateViewIcon() {
const btn = this.root.getElementById('hrd-view');
btn.innerHTML = Store.viewMode === 'list' ? Icons.listView : Icons.gridView;
btn.title = Store.viewMode === 'list' ? '列表视图' : '网格视图';
},
scheduleUpdate() {
if (this._raf) return;
this._raf = requestAnimationFrame(() => {
this._raf = null;
this._syncCounts();
this.renderFilters();
if (this.panel.classList.contains('on')) {
this.renderList();
}
});
},
_syncCounts() {
const cnt = this.root.getElementById('hrd-count');
if (cnt) cnt.textContent = Store.resources.length;
},
_removeItem(url) {
const el = this._itemMap.get(url);
if (el && el.parentNode) {
el.style.transition = 'opacity 0.18s, transform 0.18s';
el.style.opacity = '0';
el.style.transform = 'scale(0.96)';
setTimeout(() => {
if (el.parentNode) el.parentNode.removeChild(el);
}, 180);
}
this._itemMap.delete(url);
Store.removeSilent(url);
this._syncCounts();
setTimeout(() => this.renderFilters(), 200);
},
renderList() {
if (!this.list) return;
this.list.classList.remove('view-list');
this.list.classList.remove('view-grid');
this.list.classList.remove('view-empty');
this._itemMap.clear();
const items = Store.filtered();
if (items.length === 0) {
this.list.classList.add('view-empty');
this.list.innerHTML = `
${Icons.cube3d}
暂无捕获的资源
浏览网页时将自动捕获图片、视频、音频等资源
${this._iconFor(r.displayType)}
`;
};
if (canTryThumb) {
const img = document.createElement('img');
img.alt = r.filename;
img.decoding = 'async';
img.referrerPolicy = 'no-referrer';
img.loading = 'eager';
img.src = url;
let settled = false;
img.onload = () => {
if (settled) return;
settled = true;
if (img.naturalWidth < MIN_THUMB_SIZE ||
img.naturalHeight < MIN_THUMB_SIZE) {
if (isImageType) {
this._removeItem(url);
} else {
fallback();
}
return;
}
img.classList.add('loaded');
};
img.onerror = () => {
if (settled) return;
settled = true;
if (isImageType) {
this._removeItem(url);
} else {
fallback();
}
};
thumb.appendChild(img);
} else {
fallback();
}
const info = document.createElement('div');
info.className = 'hrd-info';
const nameEl = document.createElement('div');
nameEl.className = 'hrd-name';
const tagEl = document.createElement('span');
tagEl.className = 'hrd-tag';
tagEl.dataset.kind = kind;
tagEl.textContent = TYPE_TAG_MAP[r.displayType] || r.displayType.toUpperCase();
nameEl.appendChild(tagEl);
const nameText = document.createElement('span');
nameText.className = 'hrd-name-text';
nameText.textContent = r.filename;
nameText.title = r.filename;
nameEl.appendChild(nameText);
info.appendChild(nameEl);
const urlEl = document.createElement('div');
urlEl.className = 'hrd-url';
urlEl.textContent = displayUrl(r.url);
info.appendChild(urlEl);
const acts = document.createElement('div');
acts.className = 'hrd-acts';
const copyBtn = document.createElement('button');
copyBtn.className = 'hrd-btn';
copyBtn.title = '复制链接';
copyBtn.innerHTML = Icons.copy;
copyBtn.onclick = e => { e.stopPropagation(); this.copy(r.url); };
acts.appendChild(copyBtn);
if (r.filterType === 'media') {
const playBtn = document.createElement('button');
playBtn.className = 'hrd-btn';
playBtn.title = '播放';
playBtn.innerHTML = Icons.play;
playBtn.onclick = e => { e.stopPropagation(); this.play(r); };
acts.appendChild(playBtn);
}
const dlBtn = document.createElement('button');
dlBtn.className = 'hrd-btn';
dlBtn.title = '下载';
dlBtn.innerHTML = Icons.download;
dlBtn.onclick = e => { e.stopPropagation(); this.download(r); };
acts.appendChild(dlBtn);
el.appendChild(thumb);
el.appendChild(info);
el.appendChild(acts);
el.onclick = () => {
if (r.filterType === 'image') this.previewImage(r.url);
else if (r.filterType === 'media') this.play(r);
};
return el;
},
_iconFor(displayType) {
const kind = TYPE_ICON_MAP[displayType] || 'doc';
const map = {
image: Icons.image, video: Icons.video, audio: Icons.audio,
code: Icons.code, json: Icons.json, font: Icons.font,
link: Icons.link, doc: Icons.doc
};
return map[kind] || Icons.doc;
},
_bindSwipe() {
if (this._swipeBound) return;
const el = this.list;
if (!el) return;
this._swipeBound = true;
let startX = 0, startY = 0, startT = 0;
let tracking = false;
let isHorizontal = false;
const onStart = (e) => {
if (e.touches.length !== 1) { tracking = false; return; }
const t = e.touches[0];
startX = t.clientX;
startY = t.clientY;
startT = Date.now();
tracking = true;
isHorizontal = false;
};
const onMove = (e) => {
if (!tracking) return;
const t = e.touches[0];
const dx = t.clientX - startX;
const dy = t.clientY - startY;
if (!isHorizontal && Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy)) {
isHorizontal = true;
}
if (isHorizontal && Math.abs(dy) > CONFIG.SWIPE_MAX_DY) {
tracking = false;
}
};
const onEnd = (e) => {
if (!tracking) return;
tracking = false;
if (!isHorizontal) return;
const t = e.changedTouches[0];
const dx = t.clientX - startX;
const dy = t.clientY - startY;
const dt = Date.now() - startT;
if (Math.abs(dx) < CONFIG.SWIPE_MIN_DX) return;
if (Math.abs(dy) > CONFIG.SWIPE_MAX_DY) return;
if (dt > CONFIG.SWIPE_MAX_TIME) return;
let curIdx = FILTER_ORDER.indexOf(Store.currentFilter);
if (curIdx < 0) curIdx = 0;
let nextIdx = curIdx;
if (dx < 0) nextIdx = Math.min(curIdx + 1, FILTER_ORDER.length - 1);
else nextIdx = Math.max(curIdx - 1, 0);
if (nextIdx === curIdx && Store.currentFilter) return;
if (Store.currentFilter === FILTER_ORDER[nextIdx]) return;
Store.currentFilter = FILTER_ORDER[nextIdx];
this.renderFilters();
this.renderList();
};
el.addEventListener('touchstart', onStart, { passive: true });
el.addEventListener('touchmove', onMove, { passive: true });
el.addEventListener('touchend', onEnd, { passive: true });
el.addEventListener('touchcancel', () => { tracking = false; }, { passive: true });
},
bindEvents() {
this.root.getElementById('hrd-fab').onclick = () => this.open();
this.root.getElementById('hrd-backdrop').onclick = () => this.close();
this.root.getElementById('hrd-close').onclick = () => this.close();
this.root.getElementById('hrd-source-btn').onclick = () => SourceView.open();
this.root.getElementById('hrd-sort').onclick = () => {
const idx = SORT_MODES.findIndex(m => m.key === Store.sortMode);
Store.sortMode = SORT_MODES[(idx + 1) % SORT_MODES.length].key;
this.updateSortIcon();
this.renderList();
};
this.root.getElementById('hrd-view').onclick = () => {
Store.viewMode = Store.viewMode === 'list' ? 'grid' : 'list';
this.updateViewIcon();
this.renderList();
};
this._keyHandler = (e) => {
if (e.key === 'Escape') {
if (this._activeOverlay === 'player') {
const player = this.root.getElementById('hrd-player');
if (player) player.remove();
this._activeOverlay = null;
this.unlockScroll();
return;
}
if (this._activeOverlay === 'preview') {
const preview = this.root.getElementById('hrd-preview');
if (preview) preview.remove();
this._activeOverlay = null;
this.unlockScroll();
return;
}
if (this._activeOverlay === 'source') {
SourceView.close();
return;
}
if (this.panel.classList.contains('on')) this.close();
}
};
document.addEventListener('keydown', this._keyHandler);
this._bindSwipe();
},
open() {
this.panel.classList.add('on');
this.root.getElementById('hrd-backdrop').classList.add('on');
this.lockScroll();
this.renderFilters();
this.renderList();
},
close() {
this.panel.classList.remove('on');
this.root.getElementById('hrd-backdrop').classList.remove('on');
this.unlockScroll();
},
lockScroll() {
if (this._scrollLocked) return;
this._scrollLocked = true;
this._savedBodyOverflow = document.body.style.overflow;
this._savedHtmlOverflow = document.documentElement.style.overflow;
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
},
unlockScroll() {
if (!this._scrollLocked) return;
this._scrollLocked = false;
document.body.style.overflow = this._savedBodyOverflow;
document.documentElement.style.overflow = this._savedHtmlOverflow;
},
toast(msg) {
const t = this.root.getElementById('hrd-toast');
if (!t || !msg) return;
t.textContent = msg;
t.classList.add('on');
clearTimeout(this._toastTimer);
this._toastTimer = setTimeout(() => t.classList.remove('on'), 1800);
},
async copy(text) {
try {
await navigator.clipboard.writeText(text);
this.toast('已复制');
} catch {
const ta = document.createElement('textarea');
ta.value = text;
ta.style.cssText = 'position:fixed;left:-9999px;opacity:0;';
document.body.appendChild(ta);
ta.select();
try { document.execCommand('copy'); this.toast('已复制'); }
catch { this.toast('复制失败'); }
document.body.removeChild(ta);
}
},
async download(r) {
this.toast('开始下载...');
try {
if (typeof GM_download === 'function') {
GM_download({
url: r.url, name: r.filename,
onload: () => this.toast('下载完成'),
onerror: () => this._browserDownload(r)
});
} else {
this._browserDownload(r);
}
} catch { this._browserDownload(r); }
},
_browserDownload(r) {
try {
const a = document.createElement('a');
a.href = r.url;
a.download = r.filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
setTimeout(() => document.body.removeChild(a), 100);
this.toast('下载已开始');
} catch {
window.open(r.url, '_blank', 'noopener,noreferrer');
this.toast('已在新标签页打开');
}
},
play(r) {
const old = this.root.getElementById('hrd-player');
if (old) old.remove();
const dt = r.displayType.toLowerCase();
const isVideo = ['mp4', 'webm', 'ogg', 'ogv', 'mov', 'm3u8', 'm4v', 'mkv', 'ts']
.includes(dt);
const p = document.createElement('div');
p.id = 'hrd-player';
const handle = document.createElement('div');
handle.className = 'hrd-sheet-handle';
p.appendChild(handle);
const hd = document.createElement('div');
hd.className = 'hd';
const ttl = document.createElement('div');
ttl.className = 'ttl';
ttl.innerHTML = `${isVideo ? Icons.video : Icons.audio}${isVideo ? '视频播放' : '音频播放'}`;
const closeBtn = document.createElement('button');
closeBtn.innerHTML = Icons.close;
closeBtn.title = '关闭';
const close = () => {
p.remove();
this._activeOverlay = null;
this.unlockScroll();
};
closeBtn.onclick = close;
hd.appendChild(ttl);
hd.appendChild(closeBtn);
const wrap = document.createElement('div');
wrap.className = 'media-wrap';
if (isVideo) {
const v = document.createElement('video');
v.src = r.url;
v.controls = true;
v.autoplay = true;
v.playsInline = true;
v.setAttribute('playsinline', '');
v.setAttribute('webkit-playsinline', '');
wrap.appendChild(v);
} else {
const a = document.createElement('audio');
a.src = r.url;
a.controls = true;
a.autoplay = true;
wrap.appendChild(a);
}
p.appendChild(hd);
p.appendChild(wrap);
this.root.appendChild(p);
this._activeOverlay = 'player';
this.lockScroll();
},
previewImage(url) {
const old = this.root.getElementById('hrd-preview');
if (old) old.remove();
const p = document.createElement('div');
p.id = 'hrd-preview';
const handle = document.createElement('div');
handle.className = 'hrd-sheet-handle';
handle.style.position = 'absolute';
handle.style.top = '8px';
handle.style.left = '50%';
handle.style.transform = 'translateX(-50%)';
handle.style.margin = '0';
const img = document.createElement('img');
img.src = url;
img.alt = '预览';
const closeBtn = document.createElement('button');
closeBtn.innerHTML = Icons.close;
p.appendChild(handle);
p.appendChild(img);
p.appendChild(closeBtn);
const close = () => {
p.remove();
this._activeOverlay = null;
this.unlockScroll();
};
closeBtn.onclick = e => { e.stopPropagation(); close(); };
p.onclick = e => { if (e.target === p) close(); };
this.root.appendChild(p);
this._activeOverlay = 'preview';
this.lockScroll();
}
};
const SourceView = {
_html: '',
_wrap: true,
_el: null,
_lines: null,
open() {
const old = UI.root.getElementById('hrd-source-panel');
if (old) old.remove();
const p = document.createElement('div');
p.id = 'hrd-source-panel';
if (this._wrap) p.classList.add('wrap');
const handle = document.createElement('div');
handle.className = 'hrd-sheet-handle';
p.appendChild(handle);
const hd = document.createElement('div');
hd.className = 'hd';
const ttl = document.createElement('div');
ttl.className = 'ttl';
ttl.innerHTML = `${Icons.code}源代码`;
const wrapBtn = document.createElement('button');
wrapBtn.id = 'hrd-source-wrap';
wrapBtn.title = this._wrap ? '切换为不换行' : '切换为换行';
wrapBtn.innerHTML = this._wrap ? Icons.wrapText : Icons.noWrapText;
if (this._wrap) wrapBtn.classList.add('active');
const copyBtn = document.createElement('button');
copyBtn.id = 'hrd-source-copy';
copyBtn.title = '复制源码';
copyBtn.innerHTML = Icons.copy;
const closeBtn = document.createElement('button');
closeBtn.id = 'hrd-source-close';
closeBtn.title = '关闭';
closeBtn.innerHTML = Icons.close;
hd.appendChild(ttl);
hd.appendChild(wrapBtn);
hd.appendChild(copyBtn);
hd.appendChild(closeBtn);
p.appendChild(hd);
const container = document.createElement('div');
container.className = 'src-container';
const codeEl = document.createElement('div');
codeEl.className = 'src-code';
container.appendChild(codeEl);
p.appendChild(container);
UI.root.appendChild(p);
this._el = p;
let html = '';
try {
const dt = document.doctype;
let doctypeStr = '';
if (dt) {
let dtName = dt.name || 'html';
let dtPublic = dt.publicId ? ` PUBLIC "${dt.publicId}"` : '';
let dtSystem = dt.systemId ? ` "${dt.systemId}"` : '';
doctypeStr = `\n`;
}
html = doctypeStr + document.documentElement.outerHTML;
} catch (e) {
html = '';
}
this._html = html;
const lines = buildHighlightedLines(html);
this._lines = lines;
const metaEl = p.querySelector('#hrd-source-meta');
if (metaEl) metaEl.textContent = `· ${lines.length} 行`;
renderSourceLinesChunked(codeEl, lines);
wrapBtn.onclick = () => {
const st = container.scrollTop;
const sl = container.scrollLeft;
this._wrap = !this._wrap;
p.classList.toggle('wrap', this._wrap);
wrapBtn.innerHTML = this._wrap ? Icons.wrapText : Icons.noWrapText;
wrapBtn.title = this._wrap ? '切换为不换行' : '切换为换行';
wrapBtn.classList.toggle('active', this._wrap);
requestAnimationFrame(() => {
container.scrollTop = st;
if (!this._wrap) container.scrollLeft = sl;
});
};
copyBtn.onclick = async () => {
const done = () => {
UI.toast('源码已复制');
copyBtn.innerHTML = Icons.check;
copyBtn.classList.add('active');
setTimeout(() => {
copyBtn.innerHTML = Icons.copy;
copyBtn.classList.remove('active');
}, 1200);
};
try {
await navigator.clipboard.writeText(this._html);
done();
} catch {
const ta = document.createElement('textarea');
ta.value = this._html;
ta.style.cssText = 'position:fixed;left:-9999px;opacity:0;';
document.body.appendChild(ta);
ta.select();
try { document.execCommand('copy'); done(); }
catch { UI.toast('复制失败'); }
document.body.removeChild(ta);
}
};
closeBtn.onclick = () => this.close();
UI._activeOverlay = 'source';
UI.lockScroll();
},
close() {
const p = UI.root.getElementById('hrd-source-panel');
if (p) p.remove();
UI._activeOverlay = null;
UI.unlockScroll();
}
};
function displayUrl(url) {
if (url.length <= 90) return url;
return url.slice(0, 45) + ' … ' + url.slice(-40);
}
const Capture = {
_reported: {},
_processedSheets: new WeakSet(),
_scanTimer: null,
_observer: null,
report(url, ct, it) {
if (!url || !Security.isSafe(url)) return;
if (Security.isInvalid(url)) return;
const k = url.split('#')[0];
if (this._reported[k]) return;
this._reported[k] = true;
Store.add(url, ct, it);
},
interceptFetch() {
const orig = window.fetch;
window.fetch = function (input, init) {
const url = typeof input === 'string' ? input : (input && input.url);
const p = orig.apply(this, arguments);
if (url && Security.isSafe(url)) {
p.then(resp => {
try {
Capture.report(resp.url || url,
resp.headers.get('content-type') || '', 'fetch');
} catch {}
}).catch(() => {});
}
return p;
};
},
interceptXHR() {
const oOpen = XMLHttpRequest.prototype.open;
const oSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.open = function (m, url) {
this._hrdUrl = url;
return oOpen.apply(this, arguments);
};
XMLHttpRequest.prototype.send = function () {
const self = this;
if (self._hrdUrl && Security.isSafe(self._hrdUrl)) {
self.addEventListener('loadend', function () {
try {
Capture.report(self.responseURL || self._hrdUrl,
self.getResponseHeader('content-type') || '', 'xhr');
} catch {}
});
}
return oSend.apply(this, arguments);
};
},
scanElement(el) {
if (!el || el.nodeType !== 1) return;
const tag = (el.tagName || '').toLowerCase();
const p = (u, ct, it) => { if (u) Capture.report(String(u).trim(), ct, it); };
if (tag === 'img') {
const w = parseInt(el.getAttribute('width') || '0', 10);
const h = parseInt(el.getAttribute('height') || '0', 10);
if ((w > 0 && w < MIN_THUMB_SIZE) || (h > 0 && h < MIN_THUMB_SIZE)) return;
p(el.currentSrc || el.src, 'image', 'scan');
if (el.srcset) {
el.srcset.split(',').forEach(s =>
p(s.trim().split(/\s+/)[0], 'image', 'srcset'));
}
} else if (tag === 'video') {
p(el.src, 'video', 'scan');
p(el.poster, 'image', 'poster');
el.querySelectorAll('source').forEach(s =>
p(s.src, s.getAttribute('type') || 'video', 'source'));
} else if (tag === 'audio') {
p(el.src, 'audio', 'scan');
} else if (tag === 'source') {
p(el.src, '', 'scan');
if (el.srcset) {
el.srcset.split(',').forEach(s =>
p(s.trim().split(/\s+/)[0], '', 'srcset'));
}
} else if (tag === 'link') {
const rel = (el.rel || '').toLowerCase();
if (['stylesheet', 'icon', 'shortcut icon', 'apple-touch-icon',
'preload', 'prefetch', 'manifest'].includes(rel)) {
p(el.href, '', 'link');
}
} else if (tag === 'script') {
p(el.src, '', 'scan');
} else if (tag === 'iframe') {
p(el.src, '', 'iframe');
} else if (tag === 'object' || tag === 'embed') {
p(el.data, '', 'scan');
p(el.src, '', 'scan');
}
const style = el.getAttribute && el.getAttribute('style');
if (style && style.indexOf('url(') >= 0) {
for (const m of style.matchAll(/url\(\s*['"]?([^'")]+)['"]?\s*\)/g)) {
p(m[1], 'image', 'bg');
}
}
['data-src', 'data-original', 'data-lazy-src', 'data-bg',
'data-poster', 'data-video', 'data-media'].forEach(a => {
const v = el.getAttribute && el.getAttribute(a);
if (!v) return;
if (/srcset|bgset/i.test(a)) {
v.split(',').forEach(s =>
p(s.trim().split(/\s+/)[0], 'image', 'lazy'));
} else if (/video|media/i.test(a)) {
p(v, 'video', 'lazy');
} else {
p(v, 'image', 'lazy');
}
});
},
scanStyleSheets() {
try {
for (const sheet of document.styleSheets) {
if (this._processedSheets.has(sheet)) continue;
let rules;
try { rules = sheet.cssRules || sheet.rules; } catch { continue; }
if (!rules || rules.length === 0) continue;
this._processedSheets.add(sheet);
for (const rule of rules) {
if (rule.style) {
for (let i = 0; i < rule.style.length; i++) {
const val = rule.style.getPropertyValue(rule.style[i]);
if (val && val.indexOf('url(') >= 0) {
for (const m of val.matchAll(/url\(\s*['"]?([^'")]+)['"]?\s*\)/g)) {
this.report(m[1], 'image', 'css');
}
}
}
}
}
}
} catch {}
},
scanShadowRoots(root, depth) {
if (!root || depth > 5) return;
try {
const all = root.querySelectorAll('*');
for (const el of all) {
if (el.shadowRoot) {
const inner = el.shadowRoot
.querySelectorAll('img,video,audio,source,link,script');
inner.forEach(e => Capture.scanElement(e));
this.scanShadowRoots(el.shadowRoot, depth + 1);
}
}
} catch {}
},
fullScan() {
if (!document.body) return;
document.querySelectorAll('img,video,audio,source,link,script,iframe')
.forEach(el => Capture.scanElement(el));
this.scanStyleSheets();
this.scanShadowRoots(document.body, 0);
},
start() {
this.interceptFetch();
this.interceptXHR();
this.fullScan();
const obs = new MutationObserver(muts => {
for (const m of muts) {
for (const n of m.addedNodes) {
if (n.nodeType !== 1) continue;
Capture.scanElement(n);
if (n.querySelectorAll) {
n.querySelectorAll('img,video,audio,source,link,script,iframe')
.forEach(e => Capture.scanElement(e));
}
}
}
});
if (document.body) {
obs.observe(document.body, { childList: true, subtree: true });
} else {
document.addEventListener('DOMContentLoaded', () => {
Capture.fullScan();
obs.observe(document.body, { childList: true, subtree: true });
});
}
this._scanTimer = setInterval(() => Capture.fullScan(),
CONFIG.FULL_SCAN_INTERVAL);
const oPush = history.pushState;
history.pushState = function () {
oPush.apply(this, arguments);
setTimeout(() => Capture.fullScan(), 500);
};
const oReplace = history.replaceState;
history.replaceState = function () {
oReplace.apply(this, arguments);
setTimeout(() => Capture.fullScan(), 500);
};
window.addEventListener('popstate', () =>
setTimeout(() => Capture.fullScan(), 500));
this._observer = obs;
window.addEventListener('beforeunload', () => {
if (Capture._scanTimer) clearInterval(Capture._scanTimer);
if (Capture._observer) Capture._observer.disconnect();
Theme.destroy();
});
}
};
function boot() {
if (!document.body) { setTimeout(boot, 200); return; }
UI.init();
Theme.init();
SafeArea.init();
Capture.start();
setTimeout(() => Theme.apply(), 300);
setTimeout(() => Theme.apply(), 1500);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', boot);
} else {
boot();
}
})();