Chrome Extensionでgoogle apis client library for javascriptを使う
備忘録的な何か
Chrome Extensionを作る際に、google apis client for javascript(gapi)を使おうとすると
Content Security Policyに引っかかってしまう為、
以下の様な通常の読み込み方では、gapiを利用することができない。 (エラーとなる)
<!-- client libraryの読み込み -->
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<script>
function handleClientLoad() {
// Step 2: Reference the API key
gapi.client.setApiKey(apiKey);
window.setTimeout(makeApiCall,1);
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
// Step 4: Load the Google+ API
gapi.client.load('plus', 'v1', function() {
// Step 5: Assemble the API request
var request = gapi.client.plus.people.get({
'userId': 'me'
});
// Step 6: Execute the API request
request.execute(function(resp) {
var heading = document.createElement('h4');
var image = document.createElement('img');
image.src = resp.image.url;
heading.appendChild(image);
heading.appendChild(document.createTextNode(resp.displayName));
document.getElementById('content').appendChild(heading);
});
});
}
</script>
gapiを利用するためには、今のところchromeチームが出しているCSPに引っかからないライブラリ経由で、gapiをロードしたり、apiの呼び出しをする必要があるみたい。
使い方とかは、リンク先を見てください。
使えないことはないのですが、完成はしてない雰囲気が...
google apis client library for javascriptはappengineのCloud Endpintでも利用される為、
Chrome Extensionから利用しようとした時にハマりどころなので、覚えておくと得です。
一応今自分で作ってるChrome Extensionが使ってるので参考にしてください。
https://github.com/soundTricker/gas-library-box
Author And Source
この問題について(Chrome Extensionでgoogle apis client library for javascriptを使う), 我々は、より多くの情報をここで見つけました https://qiita.com/soundTricker/items/237eda1f01612d8875c6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .