在 Chrome 应用程序中使用 Fabric.js

Question

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 (eg 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.

Answer 1

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."