Javascript 在chrome extension embedded iframe中使用YouTube数据api_Javascript_Google Chrome_Google Chrome Extension_Youtube_Youtube Data Api

Javascript 在chrome extension embedded iframe中使用YouTube数据api

javascript google-chrome google-chrome-extension youtube

Javascript 在chrome extension embedded iframe中使用YouTube数据api,javascript,google-chrome,google-chrome-extension,youtube,youtube-data-api,Javascript,Google Chrome,Google Chrome Extension,Youtube,Youtube Data Api,我正在尝试创建一个chrome扩展，将iframe添加到现有网站中，并使用YouTube数据api中的数据填充它，但是chrome扩展内容策略施加的限制使我遇到了麻烦。我当前的问题来自用户登录，我需要使用gapi来获取用户OAuth2密钥，但是看起来是这样的。是否可以在没有gapi的情况下使用YouTube数据api？或者更直接地说，是否可以让下面的代码在通过chrome扩展放置的iframe中工作？此示例来自 googleapi-示例JS页面 /*****启动样板代码：加载客户端库，授权用户

我正在尝试创建一个chrome扩展，将iframe添加到现有网站中，并使用YouTube数据api中的数据填充它，但是chrome扩展内容策略施加的限制使我遇到了麻烦。我当前的问题来自用户登录，我需要使用gapi来获取用户OAuth2密钥，但是看起来是这样的。是否可以在没有gapi的情况下使用YouTube数据api？或者更直接地说，是否可以让下面的代码在通过chrome扩展放置的iframe中工作？此示例来自

googleapi-示例JS页面
/*****启动样板代码：加载客户端库，授权用户*****/
//GoogleAuth对象、身份验证状态的全局变量。
var GoogleAuth；
/**
*加载API的客户端和auth2模块。
*加载模块后调用initClient函数。
*/
函数handleClientLoad（）{
load（'client:auth2'，initClient）；
}
函数initClient（）{
//初始化gapi.client对象，应用程序使用该对象发出API请求。
//从API控制台获取API密钥和客户端ID。
//“scope”字段指定以空格分隔的访问范围列表
gapi.client.init({
'客户ID'：'替换我'，
“discoveryDocs”：['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
'范围'：'https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/youtubepartner'
}).然后（函数（）{
GoogleAuth=gapi.auth2.getAuthInstance（）；
//侦听登录状态的更改。
GoogleAuth.isSignedIn.listen（更新Signinstatus）；
//处理初始登录状态。（确定用户是否已登录。）
设置信号状态（）；
//当用户单击“授权”按钮时，调用handleAuthClick函数。
$（“#执行请求按钮”）。单击（函数（）{
handleAuthClick（事件）；
}); 
});
}
函数handleAuthClick（事件）{
//单击“身份验证”按钮后登录用户。
GoogleAuth.sign（）；
}
函数setSignnstatus（）{
var user=GoogleAuth.currentUser.get（）；
isAuthorized=user.hasGrantedScopes（'https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/youtubepartner');
//根据当前身份验证状态切换按钮文本和显示的语句。
如果（未授权）{
定义请求（）；
}
}
函数updateSigninStatus（isSignedIn）{
设置信号状态（）；
}
函数createResource（属性）{
var资源={}；
var normalizedProps=属性；
对于（属性中的var p）{
var值=属性[p]；
如果（p&p.substr（-2，2）='[]'）{
var adjustedName=p.replace（“[]”，“”）；
如果（值）{
normalizedProps[adjustedName]=value.split（'，'）；
}
删除规范化道具[p]；
}
}
for（normalizedProps中的var p）{
//将没有值的属性保留在插入的资源之外。
if（normalizedProps.hasOwnProperty（p）和&normalizedProps[p]）{
var propArray=p.split（'.'）；
var ref=资源；
对于（var pa=0；pa


我将避免发布我的任何代码，因为它是一个完全混乱的，只会混淆任何人谁读它。我也情不自禁地觉得我走错了方向。
任何关于如何实现这一点的建议都将不胜感激。
将所有内联javascript代码移动到一个.js文件中，并使用将其包括在内。我尝试过，但不知道如何转换“异步延迟”在底部绑定到js，因为你不能用chrome内容策略做到这一点，它也不能绕过gapi不受支持的问题。
<html><head><title>Google APIs - Sample JS Page</title></head>
<body>

<script>

  /***** START BOILERPLATE CODE: Load client library, authorize user. *****/

  // Global variables for GoogleAuth object, auth status.
  var GoogleAuth;

  /**
   * Load the API's client and auth2 modules.
   * Call the initClient function after the modules load.
   */
  function handleClientLoad() {
    gapi.load('client:auth2', initClient);
  }

  function initClient() {
    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes

    gapi.client.init({
        'clientId': 'REPLACE_ME',
        'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
        'scope': 'https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/youtubepartner'
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);

      // Handle initial sign-in state. (Determine if user is already signed in.)
      setSigninStatus();

      // Call handleAuthClick function when user clicks on "Authorize" button.
      $('#execute-request-button').click(function() {
        handleAuthClick(event);
      }); 
    });
  }

  function handleAuthClick(event) {
    // Sign user in after click on auth button.
    GoogleAuth.signIn();
  }

  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    isAuthorized = user.hasGrantedScopes('https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/youtubepartner');
    // Toggle button text and displayed statement based on current auth status.
    if (isAuthorized) {
      defineRequest();
    }
  }

  function updateSigninStatus(isSignedIn) {
    setSigninStatus();
  }

  function createResource(properties) {
    var resource = {};
    var normalizedProps = properties;
    for (var p in properties) {
      var value = properties[p];
      if (p && p.substr(-2, 2) == '[]') {
        var adjustedName = p.replace('[]', '');
        if (value) {
          normalizedProps[adjustedName] = value.split(',');
        }
        delete normalizedProps[p];
      }
    }
    for (var p in normalizedProps) {
      // Leave properties that don't have values out of inserted resource.
      if (normalizedProps.hasOwnProperty(p) && normalizedProps[p]) {
        var propArray = p.split('.');
        var ref = resource;
        for (var pa = 0; pa < propArray.length; pa++) {
          var key = propArray[pa];
          if (pa == propArray.length - 1) {
            ref[key] = normalizedProps[p];
          } else {
            ref = ref[key] = ref[key] || {};
          }
        }
      };
    }
    return resource;
  }

  function removeEmptyParams(params) {
    for (var p in params) {
      if (!params[p] || params[p] == 'undefined') {
        delete params[p];
      }
    }
    return params;
  }

  function executeRequest(request) {
    request.execute(function(response) {
      console.log(response);
    });
  }

  function buildApiRequest(requestMethod, path, params, properties) {
    params = removeEmptyParams(params);
    var request;
    if (properties) {
      var resource = createResource(properties);
      request = gapi.client.request({
          'body': resource,
          'method': requestMethod,
          'path': path,
          'params': params
      });
    } else {
      request = gapi.client.request({
          'method': requestMethod,
          'path': path,
          'params': params
      });
    }
    executeRequest(request);
  }

  /***** END BOILERPLATE CODE *****/


  function defineRequest() {
    // See full sample for buildApiRequest() code, which is not 
// specific to a particular API or API method.

buildApiRequest('GET',
                '/youtube/v3/search',
                {'maxResults': '25',
                 'part': 'snippet',
                 'q': 'surfing',
                 'type': ''});

  }
</script>

<button id="execute-request-button">Authorize</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js" 
        onload="this.onload=function(){};handleClientLoad()" 
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body></html>