GAPI Is Not Defined

Question

我在chrome扩展中加载Google javascript api时遇到了很多问题。请注意，我对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);

我得到gap没有定义问题是，一旦我的ChromeExtension.js完成执行，gap就完全定义好了，并且可用。

在一些堆栈溢出问题中，我尝试了其他建议，但没有成功。我相信这是由于缺乏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

孤立世界问题。

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

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

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

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

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

Answer 2

在你的代码片段中没有证据表明我的回答是冒犯性的，你已经加载了参考中显示的Google API JavaScript库了吗？

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

你需要使用这个方法，不要手动调用init：让我们为你调用：）