// ==UserScript== // @name Meta 社交媒體音量控制大師 (FB, IG, Threads) // @name:zh-TW Meta 社交媒體音量控制大師 (FB, IG, Threads) // @name:zh-CN Meta 社交媒体音量控制大师 (FB, IG, Threads) // @name:en Meta Media Volume Master (FB, IG, Threads) // @name:ja Meta メディア音量マスター (FB, IG, Threads) // @namespace http://tampermonkey.net/ // @version 10.0 // @description 將 Meta 平台的影片預設音量設定為 10%，並在影片上增加一個方便調整音量的滑桿介面。 // @description:zh-TW 將 Meta 平台的影片預設音量設定為 10%，並在影片上增加一個方便調整音量的滑桿介面。 // @description:zh-CN 将 Meta 平台的视频默认音量设置为 10%，并在视频上增加一个方便调整音量的滑块界面。 // @description:en Sets the default volume of videos on Meta platforms (FB, IG, Threads) to 10% and adds a convenient volume slider overlay. // @description:ja Metaプラットフォーム（FB、IG、Threads）の動画のデフォルト音量を10％に設定し、音量を調整しやすいスライダーオーバーレイを追加します。 // @author You // @match *://*.facebook.com/* // @match *://*.instagram.com/* // @match *://*.threads.net/* // @grant none // @run-at document-start // @downloadURL none // ==/UserScript== (function() { 'use strict'; // ========================================================== // 設定區域 // ========================================================== const CONFIG = { defaultVolume: 0.1, // 預設音量 10% showLogs: true, // 是否顯示除錯紀錄 ui: { opacityIdle: 0.3, // 平常的透明度 (0~1) opacityHover: 1.0, // 滑鼠移上去的透明度 positionTop: '10px', positionRight: '10px', // 靠右設定 color: '#ffffff', // 文字與圖示顏色 bgColor: 'rgba(0, 0, 0, 0.6)' // 背景顏色 } }; // ========================================================== function log(msg) { if (CONFIG.showLogs) { console.log(`[音量控制] ${msg}`); } } // 注入 CSS 樣式 function injectStyles() { const styleId = 'meta-volume-fixer-style'; if (document.getElementById(styleId)) return; const css = ` .mvf-overlay { position: absolute; top: ${CONFIG.ui.positionTop}; right: ${CONFIG.ui.positionRight}; z-index: 9999; background-color: ${CONFIG.ui.bgColor}; padding: 4px 8px; border-radius: 20px; display: flex; align-items: center; gap: 8px; opacity: ${CONFIG.ui.opacityIdle}; transition: opacity 0.2s ease; font-family: system-ui, -apple-system, sans-serif; pointer-events: auto; /* 確保可以點擊 */ cursor: default; } .mvf-overlay:hover { opacity: ${CONFIG.ui.opacityHover}; } .mvf-slider { -webkit-appearance: none; width: 80px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; outline: none; cursor: pointer; } .mvf-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer; transition: transform 0.1s; } .mvf-slider::-webkit-slider-thumb:hover { transform: scale(1.2); } .mvf-text { color: ${CONFIG.ui.color}; font-size: 12px; font-weight: bold; min-width: 32px; text-align: right; user-select: none; } `; const style = document.createElement('style'); style.id = styleId; style.textContent = css; document.head.appendChild(style); } /** * 建立音量控制 UI * @param {HTMLVideoElement} video */ function createVolumeUI(video) { const parent = video.parentNode; // 查找是否已經有 UI (避免重複添加) let container = parent.querySelector('.mvf-overlay'); // 如果 UI 不存在，則建立 if (!container) { // 確保父層容器有定位屬性 const parentStyle = window.getComputedStyle(parent); if (parentStyle.position === 'static') { parent.style.position = 'relative'; } container = document.createElement('div'); container.className = 'mvf-overlay'; // 阻擋事件冒泡 container.addEventListener('click', (e) => e.stopPropagation()); container.addEventListener('dblclick', (e) => e.stopPropagation()); container.addEventListener('mousedown', (e) => e.stopPropagation()); container.addEventListener('touchstart', (e) => e.stopPropagation()); const slider = document.createElement('input'); slider.type = 'range'; slider.className = 'mvf-slider'; slider.min = '0'; slider.max = '1'; slider.step = '0.01'; const text = document.createElement('span'); text.className = 'mvf-text'; container.appendChild(slider); container.appendChild(text); parent.appendChild(container); // 綁定滑桿事件 slider.addEventListener('input', (e) => { const val = parseFloat(e.target.value); video.volume = val; text.textContent = Math.round(val * 100) + '%'; video.dataset.userManualSet = 'true'; video.dataset.userMaxVolume = (val === 1) ? 'true' : 'false'; }); } // 更新 UI 狀態以符合影片當前音量 (無論是新建立還是既有的) const slider = container.querySelector('.mvf-slider'); const text = container.querySelector('.mvf-text'); if (slider && text) { slider.value = video.volume; text.textContent = Math.round(video.volume * 100) + '%'; } } /** * 設定單個影片元素的音量與 UI * @param {HTMLVideoElement} videoElement */ function adjustVolume(videoElement) { // 1. 初始化設定 (初次發現或重複使用時) if (!videoElement.dataset.mvfInitialized) { videoElement.dataset.mvfInitialized = 'true'; // 初始音量設定 videoElement.volume = CONFIG.defaultVolume; videoElement.dataset.volumeAdjusted = 'true'; // 監聽：音量變化 (同步 UI + 防爆音) videoElement.addEventListener('volumechange', () => { // 同步 UI const parent = videoElement.parentNode; const slider = parent.querySelector('.mvf-slider'); const text = parent.querySelector('.mvf-text'); if (slider && text) { slider.value = videoElement.volume; text.textContent = Math.round(videoElement.volume * 100) + '%'; } // 防爆音邏輯 if (videoElement.volume === 1 && videoElement.dataset.userMaxVolume !== 'true') { videoElement.volume = CONFIG.defaultVolume; log('攔截到網站嘗試將音量重置為 100%，已駁回。'); } }); // 監聽：影片來源載入 (關鍵：處理動態牆影片回收機制) videoElement.addEventListener('loadstart', () => { log('偵測到影片來源變更 (Recycle/Loadstart)，重置狀態。'); // 重置所有使用者手動標記，因為這是一部新影片 videoElement.dataset.userManualSet = 'false'; videoElement.dataset.userMaxVolume = 'false'; // 強制將音量設回預設值 // 使用 setTimeout 確保在瀏覽器預設行為之後執行 setTimeout(() => { videoElement.volume = CONFIG.defaultVolume; createVolumeUI(videoElement); // 確保 UI 數值同步 }, 0); }); } // 2. 確保 UI 存在並更新 createVolumeUI(videoElement); } /** * 處理頁面上現有的和未來新增的影片 */ function observePage() { injectStyles(); // 1. 建立 MutationObserver const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { mutation.addedNodes.forEach((node) => { if (node.nodeName === 'VIDEO') { adjustVolume(node); } else if (node.nodeType === 1) { const videos = node.querySelectorAll('video'); videos.forEach(adjustVolume); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); // 2. 處理現有影片 document.querySelectorAll('video').forEach(adjustVolume); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', observePage); } else { observePage(); } })();