Loading Google API Javascript Client Library into Chrome Extension

Question

I've been trying to wed the google api javascript client library with a chrome extension for a while now, but it seems the chrome extension has a terrible case of cold feet. The link to the script is

https://apis.google.com/js/client.js

Downloading the files is messy because the script actually loads other scripts. I've tried including it in the manifest

manifest.json (excerpt)

"background": {
  "scripts": [
    "background.js",
    "https://apis.google.com/js/client.js?onload=callbackFunction"
  ]
},

but then the extension doesn't load. I've also tried injecting the script into the background html

background.js (excerpt)

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

but the chrome debugger gives me

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:".

Any ideas, or are they fated to be kept apart?

Edit: note that you must add "?onload=myCallbackFunction" to the script url if you want to utilize a callback function. Thanks Ilya. More info here

woojoo666 · Accepted Answer · 2013-09-08 09:12:14Z

25

So far the only solution I've found is to first inject the script into the background html page like I did:

background.js (excerpt)

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

And then to bypass the security warning, edit the manifest file (source):

manifest.json (excerpt)

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

However, note that bypassing the security only works for https links, and I also find it kind of hacky...any other solutions are welcome

answered Sep 8, 2013 at 9:12

woojoo666

7,9417 gold badges50 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MrOrz · Accepted Answer · 2014-06-27 18:41:28Z

13

I found something interesting in the source code of https://apis.google.com/js/client.js. It reads:

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

gapi.load is invoked as soon as client.js is loaded in the webpage. It seems like window.gapi_onload will be invoked as a callback once gapi.client is loaded.

As a proof of concept, I built this plunker: http://plnkr.co/edit/TGvzI9SMKwGM6KnFSs7U

Both gapi.auth and gapi.client are successfully printed to console.

Back to Chrome extensions.

I put this in the background section of my mainfest.json:

"background": {
  "scripts": [
    "background.js",
    "gapi-client.js"
  ]
}

in which background.js is the main background script in my extension. All content of gapi-client.js is directly copy-and-pasted from https://apis.google.com/js/client.js.

Inside background.js it reads:

window.gapi_onload = function(){
  console.log('gapi loaded.', gapi.auth, gapi.client);

  // Do things you want with gapi.auth and gapi.client.
}

Please note that background.js is loaded prior to gapi-client.js. Because gapi-client.js reads window["gapi_onload"] as soon as it's loaded, window.gapi_onload must be specified before that.

As a result window.gapi_onload is invoked as expected, with both gapi.auth and gapi.client populated.

In my solution I did not create a background.html on my own. I did not modify the content security policy either. However, notice that the solution is rather undocumented, thus is subject to change in the future.

answered Jun 27, 2014 at 18:41

MrOrz

1671 silver badge5 bronze badges

4 Comments

Artem Volkhin Over a year ago

Great solution! I've found the same thing but even using windo.gapi_onload is not very comfartable in modular application (I'm writing backbone.js application). Didn't you find any useful wrappers around this API?

not_shitashi Over a year ago

when I include the gapi-client.js in my manifest, it tries to include a third external script from apis.google.com in the background.html source. Did you see this at all? Because it is effectively the same error for me. Here is the full url for the script: apis.google.com/_/scs/apps-static/_/js/…

Yossi Vainshtein Over a year ago

Tried it just now, didn't work for me. It prints undefined undefined. I think perhaps the client script was changed since this answer was posted. The first answer (with modifying CSP) did work.

Oliver White Over a year ago

that worked perfectly. After initializing gapi, I just had to get chrome token and send it to get user info. Saved my day. Thanks ! if u just copy paste, yes, it will return undefined undefined, because you must have a token to use with it.

goodhyun · Accepted Answer · 2016-05-12 03:38:06Z

3

You can load them via background.html which loads your background.js.

<html>
 <head>
  <title></title>
  <script src="background.js"></script>
 </head>
 <body>
 </body>
 <script src="https://apis.google.com/js/client.js"></script>
</html>

with manifest.json:

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

answered May 12, 2016 at 3:38

goodhyun

5,0083 gold badges35 silver badges25 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You just need set the onload method for this library

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

and handleClientLoad - default your registration method.

Sample for js oauth

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 8, 2013 at 8:27

Ilya Dzivinskyi

846 bronze badges

2 Comments

woojoo666 Over a year ago

er the problem is with loading the library, not the callback function, which I omitted for simplicity's purposes

woojoo666 Over a year ago

actually, this solved a side issue I was having, but not the main problem...thanks anyways! I edited my post to prevent confusion

zhonglin · Accepted Answer · 2014-03-04 06:15:29Z

1

I tried to add the manifest file as woojoo666's suggestion, but it still failed, It looks we need to add one more flag 'unsafe-eval':

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

answered Mar 4, 2014 at 6:15

zhonglin

696 bronze badges

1 Comment

AlwaysLearning Over a year ago

I get the error: 'content_security_policy.extension_pages': Insecure CSP value "'unsafe-eval'" in directive 'script-src'.

Collectives™ on Stack Overflow

Loading Google API Javascript Client Library into Chrome Extension

5 Answers 5

Comments

4 Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related