javascript - 在 Google Chrome 扩展程序中需要外部 JavaScript

Question

我想在“内容脚本”Google Chrome 扩展程序中使用“YouTube iframe API”。我应该如何在我的扩展程序中要求 Youtube iframe API？

Youtube iFrame API 的 URL:https://www.youtube.com/iframe_api 。

您通常在 list 文件中包含 Google Chrome 扩展程序中的脚本，但是 Chrome 的扩展程序页面会抛出错误，因为 URL 不以 .js 结尾。

此外，该 URL 处的脚本似乎尝试注入(inject) <script>标签，它不能与 content_script 插件一起使用，因为它无法访问页面的 javascript。

ma​​nifest.json

{
    ...
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["main.js"],
            "all_frames": true
        }
    ]
}

ma​​in.js

// Inject the script, but this won't work since content scripts can't access the page's javascript (which is where this script is injected).
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";

(document.head || document.documentElement).appendChild(tag);


// Create our own player
var player;

var videoID = 'e7Px2yJA6S4';

// When the YouTube API is loaded, it calls this function.
function onYouTubeIframeAPIReady() {
  player = new YT.Player('movie_player', {
    height: '390',
    width: '640',
    videoId: videoID,
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

我应该采取哪些不同的做法？如何正确包含此脚本？

Answer 1

Rob W 的回答涵盖了这种情况:Insert code into the page context using a content script ，参见方法1和方法2。

一般来说，因为内容脚本在 isolated word 中执行，如果您将 youtube api 包含为 <script>标签(在网页世界中)在内容脚本(在孤立世界中)中初始化 youtube 播放器时，由于内容脚本和 <script> ，它将失败。标签不能访问彼此定义的变量/函数。

一种解决方法是通过 <script> 注入(inject)这些代码标签，请参阅以下示例。

list .json

{
    ...
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["inject.js"],
            "all_frames": true
        }
    ],
    "web_accessible_resources": ["https://www.youtube.com/player_api"]
}

注入(inject).js

function insertScriptFile(callback) {
    // Inject the script
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    tag.onload = function () {
        callback();
    };
   (document.head || document.documentElement).appendChild(tag);
}

function insertEmmedCode() {
    var actualCode = `// 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
`;

    var script = document.createElement('script');
    script.textContent = actualCode;
    (document.head || document.documentElement).appendChild(script);
}

var div = document.createElement("div");
div.id = "player";
document.body.appendChild(div);

insertScriptFile(function () {
    insertEmmedCode();
});