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

Question

我想知道如何最好地处理Google Chrome扩展内部没有足够权限的问题。我正在与YouTube API交互，但我没有使用swfoject.js，只是使用了am embedededdiv。我不认为这会引入我的安全问题，但也许是。

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

有人有处理这件事的经验吗？我有什么选择？

在Chrome扩展中似乎是SWFobject的重复-API不可用，但仍然没有答案。

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

要运行：从repo中提取，加载Chrome，单击扳手，转到扩展，选中"开发人员工具"->加载未包装的扩展，然后浏览到文件夹。

实际操作：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的内容基于我之前对在JavaScript或jQuery中侦听Youtube事件的回答：

// @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文件：<script>标记上的type属性是可选的。即使要指定一个，也要使用application/javascript而不是text/javascript。两者都可以在Chrome扩展中工作，但第一个更正确
• popup.js：更改了ctrl+c的检测。使用e.ctrlKey属性，而不是检测并记住是否按下了Ctrl
• 还有更多。查看popup.js，然后搜索RobW:以查找我的注释

修改后的文件

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

• 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.oapiReady.订阅活动