最近の Chrome packaged app では content_security_policy が使えない (或いは、 Chrome packaged app で Vue とか使いたい人のためのTIPS。) #Vue.js

結論

外部ファイルが読めない
- 全部ローカルに保存してそこから読む
evalとか使えない( eval 使ってるライブラリが全部使えない)
- Using eval in Chrome Extensions. Safely.
- サンドボックスとやらに指定して iframe の中で実行するとうまくいくらしいです。

経緯

Chromeの拡張機能を作ろうと思って、普段Vue使ってるから、今回もそれで作ろうとしたんですよ。
アプリの規模小さいからめんどくさい事は考えずにVueは直接読めばいいや。と思ったら

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
  <div id="app">
    {{ message }}
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

main.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

Refused to load the script 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource: 'wasm-eval'".

はいはい。セキュリティポリシー変えればいいのね。とりあえず全許可でいいや。

manifest.json

{
  ....
  "content_security_policy": "script-src *"
}

………

はい。この通りです。
調べると「 content_security_policy を入れればいい」って記事も大量に出てくるんですが(これも本当に厄介)、事 packaged app においてはそもそも content_security_policy そのものが使えないようです。どないせいっちゅーねん。

とりあえずローカルに落としてみます。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
  <div id="app">
    {{ message }}
  </div>
<script src="js/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

eval が使えないって怒られました。

そも content_security_policy が使えないのに許可しろもクソもありません。どないせいっちゅーねん。

で、Using eval in Chrome Extensions. Safely. をみると解決策が載ってました。

index.html

<!doctype html>
<html>
  <head>
    <script src="js/eventpage.js"></script>
  </head>
  <body>
    <iframe id="theFrame" src="main.html" style="size:100%"></iframe>
  </body>
</html>

main.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
  <div id="app">
    {{ message }}
  </div>
<script src="js/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

manifest.json

{
  ...
  "sandbox": {
    "pages": ["main.html"]
 }
}

……めんどくさいな………