GAPI Is Not Defined

Question

I am having much trouble getting the Google javascript api to load in my chrome extension. Please note I am very new to javascript and even newer to chrome extensions.

I have a background.js file which executes a script

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

This ChromeExtension.js file then look as follows

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


}

My problem is that at

gapi.client.setApiKey(apiKey);

I get gapi is not defined The thing is once my ChromeExtension.js has completed execution, gapi is fully defined and available.

I have tried other suggestions in some stack overflow questions but to no avail. I believe this is due to lack of Javascript knowledge but I would be grateful if anyone would be able to provide some assistance.

Thank you for your time.

EDIT - Current GAPI Load

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

This function is called in my init(), which I have also updated to reflect this.

I have also tried using jQuery.getScript among other ways.

Please understand this is my issue, I cannot find a way to correctly load the GAPI Client

Answer 1

Doesn't threat my answer as offensive, in your code snippet there isn't evidence of that, you have load the Google APIs JavaScript library as show on the reference?

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

You need to use this method, doesn't call init by hand: let's gapi call for you :)

Answer 2

Isolated world problem.

Specifically, your loadGAPIClient adds a <script> tag which then executes the script in the page's context, which is different from the content script context.

The end result is that gapi becomes defined in the page's code (possibly creating a conflict if the page loaded own copy), but is still undefined in yours.

I don't see an easy way out. You can only load things in the content script context by calling executeScript or declaring them in the manifest; and if I recall correctly GAPI will try to load more libraries with the <script> injection method.

So I guess your best bet is to load the library in a background page and work with it from there, since loading external JS this way will be okay as long as you modify the CSP.

Or alternatively, you could try this library, which works around the issues you have with default CSP and uses chrome.identity API. It may fit your needs, though again it won't work in a content script.