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