Can't import tensorflow.js in chrome extension

Question

I am developing a chrome extension, where I use my trained keras model. For this I need to import a library tensorflow.js. How should I do that?

I tried to import tensorflow.js in my project by two ways:

1. in background.js by import * as tf from '@tensorflow/tfjs';

2. I downloaded tf.min.js and tried to add it in my manifest.json

manifest.json

{
  "manifest_version": 2,
  "name": "my_project",
  "version": "0.1",

  "background": {
        "scripts": ["background.js", "tf.min.js"]
  },
  "content_scripts": [
      {
        "matches": [
          "<all_urls>"
        ],
        "js": ["jquery-3.1.1.min.js","content.js"]
      }
   ]
}

In the first case the error was "unexpected token *";

and in the second case the error was Uncaught (in promise) ReferenceError: tf is not defined.

What did I do wrong?

Answer 1

I downloaded tf.min.js and tried to add it in my manifest.json

Try putting the tf.min.js first, like this:

{
  "background": {
    "scripts": ["tf.min.js", "background.js"]
  }
}

The scripts are loaded in the order you specify them and if you want to be able to use things from tf.min.js inside of background.js, tf.min.js has to be loaded first.