Googleフォト連携対応雑記2

FF14外部画像参照補助スクリプトのGoogleフォト対応に当たって
ハマった所とか参考にしたところとかとか

まず、ハマった所1

Picker API Developer’s Guideのサンプル通りに作ったら
認証画面がポップアップブロックされる

「window.gapi.auth.authorize」を実行した時
APIの認証画面がポップアップされるのだけど、
その時、ポップアップブロックされる。
ユーザの操作無しでポップアップしようとするとブロックされるから
スクリプトのロード時じゃなくてクリック時に「onApiLoad」を実行するがブロックされる。
どうやら「gapi.load(‘auth’, {‘callback’: onAuthApiLoad});」のコールバックで
「window.gapi.auth.authorize」を実行しようとするとブロックされてしまうらしい
コールバックではなくてクリック時に「window.gapi.auth.authorize」を実行することで
ポップアップブロックされずに認証画面が表示できた。

ハマった所2

GreasmonkeyでどうやってGoogle APIを使うか

これでGoogleフォト対応の半分ぐらいの時間を費やした気がする。
最初はrequireでGoogle APIのスクリプトを読み込んで使えると思ったらエラーで使えず、
結局ページに直接Google APIのスクリプトを読み込むタグを挿入することに
次にどうやってAPIの処理を書くかで最初はunsafeWindowとかでなんとかなるかと思ったけど、
コールバックの動作がこちらのやりたいように行かずに断念。
次に処理をGresemokey側でテンプレートリテラル使って書いて
ページに埋め込むって方法でやったらうまく動いたけど
そもそも処理を文字列として埋め込むのは今後修正するときに大変そうだということで
外部jsファイルにしてページに直接外部jsファイルを読み込むタグを挿入することに
そしたら今度は外部jsファイルの動的読み込み時の実行順序の問題で
外部jsファイル読み込み後Google APIのスクリプト読み込みとしたいのに逆になってしまう。
なので、外部jsファイルにロード時実行する処理を書いて
そこでGoogle APIのスクリプトを読み込むタグを挿入するようにすることで解決

後、今回参考にしたところを以下に記載

参考URL: