CODEWITHSUNDEEP
javascriptgoogle-chrome-extensiontensorflow.js
LuisBoris
LuisBoris

Reputation: 93

Javascript Tensorflow in Chrome Extension not working due to 'unsafe-eval'

I'm trying to update my Chrome Extension to Manifest v3. I use a JSTensorflow Model and it pops this 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: "script-src 'self'".

I know that Manifest v3 doesn't allow 'unsafe-eval', so how can I turn around this problem?

My manifest.json:

{
    "name": "Recipick DEVELOPMENT",
    "description": "Pick the recipe from a website",
    "version": "1.0.0",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js",
        "type": "module"
    },
    "action": {
        "default_title": "Recipick",
        "default_icon": "/images/icon_1.png"
    },
    "permissions": [
        "activeTab",
        "clipboardWrite",
        "sessions",
        "scripting",
        "storage",
        "tabs"
    ],
    "host_permissions": [ "*://*/*" ],
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self'"
    },
    "web_accessible_resources":  [{
        "resources": [ "*.gif" ],
        "matches": [ "*://*/*" ] 
    }]
}

Thanks for your help!

Upvotes: 3

Views: 1664

Answers (2)

LuisBoris
LuisBoris

Reputation: 93

I just found out how to do it.

You can use 'unsafe-eval' and other actions not allowed if you use them in a Sandbox environment. As it is said in https://developer.chrome.com/docs/extensions/mv3/manifest/sandbox/ :

A sandboxed page will not have access to extension APIs, or direct access to non-sandboxed pages (it may communicate with them via postMessage()).

A sandboxed page is not subject to the Content Security Policy (CSP) used by the rest of the extension (it has its own separate CSP value). This means that, for example, it can use inline script and eval.

I created a HTML page called sandbox.html and inserted it in the page I wanted to process as an iframe, with the scripts embeded in it. Then the data to be processed there is received and returned to the Content/Background Scripts via window.postMessage() (in this case window.parent.postMessage(), since it is an iframe).

Here is an example of this implementation: https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/apps/samples/sandbox.

This page might also be usefull: https://developer.chrome.com/docs/extensions/mv3/sandboxingEval/

Upvotes: 4

Noah Podgurski
Noah Podgurski

Reputation: 63

Here we learn that chrome bans any external resource or any script which includes eval() using something called the Content Security Policy.

I am also running a project with the same idea as yours and just ran into the same issue. It also mentions on that page some workarounds include:

  1. Using a 'templating library' (A library which complies with the rules)

  2. Access remote content (Send requests to an external server which does the processing there)

As far as I know there's no tensorflow.js which complies so #2 might be the only answer here.

Upvotes: 2

Related Questions