Vue.js in Chrome extension

Question

Vue.js in Chrome extension

Hi! I\'m trying to make a Chrome extension using Vue.js but when I write

Answer 1

I guess you were using code like new Vue(...) in your implementation, as this issue said.

Please be aware by default CSP in chrome extension, eval and related functions are disabled.

Code like the following does not work:

• alert(eval("foo.bar.baz"));
• window.setTimeout("alert('hi')", 10);
• window.setInterval("alert('hi')", 10);
• new Function("return foo.bar.baz");

So the solution would be

1. Relaxing the default policy.

As per the description of Evaluated JavaScript,

The policy against eval() and its relatives like setTimeout(String), setInterval(String), and new Function(String) can be relaxed by adding 'unsafe-eval' to your policy:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

However, the guide also mentions that,

we strongly recommend against doing this. These functions are notorious XSS attack vectors.

2. Using CSP-compliant build.(Recommended)

As the installation page of Vue.js said,

Some environments, such as Google Chrome Apps, enforces Content Security Policy (CSP) and does not allow the use of new Function() for evaluating expressions. In these cases you can use the CSP-compliant build instead.