37

一段时间以来，我一直在尝试将 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

背景.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。谢谢伊利亚。更多信息在这里

4

5 回答 5

23

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

背景.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...欢迎任何其他解决方案

于 2013-09-08T09:12:14.033 回答
12

我在 的源代码中发现了一些有趣的东西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自己创建一个。我也没有修改内容安全策略。但是，请注意，该解决方案没有记录在案，因此将来可能会发生变化。

于 2014-06-27T18:41:28.450 回答
3

您可以通过加载您的 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'",
于 2016-05-12T03:38:06.527 回答
1

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

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

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

js oauth 示例

于 2013-09-08T08:27:52.237 回答
0

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

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

于 2014-03-04T06:15:29.030 回答