将 Google API Javascript 客户端库加载到 Chrome 扩展程序中答案

【问题标题】：Loading Google API Javascript Client Library into Chrome Extension将 Google API Javascript 客户端库加载到 Chrome 扩展程序中
【发布时间】：2013-09-11 23:20:03
【问题描述】：

一段时间以来，我一直在尝试将 google api javascript 客户端库与 chrome 扩展结合起来，但似乎 chrome 扩展有一个可怕的冷脚案例。脚本的链接是

https://apis.google.com/js/client.js

下载文件很麻烦，因为脚本实际上会加载其他脚本。我已经尝试将它包含在清单中

manifest.json（摘录）

"background": {
  "scripts": [
    "background.js",
    "https://apis.google.com/js/client.js?onload=callbackFunction"
  ]
},

但是扩展程序没有加载。我也尝试将脚本注入到后台 html

background.js（摘录）

 var body = document.getElementsByTagName('body')[0];
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = "https://apis.google.com/js/client.js?onload=callbackFunction";

 body.appendChild(script);

但是 chrome 调试器给了我

Refused to load the script 'https://apis.google.com/js/client.js' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

有什么想法，或者它们注定要分开吗？

编辑：请注意，如果您想使用回调函数，则必须将“?onload=myCallbackFunction”添加到脚本 url。谢谢伊利亚。更多信息here

【问题讨论】：

标签： javascript google-chrome-extension google-api-java-client

【解决方案1】：

您可以通过加载您的 background.js 的 background.html 加载它们。

<html>
 <head>
  <title></title>
  <script src="background.js"></script>
 </head>
 <body>
 </body>
 <script src="https://apis.google.com/js/client.js"></script>
</html>

使用 manifest.json：

"background":
{
 "page": "background.html"     
}, 
"content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'",

【讨论】：

【解决方案2】：

我在https://apis.google.com/js/client.js的源代码中发现了一些有趣的东西。上面写着：

gapi.load("client",{callback:window["gapi_onload"], ......

gapi.load 在网页中加载后立即调用client.js。一旦加载了gapi.client，似乎window.gapi_onload 将作为回调调用。

作为概念证明，我构建了这个 plunker：http://plnkr.co/edit/TGvzI9SMKwGM6KnFSs7U

gapi.auth 和 gapi.client 都成功打印到控制台。

返回 Chrome 扩展程序。

我把它放在我的mainfest.json的背景部分：

"background": {
  "scripts": [
    "background.js",
    "gapi-client.js"
  ]
}

其中background.js 是我的扩展程序中的主要后台脚本。 gapi-client.js的所有内容都是从https://apis.google.com/js/client.js直接复制粘贴过来的。

在background.js 里面写着：

window.gapi_onload = function(){
  console.log('gapi loaded.', gapi.auth, gapi.client);

  // Do things you want with gapi.auth and gapi.client.
}

请注意 background.js 在 gapi-client.js 之前加载。因为gapi-client.js一加载就读取window["gapi_onload"]，所以window.gapi_onload必须在此之前指定。

因此，window.gapi_onload 按预期调用，gapi.auth 和 gapi.client 均已填充。

在我的解决方案中，我没有自己创建background.html。我也没有修改内容安全策略。但是，请注意，该解决方案没有记录在案，因此将来可能会发生变化。

【讨论】：

很好的解决方案！我发现了同样的事情，但即使使用windo.gapi_onload 在模块化应用程序中也不是很舒服（我正在编写backbone.js 应用程序）。你没有找到任何有用的围绕这个 API 的包装器吗？
当我在清单中包含 gapi-client.js 时，它会尝试在 background.html 源中包含来自 apis.google.com 的第三个外部脚本。你有没有看到这个？因为这对我来说实际上是同样的错误。这是脚本的完整网址：apis.google.com/_/scs/apps-static/_/js/…
刚刚试过，对我没用。它打印undefined undefined。我认为自从发布此答案以来，客户端脚本可能已更改。第一个答案（修改 CSP）确实有效。
效果很好。初始化 gapi 后，我只需要获取 chrome 令牌并将其发送以获取用户信息。拯救了我的一天。谢谢！如果你只是复制粘贴，是的，它会返回 undefined undefined，因为你必须有一个令牌来使用它。

【解决方案3】：

我尝试按照 woojoo666 的建议添加清单文件，但仍然失败，看来我们需要再添加一个标志“unsafe-eval”：

"content_security_policy": "script-src 'self' 'unsafe-eval' https://apis.google.com; object-src 'self'",

【讨论】：

【解决方案4】：

到目前为止，我找到的唯一解决方案是首先像我一样将脚本注入后台 html 页面：

background.js（摘录）

 var head = document.getElementsByTagName('head')[0];
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = "https://apis.google.com/js/client.js?onload=callbackFunction";
 head.appendChild(script);

然后绕过安全警告，编辑清单文件（source）：

manifest.json（摘录）

"content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'"

但是，请注意，绕过安全性仅适用于 https 链接，而且我也觉得它有点 hacky...欢迎任何其他解决方案

【讨论】：

【解决方案5】：

你只需要设置这个库的onload方法

https://apis.google.com/js/client.js?onload=handleClientLoad

和 handleClientLoad - 默认你的注册方法。

Sample for js oauth

【讨论】：

er 问题在于加载库，而不是回调函数，为了简单起见，我省略了回调函数
实际上，这解决了我遇到的一个次要问题，但不是主要问题......无论如何，谢谢！我编辑了我的帖子以防止混淆