さきにまとめ
CSP環境（chrome拡張等）でVue.jsを使うときは
Vue.js Github CSPブランチ からコードを取ってこよう.
はまったこと
Vue.jsを使って簡単にChrome拡張を初めて作ろうとした.
popup.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<!-- CONTENT HERE -->
<div id="app">
{{ message }}
</div>
<!-- CONTENT END -->
<script src="assets/vendor/vue.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
こんな感じで直接vueのソースを拾ってきてテンプレートを直書きした.
main.js
var app = new Vue({
el: '#app',
data: {
message: 'hogehoge'
}
})
これでささっと動くと思ったら
It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval.
The template compiler cannot work in this environment.
Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions
このようなエラーが出てChromeさんに怒られて何も表示されなかった.
この警告に続いてinvalid expressionとか出てきたから構文間違えたかと思ってそっちのエラーばかり見て時間を費やしたけど直らない
解決
載せたエラーをググったら分かった
どうやらChrome拡張とかだとCSPなるもの 解説 が適用されてて通常配布されてるバイナリが使えないらしい.
CSP版を落としてねって書いてあったのでGithubのページからダウンロードして置き換えた.
結果動かすことができた
学んだこと
一つのエラーに固執せず複数ちゃんと見るようにしないと時間を無駄にする.
Chromeで拡張作るときのはまりどころについてひとつ学んだ.