content.js
· 3.4 KiB · JavaScript
Raw
// 函数:将视频元素设置为覆盖整个窗口
function makeVideoFullWindow(video) {
console.log('Making video full window.');
// 设置视频的样式,使其占据整个页面
video.style.position = 'fixed';
video.style.top = '0';
video.style.left = '0';
video.style.width = '100vw';
video.style.height = '100vh';
video.style.zIndex = '9999'; // 保证视频位于所有元素上方
video.style.backgroundColor = 'black'; // 确保背景为黑色,避免干扰
// 隐藏滚动条
document.documentElement.style.overflow = 'hidden';
document.querySelectorAll('.nav_wrapper_bg.newtopbz').forEach(element => {
element.remove();
})
document.querySelectorAll('.header_nav.newtopbzTV').forEach(element => {
element.remove();
})
document.querySelectorAll('.phone').forEach(element => {
element.remove();
})
console.log('Video is now fullscreen-like.');
}
// 函数:恢复视频原始状态
function resetVideo(video) {
console.log('Resetting video to original state.');
// 恢复视频的样式
video.style.position = '';
video.style.top = '';
video.style.left = '';
video.style.width = '';
video.style.height = '';
video.style.zIndex = '';
video.style.backgroundColor = '';
// 恢复滚动条
document.documentElement.style.overflow = '';
}
// 监听页面上所有的 <video> 元素
function setupVideoListeners() {
const videos = document.querySelectorAll('video');
console.log(`Found ${videos.length} video(s) on the page.`);
videos.forEach(video => {
video.addEventListener('play', () => {
console.log('Video started playing, making it full window.');
makeVideoFullWindow(video);
// 当视频暂停或结束时,恢复原始状态
video.addEventListener('pause', () => resetVideo(video), { once: true });
video.addEventListener('ended', () => resetVideo(video), { once: true });
});
});
}
// 页面加载时,设置视频监听器
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM fully loaded and parsed, setting up video listeners.');
setupVideoListeners();
});
// 动态加载的视频元素也需要监听,观察DOM变化
const observer = new MutationObserver(() => {
console.log('DOM mutations detected, checking for new videos.');
setupVideoListeners();
});
observer.observe(document.body, { childList: true, subtree: true });
// 换台模块
document.addEventListener("keydown", (event) => {
const channelLinks = Array.from(document.querySelectorAll("dl > dt > a"));
let currentChannelIndex = channelLinks.findIndex(link => link.parentElement.parentElement.classList.contains("active"));
if (currentChannelIndex === -1) return; // Exit if no active channel found
if (event.key === "ArrowLeft") {
// Go to the previous channel
currentChannelIndex = (currentChannelIndex - 1 + channelLinks.length) % channelLinks.length;
} else if (event.key === "ArrowRight") {
// Go to the next channel
currentChannelIndex = (currentChannelIndex + 1) % channelLinks.length;
} else {
return; // Ignore other keys
}
// Set the active class on the new channel and redirect to its link
document.querySelector(".active")?.classList.remove("active");
const newChannel = channelLinks[currentChannelIndex];
newChannel.parentElement.parentElement.classList.add("active");
window.location.href = newChannel.href; // Redirect to the new channel
});
1 | // 函数:将视频元素设置为覆盖整个窗口 |
2 | function makeVideoFullWindow(video) { |
3 | console.log('Making video full window.'); |
4 | |
5 | // 设置视频的样式,使其占据整个页面 |
6 | video.style.position = 'fixed'; |
7 | video.style.top = '0'; |
8 | video.style.left = '0'; |
9 | video.style.width = '100vw'; |
10 | video.style.height = '100vh'; |
11 | video.style.zIndex = '9999'; // 保证视频位于所有元素上方 |
12 | video.style.backgroundColor = 'black'; // 确保背景为黑色,避免干扰 |
13 | |
14 | // 隐藏滚动条 |
15 | document.documentElement.style.overflow = 'hidden'; |
16 | |
17 | document.querySelectorAll('.nav_wrapper_bg.newtopbz').forEach(element => { |
18 | element.remove(); |
19 | }) |
20 | document.querySelectorAll('.header_nav.newtopbzTV').forEach(element => { |
21 | element.remove(); |
22 | }) |
23 | document.querySelectorAll('.phone').forEach(element => { |
24 | element.remove(); |
25 | }) |
26 | |
27 | console.log('Video is now fullscreen-like.'); |
28 | } |
29 | |
30 | // 函数:恢复视频原始状态 |
31 | function resetVideo(video) { |
32 | console.log('Resetting video to original state.'); |
33 | |
34 | // 恢复视频的样式 |
35 | video.style.position = ''; |
36 | video.style.top = ''; |
37 | video.style.left = ''; |
38 | video.style.width = ''; |
39 | video.style.height = ''; |
40 | video.style.zIndex = ''; |
41 | video.style.backgroundColor = ''; |
42 | |
43 | // 恢复滚动条 |
44 | document.documentElement.style.overflow = ''; |
45 | } |
46 | |
47 | // 监听页面上所有的 <video> 元素 |
48 | function setupVideoListeners() { |
49 | const videos = document.querySelectorAll('video'); |
50 | console.log(`Found ${videos.length} video(s) on the page.`); |
51 | |
52 | videos.forEach(video => { |
53 | video.addEventListener('play', () => { |
54 | console.log('Video started playing, making it full window.'); |
55 | makeVideoFullWindow(video); |
56 | |
57 | // 当视频暂停或结束时,恢复原始状态 |
58 | video.addEventListener('pause', () => resetVideo(video), { once: true }); |
59 | video.addEventListener('ended', () => resetVideo(video), { once: true }); |
60 | }); |
61 | }); |
62 | } |
63 | |
64 | // 页面加载时,设置视频监听器 |
65 | document.addEventListener('DOMContentLoaded', () => { |
66 | console.log('DOM fully loaded and parsed, setting up video listeners.'); |
67 | setupVideoListeners(); |
68 | }); |
69 | |
70 | // 动态加载的视频元素也需要监听,观察DOM变化 |
71 | const observer = new MutationObserver(() => { |
72 | console.log('DOM mutations detected, checking for new videos.'); |
73 | setupVideoListeners(); |
74 | }); |
75 | |
76 | observer.observe(document.body, { childList: true, subtree: true }); |
77 | |
78 | // 换台模块 |
79 | document.addEventListener("keydown", (event) => { |
80 | const channelLinks = Array.from(document.querySelectorAll("dl > dt > a")); |
81 | let currentChannelIndex = channelLinks.findIndex(link => link.parentElement.parentElement.classList.contains("active")); |
82 | |
83 | if (currentChannelIndex === -1) return; // Exit if no active channel found |
84 | |
85 | if (event.key === "ArrowLeft") { |
86 | // Go to the previous channel |
87 | currentChannelIndex = (currentChannelIndex - 1 + channelLinks.length) % channelLinks.length; |
88 | } else if (event.key === "ArrowRight") { |
89 | // Go to the next channel |
90 | currentChannelIndex = (currentChannelIndex + 1) % channelLinks.length; |
91 | } else { |
92 | return; // Ignore other keys |
93 | } |
94 | |
95 | // Set the active class on the new channel and redirect to its link |
96 | document.querySelector(".active")?.classList.remove("active"); |
97 | const newChannel = channelLinks[currentChannelIndex]; |
98 | newChannel.parentElement.parentElement.classList.add("active"); |
99 | window.location.href = newChannel.href; // Redirect to the new channel |
100 | }); |
101 | |
102 |
manifest.json
· 328 B · JSON
Raw
{
"manifest_version": 3,
"name": "Video Auto Fullscreen",
"version": "1.0",
"description": "Automatically fullscreen videos when they start playing.",
"permissions": [
"activeTab",
"scripting"
],
"content_scripts": [
{
"matches": ["https://tv.cctv.com/*"],
"js": ["content.js"]
}
]
}
1 | { |
2 | "manifest_version": 3, |
3 | "name": "Video Auto Fullscreen", |
4 | "version": "1.0", |
5 | "description": "Automatically fullscreen videos when they start playing.", |
6 | "permissions": [ |
7 | "activeTab", |
8 | "scripting" |
9 | ], |
10 | "content_scripts": [ |
11 | { |
12 | "matches": ["https://tv.cctv.com/*"], |
13 | "js": ["content.js"] |
14 | } |
15 | ] |
16 | } |
17 |