修改过的文件

Question

我想知道如何最好地处理Google Chrome扩展程序中没有足够权限的问题。我正在与YouTube API进行交互，但我没有使用swfobject.js，只使用了am embdeeded div。我不相信这会引入我的安全问题，但也许是。

在开发过程中，我必须导航到Adobe的Flash播放器安全页面，并将我的开发文件夹指定为“安全”位置。在部署中，我没有能力这样做。我不希望我的用户必须在Flash播放器安全性上单击“全部允许”，但我没有看到另一种方法来实现我的结果。

有没有人有这方面的经验？我有什么选择？

似乎是SWFobject in a Chrome Extension - API Unavaiable的副本，但仍然没有答案。

来源：https://github.com/MeoMix/YouPod

要运行：从回购中拉出，加载Chrome，点击扳手，转到扩展程序，查看“开发者工具” - ＆gt;加载未解压缩的扩展并浏览到该文件夹。

行动中：http://www.meomixes.com/Chrome%20Extension.crx

Answer 1

由于原始限制，您无法使用<object>元素。相反，请嵌入<iframe>并使用YouTube播放器API与相框进行通信。

将function onYouTubePlayerReady和function Initialize(playlist)替换为以下内容（background.js中）：

function Initialize(playlist) {
    port = chrome.extension.connect({ name: "statusPoller" });
    if (!player) {
        YT_ready(function() {
            var frameID = getFrameID("MusicHolder");
            if (frameID) {
                player = new YT.Player(frameID, {
                    events: {
                        "onReady": function() {
                            player.cueVideoById(playlist[0].ID, 0);
                        },
                        "onStateChange": onPlayerStateChange
                    }
                });
            }
        });
    } else {
        // Only reload if the player is not playing. Otherwise, the music
        // stops when re-opening the popup.
        if (player.getPlayerState && player.getPlayerState() != PLAYING) {
            player.cueVideoById(playlist[0].ID, 0);
        }
    }
}

要使以前的代码生效，您必须在background.htm中加载另一个脚本。 youtube-player-api-helper.js的内容基于我之前对 Listening for Youtube Event in JavaScript or jQuery 的回答：

// @description Easier way to implement the YouTube JavaScript API
// @author      Rob W
// @global      getFrameID(id) Quick way to find the iframe object which corresponds to the given ID.
// @global      YT_ready(Function:function [, Boolean:qeue_at_start])
// @global      onYouTubePlayerAPIReady()  - Used to trigger the qeued functions
// @website     https://stackoverflow.com/a/7988536/938089?listening-for-youtube-event-in-javascript-or-jquery

function getFrameID(id) {
    var elem = document.getElementById(id);
    if (elem) {
        if(/^iframe$/i.test(elem.tagName)) return id; //Frame, OK
        // else: Look for frame
        var elems = elem.getElementsByTagName("iframe");
        if (!elems.length) return null; //No iframe found, FAILURE
        for (var i=0; i<elems.length; i++) {
           if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break;
        }
        elem = elems[i]; //The only, or the best iFrame
        if (elem.id) return elem.id; //Existing ID, return it
        // else: Create a new ID
        do { //Keep postfixing `-frame` until the ID is unique
            id += "-frame";
        } while (document.getElementById(id));
        elem.id = id;
        return id;
    }
    // If no element, return null.
    return null;
}

// Define YT_ready function.
var YT_ready = (function() {
    var onReady_funcs = [], api_isReady = false;
    /* @param func function     Function to execute on ready
     * @param func Boolean      If true, all qeued functions are executed
     * @param b_before Boolean  If true, the func will added to the first
                                 position in the queue*/
    return function(func, b_before) {
        if (func === true) {
            api_isReady = true;
            for (var i=0; i<onReady_funcs.length; i++){
                // Removes the first func from the array, and execute func
                onReady_funcs.shift()();
            }
        }
        else if(typeof func == "function") {
            if (api_isReady) func();
            else onReady_funcs[b_before?"unshift":"push"](func); 
        }
    }
})();
// This function will be called when the API is fully loaded
function onYouTubePlayerAPIReady() {YT_ready(true);}

// Load YouTube Frame API
(function() { //Closure, to not leak to the scope
  var s = document.createElement("script");
  s.src = "http://www.youtube.com/player_api"; /* Load Player API*/
  var before = document.getElementsByTagName("script")[0];
  before.parentNode.insertBefore(s, before);
})();

其他变更说明（奖金）：

background.htm ：<!DOCTYPE html />无效。它应该是：<!DOCTYPE html>。
所有.htm个文件：type标记上的<script>属性是可选的。即使您想指定一个，也请使用application/javascript代替text/javascript。两者都适用于Chrome扩展程序，但第一个更正确。
popup.js ：更改了 ctrl + c 的检测。不要检测并记住是否按下了Ctrl，而是使用e.ctrlKey属性。
还有一些。请查看popup.js，然后搜索RobW:以查找我的注释。

修改过的文件

更新文件摘要（基于您的Github repo）：

YouPod/background.htm
YouPod/popup.htm （Doctype修复，评论占位符焦点的建议）
YouPod/js/background.js
YouPod/js/popup.js
YouPad/js/youtube-player-api-helper.js 新

Answer 2

就像一个抬头，我现在使用它（jQuery和requireJS参与，但更短）

//Provides an interface to the YouTube iFrame.
//Starts up Player/SongValidator object after receiving a ready response from the YouTube API.
define(['onYouTubePlayerAPIReady'],function(){
    'use strict';
    var events = {
        onApiReady: 'onApiReady'
    };

    //This code will trigger onYouTubePlayerAPIReady
    $(window).load(function(){
        $('script:first').before($('<script/>', {
            src: 'https://www.youtube.com/iframe_api'
        }));
    });

    return {
        ready: function(){
            $(this).trigger(events.onApiReady);
        },
        onApiReady: function(event){
            $(this).on(events.onApiReady, event);
        }
    };
});

//This function will be called when the API is fully loaded. Needs to be exposed globally so YouTube can call it.
var onYouTubePlayerAPIReady = function () {
    'use strict';
    require(['youtube-player-api-helper'], function(ytPlayerApiHelper){
        ytPlayerApiHelper.ready();
    });
}

使用youtubePlayerApi.onApiReady订阅活动。

部署Google Chrome扩展程序; Adobe Flash Player已停止可能不安全的操作

2 个答案:

修改过的文件