web-dev-qa-db-ja.com

Google API JavaScriptクライアントライブラリをChrome Extensionにロードしています

私はしばらくの間、chrome拡張機能を使用してgoogle api javascriptクライアントライブラリを統合しようとしましたが、chrome拡張機能にはひどいケースがあるようです冷たい足の。スクリプトへのリンクは

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

スクリプトが実際に他のスクリプトをロードするため、ファイルのダウンロードは面倒です。マニフェストに含めてみました

manifest.json（抜粋）

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

しかし、拡張機能は読み込まれません。スクリプトをバックグラウンドhtmlに挿入してみました

background.js（抜粋）

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

chromeデバッガは私に与えます

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

何かアイデアはありますか？

編集：コールバック関数を利用する場合は、スクリプトのURLに「？onload = myCallbackFunction」を追加する必要があることに注意してください。イリヤに感謝します。詳細 ここ

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

これまでのところ、私が見つけた唯一の解決策は、最初にスクリプトを背景のhtmlページに挿入することです。

background.js（抜粋）

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

次に、セキュリティ警告をバイパスするには、マニフェストファイル（ source ）を編集します。

manifest.json（抜粋）

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

ただし、セキュリティのバイパスはhttpsリンクに対してのみ機能し、私はそれが一種のハックであることに気づきます...他のソリューションは大歓迎です

21
woojoo666

https://apis.google.com/js/client.jsのソースコードに興味深いものを見つけました。それは読む：

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

gapi.loadは、client.jsがWebページにロードされるとすぐに呼び出されます。 window.gapi_onloadが読み込まれると、gapi.clientがコールバックとして呼び出されるようです。

概念実証として、このプランカーを作成しました： http://plnkr.co/edit/TGvzI9SMKwGM6KnFSs7

gapi.authとgapi.clientの両方が正常にコンソールに出力されます。

Chrome拡張機能に戻る。

これをmainfest.jsonの背景セクションに配置します。

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

ここで、background.jsは拡張機能のメインのバックグラウンドスクリプトです。 gapi-client.jsのすべてのコンテンツは、https://apis.google.com/js/client.jsから直接コピーアンドペーストされます。

background.jsの内部には次のように書かれています。

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

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

background.jsはgapi-client.jsより前にロードされることに注意してください。 gapi-client.jsはロードされるとすぐにwindow["gapi_onload"]を読み取るため、その前にwindow.gapi_onloadを指定する必要があります。

その結果、window.gapi_onloadが期待どおりに呼び出され、gapi.authとgapi.clientの両方が入力されます。

私のソリューションでは、自分でbackground.htmlを作成しませんでした。コンテンツセキュリティポリシーも変更しませんでした。ただし、ソリューションはかなり文書化されていないため、将来変更される可能性があることに注意してください。

9
MrOrz

Background.jsをロードするbackground.htmlを介してそれらをロードできます。

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

manifest.json：

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

このライブラリのonloadメソッドを設定するだけです

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

およびhandleClientLoad-デフォルトの登録メソッド。

js oauthのサンプル

1
Ilya Dzivinskyi

私はwoojoo666の提案としてマニフェストファイルを追加しようとしましたが、それでも失敗しました、もう1つのフラグ「unsafe-eval」を追加する必要があるようです：

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

0
zhonglin