document.getElementByid 未定义

Question

我想创建我的第一个 Firefox-Addon，所以我真的很缺乏经验。 我想创建一个插件来修改 YouTube 网站。

background.js

    function editVideo() {
    document.getElementsByTagName("video")[0].playbackRate = 2;
    document.getElementById("movie_player").stopVideo();
    document.getElementById("movie_player").setPlaybackQuality('hd720');
    document.getElementById("movie_player").playVideo();
}

browser.browserAction.onClicked.addListener(editVideo);

manifest.json

{

  "description": "YouTube-Test",
  "manifest_version": 2,
  "name": "YouTube-Test",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": {
      "48": "icons/logo_48.png",
      "64": "icons/logo_64.png"
    }
  }

}

所以如果我点击按钮，播放率应该是 2，质量应该是 720p。 但是什么也没有发生！如果我直接在控制台中输入这些命令，它就可以工作。

我总是收到这个错误：

document.getElementsByTagName(...)[0] 未定义

或：

document.getElementById(...) 为空

感谢您的帮助。

Answer 1

{
  "description": "YouTube-Test",
  "manifest_version": 2,
  "name": "YouTube-Test",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
      {
          "matches": ["https://www.youtube.com/*"],
          "js": ["runsOnWebPage.js"],
          "run_at": "document_idle"
      }
  ],
  "browser_action": {
    "default_icon": {
      "48": "icons/logo_48.png",
      "64": "icons/logo_64.png"
    }
  }
}

content_scripts 中的 js 文件现在应该在 youtube 上运行，您可能需要添加更多 "matches"，因为该文件仅涵盖该特定链接，而 youtube 有大约 1000 个不同的链接