切换 Iwara 视频播放器宽度 (带调试日志)
// ==UserScript==
// @name Iwara Video Player Width Switch (Debug)
// @namespace http://tampermonkey.net/
// @version 2026-03-01
// @description 切换 Iwara 视频播放器宽度 (带调试日志)
// @author detaLee
// @match *://*.iwara.tv/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=iwara.tv
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const SCRIPT_NAME = '[IwaraToggler]';
// 定义样式
const btnStyle = `
<style>
#iwara-width-toggle-btn {
margin-left: 10px;
padding: 2px 8px;
font-size: 0.8em;
vertical-align: middle;
cursor: pointer;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
transition: all 0.2s;
}
#iwara-width-toggle-btn:hover {
background-color: #e0e0e0;
}
#iwara-width-toggle-btn.active {
background-color: #007bff;
color: white;
border-color: #0056b3;
}
</style>
`;
// 注入样式
document.head.insertAdjacentHTML('beforeend', btnStyle);
console.log(`${SCRIPT_NAME} 样式已注入`);
let isWideMode = false;
let toggleBtn = null;
let targetContainer = null;
function createButton() {
if (toggleBtn) {
console.log(`${SCRIPT_NAME} 按钮已存在，跳过创建`);
return toggleBtn;
}
console.log(`${SCRIPT_NAME} 正在创建按钮...`);
toggleBtn = document.createElement('button');
toggleBtn.id = 'iwara-width-toggle-btn';
toggleBtn.textContent = '<=>';
toggleBtn.addEventListener('click', function() {
console.log(`${SCRIPT_NAME} >>> 按钮被点击！当前模式：${isWideMode ? '宽屏' : '普通'}`);
if (!targetContainer) {
console.error(`${SCRIPT_NAME} [错误] 未找到目标容器元素 (.col-md-9)，无法切换！`);
alert('错误：未找到播放器容器，请检查页面结构或刷新重试。');
return;
}
isWideMode = !isWideMode;
const currentClasses = Array.from(targetContainer.classList).join(', ');
console.log(`${SCRIPT_NAME} 切换前类名: [${currentClasses}]`);
if (isWideMode) {
// 切换到宽屏模式
console.log(`${SCRIPT_NAME} 执行操作：移除 col-md-9, 添加 col-md-12`);
targetContainer.classList.remove('col-md-9');
targetContainer.classList.add('col-md-12');
toggleBtn.textContent = '>=<';
toggleBtn.classList.add('active');
console.log(`${SCRIPT_NAME} <<< 已切换至宽屏模式 (col-md-12)`);
} else {
// 还原模式
console.log(`${SCRIPT_NAME} 执行操作：移除 col-md-12, 添加 col-md-9`);
targetContainer.classList.remove('col-md-12');
targetContainer.classList.add('col-md-9');
toggleBtn.textContent = '<=>';
toggleBtn.classList.remove('active');
console.log(`${SCRIPT_NAME} <<< 已还原至普通模式 (col-md-9)`);
}
const newClasses = Array.from(targetContainer.classList).join(', ');
console.log(`${SCRIPT_NAME} 切换后类名: [${newClasses}]`);
});
console.log(`${SCRIPT_NAME} 按钮创建完成`);
return toggleBtn;
}
function init() {
console.group(`${SCRIPT_NAME} 尝试初始化...`);
// 1. 查找标题元素
const titleSelector = 'div.page.page-video div.page-video__details > div.text.mb-1.text--h1';
const titleElement = document.querySelector(titleSelector);
if (!titleElement) {
console.warn(`${SCRIPT_NAME} 未找到标题元素 (${titleSelector})，等待页面加载...`);
console.groupEnd();
return;
}
console.log(`${SCRIPT_NAME} [成功] 找到标题元素:`, titleElement);
// 2. 检查按钮是否已存在
if (document.getElementById('iwara-width-toggle-btn')) {
console.log(`${SCRIPT_NAME} 按钮已存在于页面中，初始化结束。`);
console.groupEnd();
return;
}
// 3. 查找目标容器 (.page-video__player 的父级)
const playerElement = document.querySelector('.page-video__player');
if (!playerElement) {
console.warn(`${SCRIPT_NAME} 未找到播放器元素 (.page-video__player)，等待页面加载...`);
console.groupEnd();
return;
}
console.log(`${SCRIPT_NAME} [成功] 找到播放器元素:`, playerElement);
const parent = playerElement.parentElement;
if (!parent) {
console.error(`${SCRIPT_NAME} [错误] 播放器元素没有父节点！`);
console.groupEnd();
return;
}
// 验证父节点类名
const hasCol12 = parent.classList.contains('col-12');
const hasColMd9 = parent.classList.contains('col-md-9');
console.log(`${SCRIPT_NAME} 父节点类名检查: col-12=${hasCol12}, col-md-9=${hasColMd9}`);
console.log(`${SCRIPT_NAME} 父节点完整类名:`, Array.from(parent.classList).join(' '));
if (hasCol12 && hasColMd9) {
targetContainer = parent;
console.log(`${SCRIPT_NAME} [成功] 锁定目标容器:`, targetContainer);
} else {
console.error(`${SCRIPT_NAME} [错误] 父节点不符合预期 (需要同时包含 col-12 和 col-md-9)。可能是网站更新了结构。`);
console.groupEnd();
return;
}
// 4. 创建并插入按钮
const btn = createButton();
titleElement.appendChild(btn);
console.log(`${SCRIPT_NAME} [完成] 按钮已插入到标题后方。`);
console.groupEnd();
}
// 设置 MutationObserver
const observer = new MutationObserver((mutations) => {
// 如果按钮已经存在且目标容器还在文档中，则忽略本次变动，避免重复日志
if (document.getElementById('iwara-width-toggle-btn') && targetContainer && document.contains(targetContainer)) {
return;
}
// 只有当关键元素缺失时才尝试重新初始化，减少日志噪音
const titleExists = document.querySelector('div.page.page-video div.page-video__details > div.text.mb-1.text--h1');
const playerExists = document.querySelector('.page-video__player');
if (titleExists && playerExists) {
// 只有当元素出现但脚本还没完全初始化时才运行
if (!targetContainer || !document.getElementById('iwara-width-toggle-btn')) {
console.log(`${SCRIPT_NAME} [Observer] 检测到 DOM 变化，关键元素已就绪，触发初始化...`);
init();
}
}
});
// 开始观察
if (document.body) {
observer.observe(document.body, {
childList: true,
subtree: true
});
console.log(`${SCRIPT_NAME} 观察者已启动，监听 document.body 变化。`);
} else {
console.warn(`${SCRIPT_NAME} 文档 body 尚未加载，等待 DOMContentLoaded...`);
document.addEventListener('DOMContentLoaded', () => {
observer.observe(document.body, { childList: true, subtree: true });
console.log(`${SCRIPT_NAME} 观察者已在 DOMContentLoaded 后启动。`);
init();
});
}
// 初始尝试
console.log(`${SCRIPT_NAME} 脚本开始执行 (ReadyState: ${document.readyState})`);
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();