不動の鳥の勉強記録

時間があるときに勉強したことをメモします。

Chrome Extensionの作成(オートリロード)

本記事ではGoogleExtensionのオートリロード機能を作りながら、個人的にはまったこと、気づいたことを書いていきます。

 

筆者の持っている前提知識は下記程度です。

■前提知識

 Extensionについて・・・Googleのチュートリアルを実施

 Javascriptについて・・・とりあえず希望の機能は実現をするソースコードは書くことができるレベル

 

ソースコード

Githubにコミットしました。ほぼチュートリアルのコードそのままで必要なところを加筆修正しています。

github.com

 

■はまったこ

 それでははまったことを書いていきます。

 1. Manifestファイルの書き方がわからない

  Manifestファイルはいったい何を書けばいいのか、必要なPermissionは何か。

  まずこのファイルの書き方に躓きました。チュートリアルに必ほぼ必要な内容はあったので、それをベースにManifest File Formatを参考に作成しました。

 

 2. デバッグの仕方がわからない

  デバッグの仕方も初心者なのでわからなかったです。

  デバッグのチュートリアルを参考にデバッグ方法を学びました。

 

 3. inline event handlerは拒否される。

  popup.html内にbuttonを作成し、onclickイベントで直接スクリプトを記載したのですが、拒否されてしまいました。

  イベントリスナーを記述しておかないとダメなようです。

 

 4. エラーが発生

  setInterval関数を用いたコードで下記エラーが発生しました。

  エラー文言:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

  Chrome Extension特有のものなのかどうかわからず、とりあえずGoogleでエラー文言を検索しました。すると下記サイトがヒットしました。

javascript - Can't use Raphael JS to draw a path in a Chrome extension popup because of security policy? - Stack Overflow

  Manifestのsecurity policyを追加する方法と、evalがうまく行かなかった部分を関数とする方法があるみたいです。今回は後者の対応でソースコードを修正するとデバッグでもエラー発生しなくなりました。

 

■総括

 簡単なものでもプログラマーとして仕事していないと、久々のコーディングで難しさを感じました。

 やっぱり私はPGではない分野をお仕事にしていくのがいいのかもしれません・・・

 Googleデベロッパー登録もしてみたので、もう少し納得いくものになったら何番煎じかわかりませんがウェブストアに登録までしてみたいと思います。

 

■その他

 Googleのサイトを見ればドキュメントは充実してますが、英語なのでとっつきにくい人がいるかもしれませんね・・・

 

以上。