Firefox插件开发求助：修改YouTube播放设置点击无反应且报错

嘿，我明白你刚开发Firefox插件的困惑——明明控制台输入命令有效，插件点击却没反应，还一直报DOM元素找不到的错。核心原因其实很简单：你的background.js根本没法直接访问网页的DOM！

后台脚本是在浏览器的独立后台环境跑的，和你打开的YouTube页面完全隔离，就像两个不互通的房间，你在后台里找网页的元素当然找不到啦。而控制台是直接在YouTube页面的上下文里运行，所以能直接操作DOM。

下面给你一步步的解决方案，照着来就行：

1. 先调整Manifest.json配置 #

首先得在manifest里声明「内容脚本」（专门用来操作网页DOM的脚本），还要申请必要的权限。这里给你一个适配的配置（如果用Manifest V2更稳妥，Firefox对V3的支持还在完善）：

{
  "manifest_version": 2,
  "name": "YouTube播放调优工具",
  "version": "1.0",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_icon": {
      "16": "icon16.png" // 记得放个图标文件，或者暂时去掉这个字段
    },
    "default_title": "一键设2倍速+720p"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/*"],
      "js": ["content.js"]
    }
  ]
}

• matches 指定脚本只注入到所有YouTube页面，避免浪费资源
• activeTab 权限让插件能操作当前打开的标签页
• content_scripts 就是告诉浏览器，把content.js注入到匹配的页面里

2. 写Content.js：专门处理DOM操作 #

创建一个content.js文件，所有和YouTube页面DOM相关的操作都放这里——因为它是在YouTube页面的上下文里运行，能直接找到元素：

// 设置2倍速
function set2xSpeed() {
  const video = document.querySelector('video');
  if (video) {
    video.playbackRate = 2;
    console.log("已设置2倍速"); // 调试用，方便看是否执行
  } else {
    console.log("找不到视频元素");
  }
}

// 设置720p画质
function set720pQuality() {
  // 先点击设置按钮打开菜单
  const settingsBtn = document.querySelector('button.ytp-settings-button');
  if (!settingsBtn) {
    console.log("找不到设置按钮");
    return;
  }
  settingsBtn.click();

  // 等菜单加载出来再找画质选项（加个小延迟很重要！）
  setTimeout(() => {
    const qualityMenu = document.querySelector('div.ytp-quality-menu');
    if (!qualityMenu) {
      console.log("找不到画质菜单");
      settingsBtn.click(); // 关闭菜单
      return;
    }

    // 遍历找到720p的选项（注意YouTube可能显示"720p"或"高清720p"，根据你的语言调整）
    const qualityOptions = qualityMenu.querySelectorAll('div.ytp-menuitem');
    for (const option of qualityOptions) {
      if (option.textContent.includes('720p')) {
        option.click();
        console.log("已设置720p画质");
        break;
      }
    }

    // 最后关闭设置菜单
    settingsBtn.click();
  }, 200); // 200毫秒足够菜单加载，要是不行可以调大一点
}

// 监听来自background的指令
browser.runtime.onMessage.addListener((message) => {
  if (message.action === 'applySettings') {
    set2xSpeed();
    set720pQuality();
  }
});

3. 修改Background.js：只做“传声筒” #

后台脚本不用再碰DOM了，它只需要监听插件按钮的点击，然后给当前标签页的content.js发消息就行：

// 监听插件按钮点击事件
browser.browserAction.onClicked.addListener((tab) => {
  // 给当前标签页的内容脚本发消息，触发设置操作
  browser.tabs.sendMessage(tab.id, { action: 'applySettings' });
});

要是你用的是Manifest V3，把browser.browserAction改成browser.action就行。

几个关键注意点 #

• 选择器要准确：YouTube的页面结构偶尔会更新，如果发现某个元素找不到，打开YouTube页面的开发者工具（F12），重新确认元素的类名或选择器。
• 延迟不能省：点击设置按钮后，菜单不是瞬间加载出来的，直接找元素肯定找不到，加个小延迟是必须的。
• 调试很重要：在content.js里加console.log，打开YouTube页面的控制台（F12），就能看到每一步是否执行，哪一步出了问题。

测试方法 #

1. 把所有文件（manifest.json、background.js、content.js、图标）放在同一个文件夹里。
2. 打开Firefox，输入about:debugging，点「This Firefox」，再点「Load Temporary Add-on...」，选文件夹里的manifest.json。
3. 打开一个YouTube视频，点击插件按钮，看看播放速率和画质有没有变化，同时打开控制台看调试信息。

这样应该就能解决你的问题啦！如果还是有问题，看看控制台的报错信息，就能定位到具体哪里出问题了。

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