浏览器扩展无法控制Facebook视频播放速度的问题排查求助

核心问题分析 #

你的扩展在Facebook上失效，主要因为两个关键问题：

• 内容脚本content.js仅在页面初始加载时执行一次，但Facebook是单页应用，视频会动态加载，后续新增的视频不会被处理
• 当你在popup中设置新的播放速度后，content.js没有监听存储变化，无法自动将新速度应用到视频上

具体修复步骤 #

1. 让popup设置速度后主动通知内容脚本 #

修改popup.js，在存储速度后，向当前活跃标签页的内容脚本发送消息，触发速度更新：

document.addEventListener("DOMContentLoaded", function() {
  const form = document.getElementById("speedForm");
  const speedInput = document.getElementById("speed");

  form.addEventListener("submit", function(event) {
    event.preventDefault();
    const selectedSpeed = parseFloat(speedInput.value);
    chrome.storage.local.set({ playbackSpeed: selectedSpeed }, function() {
      // 向内容脚本发送更新速度的消息
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {action: "updateSpeed", speed: selectedSpeed});
      });
    });
  });
});

2. 改造content.js处理动态视频+监听速度更新 #

更新content.js，添加：

• MutationObserver监听页面中新增的video元素
• 监听存储变化和popup的消息，实时更新所有视频速度

console.log("Content script is running.");

// 统一设置视频速度的函数
function setAllVideoSpeeds(speed) {
  const videos = document.getElementsByTagName("video");
  for (let i = 0; i < videos.length; i++) {
    videos[i].playbackRate = speed;
    console.log("Video", i, "playback speed set to:", speed);
  }
}

// 页面加载时先应用一次存储的速度
chrome.storage.local.get(["playbackSpeed"], function(result) {
  const playbackSpeed = result.playbackSpeed || 1;
  setAllVideoSpeeds(playbackSpeed);
});

// 监听popup发送的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "updateSpeed") {
    setAllVideoSpeeds(request.speed);
  }
});

// 监听存储变化，防止其他方式修改存储后同步
chrome.storage.onChanged.addListener(function(changes, namespace) {
  if (changes.playbackSpeed) {
    setAllVideoSpeeds(changes.playbackSpeed.newValue);
  }
});

// 监听页面动态新增的video元素
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.addedNodes.length > 0) {
      // 检查新增节点里是否有video，或者包含video的元素
      mutation.addedNodes.forEach(node => {
        if (node.tagName === "VIDEO") {
          chrome.storage.local.get(["playbackSpeed"], function(result) {
            const speed = result.playbackSpeed || 1;
            node.playbackRate = speed;
          });
        } else if (node.querySelectorAll) {
          const videosInNode = node.querySelectorAll("video");
          videosInNode.forEach(video => {
            chrome.storage.local.get(["playbackSpeed"], function(result) {
              const speed = result.playbackSpeed || 1;
              video.playbackRate = speed;
            });
          });
        }
      });
    }
  });
});

// 启动观察者，监听整个文档的节点变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

3. 额外排查点 #

如果上述修改后仍无效，检查以下内容：

• 打开Facebook页面的开发者工具（F12），切换到Console面板，查看content.js的日志是否输出，确认脚本已加载
• 检查视频元素是否在shadow DOM中：在Elements面板中搜索video，看是否被包裹在shadow-root里，如果是，需要调整选择器，通过shadowRoot访问内部元素
• 确认manifest.json的matches规则正确，*://*.facebook.com/*已覆盖所有Facebook页面

内容的提问来源于stack exchange，提问作者Abderrahmane Rhiabi