making - Cargando Google API Javascript Client Library en la extensión de Chrome

make a google chrome extension

Question

He intentado vincular la biblioteca del cliente google api javascript con una extensión de Chrome por un tiempo, pero parece que la extensión de Chrome tiene un terrible caso de pies fríos. El enlace al script es

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

Descargar los archivos es complicado porque el script realmente carga otros scripts. Intenté incluirlo en el manifiesto

manifest.json (extracto)

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

pero luego la extensión no se carga. También intenté inyectar el script en el fondo html

background.js (extracto)

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

pero el depurador de Chrome me da

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

¿Alguna idea, o están destinadas a mantenerse separadas?

Editar: tenga en cuenta que debe agregar "? Onload = myCallbackFunction" a la URL del script si desea utilizar una función de devolución de llamada. Gracias Ilya. Más información aquí

Answer 1

Solo necesita configurar el método de carga para esta biblioteca

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

y handleClientLoad: predeterminado su método de registro.

Muestra para js oauth

Answer 2

Hasta ahora, la única solución que he encontrado es primero inyectar el script en la página html de fondo como lo hice:

background.js (extracto)

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

Y luego, para eludir la advertencia de seguridad, edite el archivo de manifiesto ( fuente ):

manifest.json (extracto)

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

Sin embargo, tenga en cuenta que eludir la seguridad solo funciona para los enlaces https , y también me parece un poco hacky ... cualquier otra solución es bienvenida

Answer 3

Traté de agregar el archivo de manifiesto como la sugerencia de woojoo666, pero aún así falló. Parece que necesitamos agregar una bandera más ''inseguro-eval'':

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

Answer 4

Encontré algo interesante en el código fuente de https://apis.google.com/js/client.js . Se lee:

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

gapi.load se invoca tan pronto como se carga client.js en la página web. Parece que window.gapi_onload se invocará como una devolución de llamada una vez que se gapi.client cargado gapi.client .

Como una prueba de concepto, construí este plunker: http://plnkr.co/edit/TGvzI9SMKwGM6KnFSs7U

Tanto gapi.auth como gapi.client se imprimen con éxito en la consola.

Volver a las extensiones de Chrome

Puse esto en la sección de fondo de mi mainfest.json :

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

en el cual background.js es el script de fondo principal en mi extensión. Todo el contenido de gapi-client.js se copia y pega directamente desde https://apis.google.com/js/client.js .

Dentro de background.js dice:

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

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

Tenga en cuenta que background.js se carga antes de gapi-client.js . Debido a que gapi-client.js lee la window["gapi_onload"] tan pronto como se carga, window.gapi_onload debe especificar antes de eso.

Como resultado, window.gapi_onload se invoca como se esperaba, con gapi.auth y gapi.client .

En mi solución, no creé un background.html por mi cuenta. Tampoco modifiqué la política de seguridad del contenido. Sin embargo, observe que la solución no está documentada, por lo tanto, está sujeta a cambios en el futuro.

Answer 5

Puede cargarlos a través de background.html que carga su 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>

con manifest.json:

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