CODEWITHSUNDEEP
javascriptgoogle-chromehtml5-canvasfabricjsgoogle-chrome-app
Justin Taddei
Justin Taddei

Reputation: 2276

Using Fabric.js in a Chrome app

So, I'm building a simple video editor. I'm using Fabric.js <script src="/js/fabric.js"></script> to manipulate the canvas on which I'm doing the editing.

I've left out the Serialization and Parser models of it but it still uses eval for something which throws an error:

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: "default-src 'self' blob: filesystem: chrome-extension-resource:".

fabric.Canvas(String id) still works but shape objects don't (e.g. new fabric.Rect(); throws an Uncaught TypeError: fabric.Circle is not a constructor)

This is my first Chrome app and I don't really understand what's happening. If anyone could help me figure out how to use Fabric in this environment that would be most excellent.

Thanks in advance.

Upvotes: 2

Views: 623

Answers (1)

Xan
Xan

Reputation: 77541

The fact that Fabric is not 'unsafe-eval' CSP-compliant is a known issue.

As such, the only way to use it in an app or an extension is to sandbox it: perform all operations in a frame loaded as sandbox, and pass data both ways with postMessage.

See the documentation article "Using eval in Chrome Extensions. Safely."

Upvotes: 2

Related Questions