Running tensorflow in Chrome extension

Question

I am having problem with implementing pretrained tensorflow.js toxicity model in my chrome extension, I used webpack to bundle my node modules.

The error i am getting

popup.html:1 Unchecked runtime.lastError: Cannot access contents of the page. Extension manifest must request permission to access the respective host.

engine.js:443 Uncaught (in promise) Error: No backend found in registry.
    at Engine.getSortedBackends (engine.js:443)
    at Engine.initializeBackendsAndReturnBest (engine.js:454)
    at Engine.get (engine.js:1405)
    at Engine.makeTensor (engine.js:860)
    at makeTensor (tensor_ops.js:121)
    at tensor (tensor_ops.js:80)
    at Module.decodeWeights (io_utils.js:308)
    at GraphModel.loadSync (graph_model.js:165)
    at GraphModel._callee$ (graph_model.js:129)
    at tryCatch (runtime.js:68)

I tried fixing the backend error via this solution, but it leads into another error Handpose tfjs Error - No backend found in registry

My manifest.json

    {
    "name": "TensorFlow toxicity recognition",
    "version": "0.1",
    "description": "TensorFlow chrome extension analyzing text toxicity",
    "author": "Petr Kolouch",
    "browser_action": {
      "default_popup": "popup.html"
  },
    "permissions": [
      "activeTab"
    ],
    "options_page": "popup.html",
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "manifest_version": 2
  }

My index.js

const toxicity = require('@tensorflow-models/toxicity');
       
    const threshold = 0.9;
    
    chrome.tabs.executeScript( {
        code: "window.getSelection().toString();"
    }, (selection) => {
    
    toxicity.load(threshold).then(model => {
    
      model.classify(selection).then(predictions => {
    
        console.log(predictions);
        document.getElementById("results").innerHTML = predictions;
    
            });
        });
    });

My popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="main.js"></script>
</head>
<body>

    <div id="results">

    </div>
    
</body>
</html>

My webpack.config.js

const path = require('path');
module.exports = {
  mode: 'development',
  target: 'web',
  entry: ['babel-polyfill', './src/index.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  }
};

My package.json

{
  "name": "tfjsdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
    "mode": "development",
    "scripts": {
      "build": "webpack --config webpack.config.js"
    },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/preset-env": "^7.10.3",
    "babel-loader": "^8.1.0",
    "babel-polyfill": "^6.26.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "@tensorflow-models/toxicity": "^1.2.2",
    "@tensorflow/tfjs": "^2.0.1"
  }
}

Thanks for your help!

Answer 1

To resolve the registry issue, only installing @tensorflow/tfjs-core to your dependencies will do. Also, import the registry to your js code:
import '@tensorflow/tfjs-backend-webgl';

Running tensorflow in Chrome extension

Question

1 answers

solution1
0 2020-07-30 09:35:42

Running tensorflow in Chrome extension

Question

1 answers

solution1 0 2020-07-30 09:35:42

solution1
0 2020-07-30 09:35:42