将 Google API Javascript 客户端库加载到 Chrome 扩展程序中
Posted
技术标签:
【中文标题】将 Google API Javascript 客户端库加载到 Chrome 扩展程序中【英文标题】：Loading Google API Javascript Client Library into Chrome Extension 【发布时间】：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
【问题讨论】：
【参考方案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 问题在于加载库，而不是回调函数，为了简单起见，我省略了回调函数 实际上，这解决了我遇到的一个次要问题，但不是主要问题......无论如何，谢谢！我编辑了我的帖子以防止混淆以上是关于将 Google API Javascript 客户端库加载到 Chrome 扩展程序中的主要内容，如果未能解决你的问题，请参考以下文章
将 Google API Javascript 客户端库加载到 Chrome 扩展程序中
使用Javascript中的Oauth授权将Google表格API v3迁移到v4之后如何实现makeApiCall（）方法
Rails：尝试在开发模式下“非法”将 adv ruby（每个 + 迭代器）操作嵌入到 javascript（Google Charts API）中
使用 Google Pay JavaScript API 时防止客户端篡改