将 Google API Javascript Client Library 加载到 Chrome 扩展中

Loading Google API Javascript Client Library into Chrome Extension

本文关键字：Chrome 扩展 加载 Library Google API Javascript Client      更新时间：2023-09-26

我一直在尝试将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:".

任何想法，还是它们注定要分开？

编辑：请注意，如果要使用回调函数，则必须在脚本 url 中添加"？onload=myCallbackFunction"。谢谢伊利亚。更多信息在这里

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

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

manifest.json（摘录）

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

但是，请注意，绕过安全性仅适用于https链接，而且我也发现它有点黑客......欢迎任何其他解决方案

我在https://apis.google.com/js/client.js的源代码中发现了一些有趣的东西。上面写着：

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

网页中加载client.js后，将立即调用gapi.load。似乎加载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。我也没有修改内容安全策略。但是，请注意，该解决方案相当未记录，因此将来可能会发生变化。

您可以通过背景加载它们.html这会加载您的背景.js。

<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'",

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

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

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

js oauth 的示例

我试图将清单文件添加为 woojoo666 的建议，但仍然失败，看起来我们需要再添加一个标志"不安全的"：

"content_security_policy"："脚本-src'自我''不安全-eval'https://apis.google.com;对象-src 'self'"，

相关文章：