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

Question

我一直在尝试与Chrome扩展程序结合谷歌api javascript客户端库一段时间了,但似乎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.谢谢伊利亚.更多信息在这里

Answer 1

到目前为止,我发现的唯一解决方案是首先将脚本注入后台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);

然后绕过安全警告,编辑清单文件(源):

manifest.json(摘录)

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

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

Answer 2

我在源代码中找到了一些有趣的东西https://apis.google.com/js/client.js.它写道:

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

gapi.loadclient.js在网页中加载后立即调用.似乎window.gapi_onload一旦gapi.client加载就会被调用为回调.

作为一个概念证明,我构建了这个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自己创建.我也没有修改内容安全策略.但是,请注意该解决方案是相当无证的,因此将来可能会发生变化.

Answer 3

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

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

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

js oauth 示例