拡張機能作るときに起きた問題の対策まとめ
Content Security Policyのエラー
Refused to execute inline event handler because it violates the following Content Security Policy directive: “script-src ‘self’ blob: filesystem:”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-…’), or a nonce (‘nonce-…’) is required to enable inline execution.
こんな感じのやつ
原因はhtmlでon~などインラインスクリプトは使えないという規約をgoogleが作ったから（インラインスクリプトの持つ脆弱性(XSS)のため)
だめな例
<button id="test" onclick="submit()">提出</button>この問題に対して２つほど対策を見つけた。
１．querySelectorを使ってjsから設定する。jQueryからでもOK。
$(function(){
$('#test').click(submit())
}２．angularJSを導入してng-clickを代わりに使う
<button id="test" ng-click="submit()">提出</button>angularJsの書式に従うので安全ならしい。
https://snyk.io/vuln/npm:angular:20130621
angularJsを使うとhtmlとjsをいい感じに連携させられるので個人的におすすめ。
ポップアップウィンドウの実装
普通にURLを指定してウインドウを開く時は
window.open(url);だが
作成した拡張機能の内部に置いてあるhtmlファイルをウィンドウとして開く時には
window.open(chrome.runtime.getURL('setting.html'));のように書くとよい。
データの取得と保存、確認
データの取得、保存の方法は下のリンクが参考になった。
https://qiita.com/shimutaya/items/e8835d6ce794ef6c73cf
データの確認は以下のリンクの方法２が手軽
ただしmanifestファイルに
"permissions":["storage"],と書くのを忘れずに！
この３つが情報探すのが結構面倒くさかったのでまとめておきました。
ご活用ください。
