Hi there,
I have seen chrome extension in the tfjs-examples, I am trying to make it for my model. But for that also, I am not able to get required tfjs.min.js and tfjs.js lib into extension.
I have added lib links to popup.html and tried to load the model in background.js.
Uncaught (in promise) ReferenceError: tflite is not defined
I have added package.json file —
{
“name”: “xxx”,
“version”: “0.0.1”,
“description”: “Use tfjs model.predict in a chrome extension”,
“scripts”: {
“copy”: “copy content.js dist/”,
“build”: “parcel build background.js -d dist/ -o background --no-minify && npm run copy”,
“watch”: “npm run copy && parcel watch background.js --hmr-hostname localhost -d dist/ -o background”
},
“license”: “Apache 2.0”,
“devDependencies”: {
“babel-core”: “^6.26.3”,
“babel-plugin-transform-runtime”: “^6.23.0”,
“babel-polyfill”: “^6.26.0”,
“babel-preset-env”: “^1.6.1”,
“clang-format”: “^1.2.3”,
“parcel-bundler”: “^1.9.4”
},
“resolutions”: {
“is-svg”: “4.3.1”,
“node-fetch”: “2.6.1”,
“vega”: “5.17.3”,
“glob-parent”: “5.1.2”,
“postcss”: “8.2.10”
},
“dependencies”: {
“@tensorflow/tfjs”: “^3.9.0”
}
}
The manifest.json is like this—
{
“name”: “xxxxx”,
“description”: “xxxxxx”,
“version”: “1.0”,
“manifest_version”: 2,
“browser_action”: {
“default_icon”: “icon.png”,
“default_popup”: “popup.html”,
“default_title”: “Chrome Extension”
},
“permissions”: [
“<all_urls>”,
“activeTab”
],
“background”: {
“scripts”: [“background.js”],
“persistent”: true
},
“content_scripts”: [
{
“matches”: [“http:///”, “https:///”],
“js”: [“content.js”],
“all_frames”: true,
“run_at”: “document_start”
}
],
“commands”: {
“_execute_browser_action”: {
“suggested_key”: {
“default”: “Ctrl+Shift+F”,
“mac”: “MacCtrl+Shift+F”
},
“description”: “Opens popup.html”
}
},
“content_security_policy”: “script-src ‘self’ https://cdn.jsdelivr.net ‘unsafe-eval’; object-src ‘self’”
}
Background.js is like —
// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
//import * as tf from ‘tfjs’;
/**
Function callled when extension installed into browser.
*/
chrome.runtime.onInstalled.addListener(function() {
// load TFLite model into browser
async function load_tflite_model() {
const tfliteModel = await tflite.loadTFLiteModel(
“https://storage.googleapis.com/tfweb/models/cartoongan_fp16.tflite”
);
console.log(“tfliteModel…”,tfliteModel)
}
load_tflite_model();
});
Thank
Neha Soni