将 Google API Javascript 客户端库加载到 Chrome 扩展程序中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18681803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading Google API Javascript Client Library into Chrome Extension
提问by woojoo666
I've been trying to wed the google api javascript client library with a chrome extension for a while now, but it seems the chrome extension has a terrible case of cold feet. The link to the script is
一段时间以来，我一直试图将 google api javascript 客户端库与 chrome 扩展程序结合起来，但似乎 chrome 扩展程序有一个可怕的冷脚案例。脚本的链接是
https://apis.google.com/js/client.js
https://apis.google.com/js/client.js
Downloading the files is messy because the script actually loads other scripts. I've tried including it in the manifest
下载文件很麻烦，因为脚本实际上加载了其他脚本。我试过将它包含在清单中
manifest.json (excerpt)
manifest.json（摘录）
"background": {
"scripts": [
"background.js",
"https://apis.google.com/js/client.js?onload=callbackFunction"
]
},
but then the extension doesn't load. I've also tried injecting the script into the background html
但随后扩展不会加载。我也试过将脚本注入后台 html
background.js (excerpt)
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);
but the chrome debugger gives me
但是 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:".
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:".
Any ideas, or are they fated to be kept apart?
有什么想法，还是注定要分开？
Edit: note that you must add "?onload=myCallbackFunction" to the script url if you want to utilize a callback function. Thanks Ilya. More info here
编辑：请注意，如果您想使用回调函数，则必须将“?onload=myCallbackFunction”添加到脚本 url 中。谢谢伊利亚。更多信息在这里
回答by woojoo666
So far the only solution I've found is to first inject the script into the background html page like I did:
到目前为止，我找到的唯一解决方案是像我一样首先将脚本注入后台 html 页面：
background.js (excerpt)
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);
And then to bypass the security warning, edit the manifest file (source):
然后绕过安全警告，编辑清单文件（源）：
manifest.json (excerpt)
manifest.json（摘录）
"content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'"
However, note that bypassing the security only works for httpslinks, and I also find it kind of hacky...any other solutions are welcome
但是，请注意，绕过安全性仅适用于https链接，而且我也觉得它有点麻烦……欢迎使用任何其他解决方案
回答by MrOrz
I found something interesting in the source code of https://apis.google.com/js/client.js. It reads:
我在源代码中发现了一些有趣的东西https://apis.google.com/js/client.js。它写道：
gapi.load("client",{callback:window["gapi_onload"], ......
gapi.loadis invoked as soon as client.jsis loaded in the webpage. It seems like window.gapi_onloadwill be invoked as a callback once gapi.clientis loaded.
gapi.loadclient.js在网页中加载后立即调用。window.gapi_onload一旦gapi.client加载，似乎将作为回调被调用。
As a proof of concept, I built this plunker: http://plnkr.co/edit/TGvzI9SMKwGM6KnFSs7U
作为概念证明，我构建了这个 plunker：http://plnkr.co/edit/TGvzI9SMKwGM6KnFSs7U
Both gapi.authand gapi.clientare successfully printed to console.
既gapi.auth和gapi.client被成功地打印到控制台。
Back to Chrome extensions.
回到 Chrome 扩展程序。
I put this in the background section of my mainfest.json:
我把它放在我的背景部分mainfest.json：
"background": {
"scripts": [
"background.js",
"gapi-client.js"
]
}
in which background.jsis the main background script in my extension. All content of gapi-client.jsis directly copy-and-pasted from https://apis.google.com/js/client.js.
其中background.js是我的扩展程序中的主要后台脚本。的所有内容gapi-client.js直接从https://apis.google.com/js/client.js.
Inside background.jsit reads:
里面background.js写着：
window.gapi_onload = function(){
console.log('gapi loaded.', gapi.auth, gapi.client);
// Do things you want with gapi.auth and gapi.client.
}
Please note that background.jsis loaded prior to gapi-client.js. Because gapi-client.jsreads window["gapi_onload"]as soon as it's loaded, window.gapi_onloadmust be specified before that.
请注意，background.js加载之前gapi-client.js。因为加载后立即gapi-client.js读取window["gapi_onload"]，因此window.gapi_onload必须在此之前指定。
As a result window.gapi_onloadis invoked as expected, with both gapi.authand gapi.clientpopulated.
结果window.gapi_onload是按预期调用，同时填充了gapi.auth和gapi.client。
In my solution I did not create a background.htmlon my own. I did not modify the content security policy either. However, notice that the solution is rather undocumented, thus is subject to change in the future.
在我的解决方案中，我没有background.html自己创建一个。我也没有修改内容安全策略。但是，请注意，该解决方案相当无证，因此将来可能会发生变化。
回答by goodhyun
You can load them via background.html which loads your background.js.
您可以通过加载 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>
with manifest.json:
使用 manifest.json：
"background":
{
"page": "background.html"
},
"content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'",
回答by Ilya Dzivinskyi
You just need set the onload method for this library
您只需要为此库设置 onload 方法
https://apis.google.com/js/client.js?onload=handleClientLoad
https://apis.google.com/js/client.js?onload=handleClientLoad
and handleClientLoad - default your registration method.
和 handleClientLoad - 默认您的注册方法。
回答by zhonglin
I tried to add the manifest file as woojoo666's suggestion, but it still failed, It looks we need to add one more flag 'unsafe-eval':
我尝试将清单文件添加为 woojoo666 的建议，但仍然失败，看来我们需要再添加一个标志“unsafe-eval”：
"content_security_policy": "script-src 'self' 'unsafe-eval' https://apis.google.com; object-src 'self'",
"content_security_policy": "script-src 'self' 'unsafe-eval' https://apis.google.com; object-src 'self'",
