さきにまとめ

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で拡張作るときのはまりどころについてひとつ学んだ.