TF.JS uses eval(), effectively making it impossible to deploy it in Chrome extensions

Special Interest Groups TF.js
#1

Hello,

Several threads on this are already scattered over the internet (e.g. here).

In short, the default implementation of tf.js seems to use eval() somewhere. Since script-src 'unsafe-eval' is no longer an acceptable content security policy for a Chromium extension, the use of eval() effectively makes it impossible to use tf.js in Chromium extension, which is a massive bugger.

Is there any way of doing tf.js without eval?

Minimal Reproducible Example (for a chromium extension):

index.html

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script> 

<head>
    <title>Ask Me About This Website</title>
    <meta charset="utf-8">
</head>
<body>
</body>
<script type="module" src="script.js"></script>
</html>

script.js

document.getElementById("button").addEventListener('click', () => {
    // no op
});

manifest.json

{
    "name": "MRP",
    "version": "0.0.1",
    "description": "Minimal Reproducible Example",
    "manifest_version": 3,
    "author": "lex",
    "action":{
        "default_popup": "index.html",
        "default_title": "MRP"
    },
    "permissions": [
        "activeTab"
    ],
    
    "content_security_policy": {
        "extension_pages": "script-src 'self'"
    }
}

Then simply load the folder containing these three by pressing Load unpacked in Extensions after enabling the extensions developer mode.

1 Like
#3

Thanks for bringing this up. This is strange as our team just released a Chrome extension example that should be working and uses TensorFlow.js. Could you try following this example which should work currently for deploying to Chrome extension:

You may also want to check:

Although I am pretty sure I checked with the TFJS team before - I am 99% sure we dont use eval() anywhere in our code.

Double check you have enabled and allowed content scripts to run like we did in our example here (any 3p stuff you must explicitly allow in manifest if I remember correctly else it wont run):

#5

Hi Jason,

Sorry for the silence and for a wrong MRE. It was eventually resolved in the GitHub issues here:

tf.js uses JavaScript eval(), making it impossible to use TensorFlow JS in websites with stricter Content Security Policy · Issue #7554 · tensorflow/tfjs (github.com)

TL;DR:

Found the cause! This is due to the use of the Function constructor instead of eval, which is why I couldn’t find it before. It looks like regenerator-runtime constructs a function at tfjs.js:17:159850.

You can try loading the es2017 TFJS bundle that doesn’t use regenerator-runtime for polyfills. I’ve tested this with your example code and confirmed it can create an empty model. I also tried adding two tensors together, and that worked too.

#7

No problem glad you got it resolved!