Chrome ExtensionsでUncaught EvalErrorになったときの対処法

Chrome Extensionsで、ブラウザアクションからローカルのページを表示する機能を作成していた。

そのページには、Vue.jsを使っていたのだが

Uncaught EvalError: 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' chrome-extension-resource:".

というエラーが出て、うまく表示されなかった。

そのときの対処法をまとめる。

Uncaught EvalError の対処法

エラーは「'unsafe-eval'はコンテンツセキュリティポリシーで許されていないので、JavaScriptのソースを評価（実行）できない」という内容。

要は、文字列からコードを生成するevalメソッドはダメですよ！というもの。

対処法は簡単で、manifest.jsonを修正するだけ。

{
    "name": "Uncaught EvalError対処法",
    "version": "0.0.1",
    "manifest_version": 2,
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
    // 以下略
}

5行目のように"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"を追加するだけで良い。
これでエラーなく表示されるはずだ。

参考サイト

• CSP policy directives - Security | MDN
• javascript - eval in chrome package app - Stack Overflow

以上

written by @bc_rikko