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。谢谢伊利亚。更多信息here

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);

然后绕过安全警告，编辑清单文件（source）：

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.load，就会调用

client.js。 <{1}}加载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。

在我的解决方案中，我没有自己创建{{1}}。我也没有修改内容安全策略。但是，请注意解决方案没有记录，因此将来可能会发生变化。

Answer 3

您可以通过加载background.js的background.html加载它们。

"background":
{
 "page": "background.html"     
}, 
"content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'",

使用manifest.json：

context.Configuration.ValidateOnSaveEnabled = false;
context.SaveChanges();

Answer 4

您只需要为此库设置onload方法

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

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

Sample for js oauth

Answer 5

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

＆＃34; content_security_policy＆＃34;：＆＃34; script-src＆＃39; self＆＃39; ＆＃39;不安全-EVAL＆＃39; https://apis.google.com; object-src＆＃39; self＆＃39;＆＃34;，

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

5 个答案: