将Google API Javascript客户端库加载到Chrome扩展程序中
[英]Loading Google API Javascript Client Library into Chrome Extension
问题描述
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. 
我一直在尝试与Chrome扩展程序结合谷歌api javascript客户端库一段时间了，但似乎Chrome扩展程序有一个可怕的冷脚情况。 The link to the script is 脚本的链接是
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:".
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. 编辑：请注意，如果要使用回调函数，必须将“？onload = myCallbackFunction”添加到脚本URL。 Thanks Ilya. 谢谢伊利亚。 More info here 更多信息在这里
5 个解决方案
解决方案1
19 2013-09-08 09:12:14
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 https links, and I also find it kind of hacky...any other solutions are welcome 但请注意，绕过安全性仅适用于https链接，我也觉得它有点hacky ...欢迎任何其他解决方案
解决方案2
8 2014-06-27 18:41:28
I found something interesting in the source code of https://apis.google.com/js/client.js . 我在https://apis.google.com/js/client.js的源代码中发现了一些有趣的内容。 It reads: 它写道：
gapi.load("client",{callback:window["gapi_onload"], ......
gapi.load is invoked as soon as client.js is loaded in the webpage. gapi.load在网页中加载client.js ，就会调用gapi.load 。 It seems like window.gapi_onload will be invoked as a callback once gapi.client is loaded. 似乎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.auth and gapi.client are 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.js is the main background script in my extension. 其中background.js是我的扩展中的主要后台脚本。 All content of gapi-client.js is directly copy-and-pasted from https://apis.google.com/js/client.js . gapi-client.js所有内容均直接从https://apis.google.com/js/client.js复制粘贴。
Inside background.js it 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.js is loaded prior to gapi-client.js . 请注意，在gapi-client.js之前加载background.js 。 Because gapi-client.js reads window["gapi_onload"] as soon as it's loaded, window.gapi_onload must be specified before that. 因为window["gapi_onload"] gapi-client.js在加载后立即读取window["gapi_onload"] ，所以必须在此之前指定window.gapi_onload 。
As a result window.gapi_onload is invoked as expected, with both gapi.auth and gapi.client populated. 因此， window.gapi_onload按预期调用，填充了gapi.auth和gapi.client 。
In my solution I did not create a background.html on my own. 在我的解决方案中，我没有自己创建一个background.html 。 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. 但是，请注意该解决方案没有记录，因此将来可能会发生变化。
解决方案3
2 2016-05-12 03:38:06
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'",
解决方案4
1 2013-09-08 08:27:52
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 - 默认您的注册方法。
解决方案5
0 2014-03-04 06:15:29
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'”，
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.