web-dev-qa-db-fra.com

Chargement de la bibliothèque cliente JavaScript de l'API Google dans l'extension Chrome

Je cherche depuis un certain temps à associer la bibliothèque cliente javascript de Google Api avec une extension chrome, mais il semble que l'extension chrome présente un cas terrible de pieds froids. Le lien vers le script est

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

Le téléchargement des fichiers est compliqué, car le script charge d’autres scripts. J'ai essayé de l'inclure dans le manifeste

manifest.json (extrait) 

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

mais alors l'extension ne charge pas. J'ai également essayé d'injecter le script dans l'arrière-plan HTML

background.js (extrait) 

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

mais le débogueur de chrome me donne 

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

Des idées, ou sont-ils destinés à être séparés?

Edit: notez que vous devez ajouter "? Onload = myCallbackFunction" à l'URL du script si vous souhaitez utiliser une fonction de rappel. Merci Ilya. Plus d'infos ici

javascriptgoogle-chrome-extensiongoogle-api-java-client
23
woojoo666

Jusqu'à présent, la seule solution que j'ai trouvée consiste à injecter d'abord le script dans la page HTML en arrière-plan, comme je l'ai fait:

background.js (extrait) 

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

Et pour contourner l'avertissement de sécurité, éditez le fichier manifeste ( source ):

manifest.json (extrait) 

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

Cependant, notez que contourner la sécurité ne fonctionne que pour les liens https, et je trouve aussi que c'est un peu hacky ... toute autre solution est la bienvenue

17
woojoo666

J'ai trouvé quelque chose d'intéressant dans le code source de https://apis.google.com/js/client.js. Ça lit:

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

gapi.load est appelé dès que client.js est chargé dans la page Web. Il semble que window.gapi_onload sera appelé en tant que rappel une fois que gapi.client sera chargé.

Pour prouver le concept, j’ai construit ce lecteur: http://plnkr.co/edit/TGvzI9SMKwGM6KnFSs7U

gapi.auth et gapi.client ont été correctement imprimés sur la console.

Retour aux extensions de Chrome.

Je mets ceci dans la section de fond de mon mainfest.json:

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

dans lequel background.js est le script d'arrière-plan principal de mon extension. Tout le contenu de gapi-client.js est directement copié-collé à partir de https://apis.google.com/js/client.js.

Dans background.js, on lit:

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

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

Veuillez noter que background.js est chargé avant le gapi-client.js. Étant donné que gapi-client.js lit window["gapi_onload"] dès son chargement, window.gapi_onload doit être spécifié avant.

Par conséquent, window.gapi_onload est appelé comme prévu, avec gapi.auth et gapi.client renseignés.

Dans ma solution, je n'ai pas créé un background.html moi-même. Je n'ai pas non plus modifié la politique de sécurité du contenu. Cependant, notez que la solution est plutôt non documentée, donc sujette à changement dans le futur.

8
MrOrz

Vous pouvez les charger via background.html qui charge votre 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>

avec manifest.json:

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

Vous avez juste besoin de définir la méthode onload pour cette bibliothèque

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

et handleClientLoad - par défaut votre méthode d'enregistrement.

Échantillon pour js oauth

1
Ilya Dzivinskyi

J'ai essayé d'ajouter le fichier manifeste comme suggestion de woojoo666, mais il a toujours échoué, Il semble qu'il faille ajouter un indicateur supplémentaire, 'unsafe-eval':

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

0
zhonglin