GAPI 未定义

Question

我在让 Google javascript api 加载到我的 chrome 扩展程序中时遇到了很多麻烦。请注意，我对 javascript 非常陌生，甚至对 chrome 扩展也很陌生。

我有一个执行脚本的 background.js 文件

chrome.tabs.executeScript(null, { file: "ChromeExtension.js" });

这个 ChromeExtension.js 文件如下所示

//Call Initialize Method
init();

//Function To Initial Chrome Extension
function init(){
    var clientID = 'Client ID';
    var apiKey = 'API Key';
    var scopes = 'https://www.googleapis.com/auth/plus.me';

    loadGAPIClient();

    gapi.client.setApiKey(apiKey);


}

我的问题是在

gapi.client.setApiKey(apiKey);

我得到 gapi 未定义 事情是一旦我的 ChromeExtension.js 完成执行，gapi 已完全定义并可用。

我在一些堆栈溢出问题中尝试了其他建议，但无济于事。我认为这是由于缺乏 Javascript 知识，但如果有人能够提供一些帮助，我将不胜感激。

感谢您的宝贵时间。

编辑 - 当前 GAPI 负载

function () loadGAPIClient(){
    var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "https://apis.google.com/js/client.js";
        $("head").append(s);
}

这个函数在我的 init() 中调用，我也更新了它以反映这一点。

我还尝试过使用 jQuery.getScript 以及其他方式。

请理解这是我的问题，我找不到正确加载 GAPI 客户端的方法

Answer 1

Isolated world 问题。

具体来说，您的loadGAPIClient 添加了一个<script> 标记，然后该标记在与内容脚本上下文不同的页面上下文中执行脚本。

最终结果是gapi 在页面代码中定义（如果页面加载了自己的副本，可能会产生冲突），但在您的代码中仍未定义。

我没有看到一个简单的出路。您只能通过调用executeScript 或在清单中声明它们来加载内容脚本上下文中的内容；如果我没记错的话，GAPI 将尝试使用<script> 注入方法加载更多库。

所以我想你最好的办法是在后台页面中加载库并从那里使用它，因为只要你modify the CSP，以这种方式加载外部 JS 就可以了。

或者，您可以尝试this library，它可以解决您在使用默认 CSP 时遇到的问题，并使用chrome.identity API。它可能符合您的需求，但它在内容脚本中也不起作用。

Answer 2

不要威胁我的回答是冒犯性的，在你的代码 sn-p 中没有证据表明你已经加载了 Google APIs JavaScript 库，如 reference 上所示？

<script src="https://apis.google.com/js/plus.js?onload=init"></script>

你需要使用这个方法，不手动调用init：让gapi为你调用:)