web-dev-qa-db-de.com

Laden der Google API Javascript Client Library in die Chrome-Erweiterung

Ich habe schon seit einiger Zeit versucht, die Google-API-Javascript-Client-Bibliothek mit einer Chrome-Erweiterung zu heiraten, aber es scheint, dass die Chrome-Erweiterung einen schrecklichen Fall von kalten Füßen hat. Der Link zum Skript lautet

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

Das Herunterladen der Dateien ist unübersichtlich, da das Skript tatsächlich andere Skripts lädt. Ich habe es in das Manifest aufgenommen

manifest.json (Auszug) 

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

die Erweiterung wird jedoch nicht geladen. Ich habe auch versucht, das Skript in die Hintergrund-HTML einzuspeisen

background.js (Auszug) 

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

aber der Chrom-Debugger gibt mir 

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

Irgendwelche Ideen, oder sind sie dazu bereit, getrennt zu bleiben?

Bearbeiten: Beachten Sie, dass Sie der Skript-URL "? Onload = myCallbackFunction" hinzufügen müssen, wenn Sie eine Rückruffunktion verwenden möchten. Danke Ilya. Mehr Infos hier

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

Die einzige Lösung, die ich bisher gefunden habe, ist, das Skript wie ich zuvor in die Hintergrund-HTML-Seite einzufügen:

background.js (Auszug) 

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

Um die Sicherheitswarnung zu umgehen, bearbeiten Sie die Manifestdatei ( source ):

manifest.json (Auszug) 

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

Beachten Sie jedoch, dass das Umgehen der Sicherheit nur für https-Links funktioniert, und ich finde es auch irgendwie hackig ... alle anderen Lösungen sind willkommen

17
woojoo666

Ich habe etwas interessantes im Quellcode von https://apis.google.com/js/client.js gefunden. Es liest:

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

gapi.load wird aufgerufen, sobald client.js in die Webseite geladen wird. Es scheint, als würde window.gapi_onload als Callback aufgerufen werden, sobald gapi.client geladen ist.

Zum Beweis des Konzepts baute ich diesen Plunker: http://plnkr.co/edit/TGvzI9SMKwGM6KnFSs7U

Sowohl gapi.auth als auch gapi.client werden erfolgreich an die Konsole gedruckt.

Zurück zu den Chrome-Erweiterungen.

Ich habe dies in den Hintergrundabschnitt meines mainfest.json gestellt:

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

wobei background.js das wichtigste Hintergrundskript in meiner Erweiterung ist. Der gesamte Inhalt von gapi-client.js wird direkt von https://apis.google.com/js/client.js kopiert und eingefügt.

In background.js heißt es:

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

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

Bitte beachten Sie, dass background.js vor gapi-client.js geladen wird. Da gapi-client.jswindow["gapi_onload"] liest, sobald er geladen ist, muss window.gapi_onload davor angegeben werden.

Als Ergebnis wird window.gapi_onload wie erwartet aufgerufen, wobei gapi.auth und gapi.client gefüllt sind.

In meiner Lösung habe ich nicht selbst einen background.html erstellt. Ich habe auch die Inhaltssicherheitsrichtlinie nicht geändert. Beachten Sie jedoch, dass die Lösung eher nicht dokumentiert ist und sich daher in der Zukunft ändern kann.

8
MrOrz

Sie können sie über background.html laden, wodurch Ihre background.js geladen werden.

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

mit manifest.json:

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

Sie müssen nur die Onload-Methode für diese Bibliothek einstellen

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

und handleClientLoad - Standardeinstellung Ihrer Registrierungsmethode.

Beispiel für js oauth

1
Ilya Dzivinskyi

Ich habe versucht, die Manifestdatei als Vorschlag von woojoo666 hinzuzufügen, aber es schlug immer noch fehl.

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

0
zhonglin